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 more -
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 more -
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 more -
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 more -
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 more -
Copy an element's JavaScript path
JavaScript often needs references to DOM nodes on the page. Getting a reference is sometimes easy wi... Read more -
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 more -
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 more -
Remove or disable event listeners
When you're trying to debug something and event listeners on the page keep interfering with what you... Read more -
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 more -
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 more -
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 more -
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 more -
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 more -
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 more -
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 more -
Copy an object from the console
The console panel supports a very handy copy() function that stringifies and copies anything you pas... Read more -
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 more -
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 more -
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 more