Open Web Developer Advocate at Google • Tools, Performance, Animation, UX
Read about DevTools' new command menu and its over 60 actions that enable super 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.
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.
We've moved into a shiny new home at developer.google.com/web have great new tutorials and tips for you.