Learn to get more comfortable with DevTools
If you're a web developer, DevTools Tips is for you! Whatever your level of experience, and whatever browser you
prefer using for web development, use DevTools Tips to learn new tips and tricks on a regular basis.
Get tips delivered to your favorite news reader by using our RSS feed.
There are currently 180 tips (and we're adding more all the time) available thanks to all of our wonderful
open-source contributors.
If you know other debugging techniques and tips not documented here, submit a new tip on our
GitHub repository!
Latest tips
-
Extend traces recorded in the Performance tool with your own custom data
The Performance tool lets you add custom tracks with your own custom events, when recording performance traces. This is useful to surface your own performance data, which might not map directly to the... Read more -
Visualize a webpage's memory usage during a performance recording
To check how much memory a webpage consumes over the time of a specific user scenario, and to identify potential memory leaks, you can use the Memory tool in Chrome or Edge DevTools with the Memory op... Read more -
Override source files to test changes in the browser
It can be helpful to make quick changes to the source code that a site uses, especially when debugging a site in production. For example, if you suspect that a bug is caused by a specific line of code... Read more
-
Override HTTP response headers
With DevTools, you can override the response headers of a network request and test your website under different conditions. HTTP response headers are metadata sent by the server to the browser, along... Read more -
Hide elements from the page, without changing the layout
In the DevTools' Elements (or Inspector) tool, you can delete nodes from the DOM tree by selecting them in the tool and then pressing Delete or Backspace. While this is great to completely remove the... Read more
edge
chrome
firefox
polypane