Debug DevTools Tips

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 more
Categories:
- debug
- javascript
Supported by:
- safari
Find inactive CSS styles
Sometimes we write CSS code that's entirely valid but has absolutely no effect at all, and this can... Read more
Categories:
- css
- debug
Supported by:
Debug popups that appear on hover using the debugger statement
In Debug popups that appear on hover using JS we described how to pause the debugger to inspect popu... Read more
Categories:
- debug
Supported by:
Simulate pseudo CSS classes
If you use :hover, :active, and other such pseudo-classes in CSS, you can actually simulate these st... Read more
Categories:
Supported 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 more
Categories:
- debug
- javascript
Supported by:
- edge
- chrome
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
Categories:
- debug
- javascript
Supported by:
Debug popups that appear on hover using JS
Have you ever been frustrated because you couldn't style a popup or tooltip that appeared on hover?... Read more
Categories:
- debug
Supported by:
Monitor all events dispatched on an element
You can use the monitorEvents global function in the Console panel to log all of the events dispatch... Read more
Categories:
- console
- debug
Supported by:
- edge
- chrome
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
Categories:
- javascript
- debug
Supported 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 more
Categories:
- debug
- javascript
Supported by:
- safari
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
Categories:
- javascript
- debug
Supported 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 more
Categories:
- javascript
- debug
Supported by:

12 debug DevTools Tips