Open Web Developer Advocate at Google • Tools, Performance, Animation, UX
Read about DevTools' new command menu and its over 60 actions that enable crazy fast workflows.
Learn all about Chrome DevTools' new, refreshed Device Mode introduced in Chrome 49.
Learn all about the revamped “Inspect Devices” UI, toggle classes easily in the now-fixed style panel and watch the pilot of DevTools Tonight.
Learn how DevTools makes you type less with smarter Console autocomplete, how to edit @keyframe rules directly in the Styles pane, how to have fun with CSS Custom Variables and how to join the dark side.
Learn all about the new Security Panel in Chrome DevTools.
Learn how DevTools is going mobile first with a new, streamlined Device Mode that’s always on. Use the color buttons to quickly add colors to your selectors and find out what’s coming to DevTools soon.
Use the DOM panel’s new context menu to efficiently edit nodes. Debug services workers directly via the Resources panel. Choose from all of the Material Design shades in the colorpicker. Blackbox JS libraries more easily.
Re-order DevTools tabs which ever way suits you best and see exactly where framework events were bound.
Modern browsers make it easy to customize certain components, like icons, the address bar color, and even add things like custom tiles. These simple tweaks can increase engagement and bring users back to your site.
Find out which third-party scripts cause perf issues with the Aggregated Details in Timeline, how to choose consistent colors with the new color palette and much more.
We've moved into our shiny new home at developers.google.com/web/tools/chrome-devtools and have great new tutorials and tips for you.
Learn how to set up CSS & JS preprocessors to help you code more efficiently.
Discover the new film strip functionality and more in this first of many DevTools Digest updates.
With DevTools opened, click and hold the reload button to see more options.
Compare similar data objects using the table() method.
Console logging is a powerful way to inspect what your page or application does. Let's start with console.log() and explore other advanced usage.
Your job doesn't end with ensuring your site runs great across Chrome and Android. Even though Device Mode can simulate a range of other devices like iPhones, we encourage you to check out other browsers solutions for emulation.
Touch screens, GPS chips, and accelerometers can be difficult to test since most desktops don't have them. The Chrome DevTools sensor emulators reduce the overhead of testing by emulating common mobile device sensors.
By executing code one line or one function at a time, you can observe changes in the data and in the page to understand exactly what is happening.
Keep your client-side code readable and debuggable even after you've combined, minified or compiled it.
Take advantage of the Console API to measure execution times and count statement executions.
Use virtual devices in Chrome's Device Mode to build mobile-first websites.
Chrome DevTools' Device Mode lets you mimic how your development site will look in production on a range of devices.
We've moved into a shiny new home at developer.google.com/web have great new tutorials and tips for you.