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 177 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
-
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 -
Pick a color from the webpage, or the screen
When working with the CSS of a webpage, from the Elements or Inspector tool, in DevTools, there may be times when you want to reuse a existing color from the webpage, or from the screen, but might not... Read more -
Highlight areas that the browser engine re-paints
When you scroll through a webpage, or when parts of the webpage change, the browser engine sometimes needs to repaint parts of the page. The process of converting the layout and style information into... Read more -
Display the specificity of a CSS selector
The specificity of a CSS selector is a score that the browser computes based on the different parts of the selector. It is used to determine which CSS rule takes precedence when multiple rules from th... Read more
edge
chrome
firefox
polypane
safari