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 168 tips (and we're adding more all the time) available thanks to all of our wonderful
If you know other debugging techniques and tips not documented here, submit a new tip on our GitHub repository!
Name evaluated files with the sourceURL pragma
Simulate the Window Controls Overlay feature for PWA
If you're building a desktop PWA, you might want to use the Window Controls Overlay (WCO) feature to make your app look more native. With WCO, you gain control over the entire surface area of the inst... Read more
Inspect the user-agent DOM
Browsers often add elements to the DOM of your web pages on top of the ones you, yourself, defined. For example, when you create a <video> element, the browser creates a bunch of nested DOM node... Read more
Explain console errors by using artificial intelligence
Edge DevTools lets use the Microsoft Copilot AI assistant to explain errors and warnings in the Console tool. Console errors can sometimes be hard to understand and fix. The large language models that... Read moreCategories:Supported by:
Enable DevTools in Safari
Unlike other browsers, Safari hides its DevTools (and other developer-related features) by default. That's actually good because 99% of the people using the browser are probably not web developers. If... Read moreCategories:Supported by: