Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
Detect unused CSS and JavaScript code
To make sure your webpage loads and appears fast for your users, load only the CSS and JS code that... Read moreSupported by:
-
Disable abusive debugger statements that prevent inspecting websites
Some websites make it impossible to use DevTools by adding debugger statements in their code. The st... Read moreSupported by:
-
Manipulate global objects on page load, before other scripts run
When a page loads, and all of its global objects are ready, but before the JavaScript code of the pa... Read moreCategories:Supported by:
-
Re-use scripts as snippets
The Console is great to write short JavaScript expressions that read from the document or manipulate... Read moreSupported by:
-
Ignore JavaScript code to ease debugging
Debugging JavaScript can quickly get out of hand when you have a lot of code and many functions that... Read moreSupported by:
-
Edit JavaScript functions while debugging to test a quick fix
Sometimes, when debugging JavaScript code in DevTools, you may want to test a quick change and see w... Read moreSupported by:
-
Copy an element's JavaScript path
JavaScript often needs references to DOM nodes on the page. Getting a reference is sometimes easy wi... Read moreSupported by:
-
Manipulate complex JSON files using DevTools
I often work with large amount of data that I need to go through and gather interesting information... Read moreSupported by:
-
Detect the element with focus at any time
If you want to know which element has the focus on the web page at any time, you can use a live expr... Read moreSupported by:
-
Remove or disable event listeners
When you're trying to debug something and event listeners on the page keep interfering with what you... Read moreSupported by:
-
Copy a CSS rule as CSS-in-JS format
Do you use a CSS-in-JS framework? If so, you know how frustrating it can be to copy CSS from DevTool... Read moreSupported by:
-
Automatically logging name and value in console.log()
Using the console of DevTools you can to log some information to debug your JavaScript. The common w... Read moreSupported by:
-
Cut down on console noise using live expressions
Using the Console of DevTools to log information that changes a lot is a bad idea. First of all, you... Read moreSupported by:
-
Console.log() for the web with logpoints
Using the console to log some information is a very common way to debug your JavaScript. But you can... Read moreSupported by:
-
Pause script execution when the DOM changes
If you want to know what JavaScript code removes, adds, or modifies a DOM element in the page, you c... Read moreSupported by:
-
Play a sound when a line of JavaScript is executed
Sometimes pausing execution when a line of JavaScript is executed is too much, sometimes you only wa... Read moreCategories:Supported by:
-
Capture node creation stack traces
Have you ever wanted to know what caused a specific DOM node or element to be created in the page? W... Read moreSupported by:
-
Event listeners are suppressed when paused
This is not really a tip, but rather an interesting thing to be aware of when debugging JavaScript.... Read moreSupported by:
-
Copy an object from the console
The console panel supports a very handy copy() function that stringifies and copies anything you pas... Read moreSupported by:
-
Find your web component's custom element code
In Firefox, when inspecting elements (in the Inspector panel), you can click on the custom badge to... Read moreCategories:Supported by:
-
View performance markers in order
When logging performance.timing events to the console, they appear in alphabetical order since they... Read moreSupported by:
-
Unminify JavaScript code to easily read and debug it
Sometimes, the JavaScript code that runs on a website is minified and really hard to read. This is c... Read moreSupported by:
-
Use the debugger statement to pause script execution
If you prefer to use console.log() statements rather than the JavaScript debugger because you find i... Read moreSupported by: