What's New In DevTools (Chrome 87)
New CSS Grid debugging tools, Web Authn tab, moveable tools and Computed sidebar pane.
chrome7 devtools devtools-whatsnew
What's New In DevTools (Chrome 86)
New Media panel, Issues tab updates, emulate missing local fonts, inactive users and prefers-reduced-data.
chrome86 devtools devtools-whatsnew
What's New In DevTools (Chrome 85)
Style editing for CSS-in-JS frameworks, Lighthouse 6.0, new JavaScript features, and more.
chrome85 devtools devtools-whatsnew
Handling Heavy Ad Interventions
Chrome’s Heavy Ad Intervention will unload ads that exceed their allowance for CPU or network usage. Learn how to monitor these with the Reporting API and update your ads to avoid issues.
What's New In DevTools (Chrome 84)
The new Issues tab, accessibility information in the Inspect Mode tooltip, and more.
chrome84 devtools devtools-whatsnew
What's New In DevTools (Chrome 83)
Emulate color vision deficiencies, emulate locales, COOP and COEP debugging, and lots more.
chrome83 devtools devtools-whatsnew
What's New In DevTools (Chrome 81)
Moto G4 in Device Mode, new cookie-related features, and more.
chrome81 devtools devtools-whatsnew
What's New In DevTools (Chrome 80)
Support for let and class redeclarations in the Console, improved WebAssembly debugging, and more.
chrome80 devtools devtools-whatsnew
What's New In DevTools (Chrome 79)
Debug why cookies were blocked, simulate "prefers-color-scheme: dark", code coverage updates, and more.
chrome79 devtools devtools-whatsnew
What's New In DevTools (Chrome 78)
Lighthouse 5.2 in the Audits panel, and Largest Contentful Paint in the Performance panel.
chrome78 devtools devtools-whatsnew
What's New In DevTools (Chrome 77)
Copy element styles, visualize layout shifting, and more.
chrome77 devtools devtools-whatsnew
What's New In DevTools (Chrome 76)
Autocomplete with CSS values, a new UI for network settings, and more.
chrome76 devtools devtools-whatsnew
What's New In DevTools (Chrome 75)
Meaningful autocomplete preset values, clear site data from the Command Menu, and more.
chrome75 devtools devtools-whatsnew
KV Storage: the Web's First Built-in Module
An introduction to the new KV Storage API, built-in modules, and import maps.
chrome74 devtools devtools-whatsnew
What's New In DevTools (Chrome 74)
Highlight nodes affected by a CSS property, Lighthouse v4, WebSocket binary message viewer, and more.
chrome74 devtools devtools-whatsnew
What's New In DevTools (Chrome 73)
Logpoints, detailed tooltips in Inspect Mode, and much more.
chrome73 devtools devtools-whatsnew
What's New In DevTools (Chrome 72)
Visualize performance metrics, highlight text nodes, copy the JS path to a node, and Audits panel updates.
chrome72 devtools devtools-whatsnew
What's New In DevTools (Chrome 71)
Highlight DOM nodes from Live expressions, store nodes as global variables, and more.
chrome71 devtools devtools-whatsnew
What's New In DevTools (Chrome 70)
Live Expressions in the Console, highlight DOM nodes during Eager Evaluation, and more.
chrome70 devtools devtools-whatsnew
What's New In DevTools (Chrome 68)
Eager evaluation, argument hints, function autocompletion, Lighthouse 3.0, and more.
chrome68 devtools devtools-whatsnew
What's New In DevTools (Chrome 67)
Search across network headers, copy requests as fetch, audit pages using desktop conditions, and much more.
chrome67 devtools devtools-whatsnew
What's New In DevTools (Chrome 66)
Blackboxing in the Network panel, auto-adjust zooming in Device Mode, and more.
chrome66 devtools devtools-whatsnew
Using DevTools Features Without Opening DevTools
Use Puppeteer to launch Chromium with DevTools features enabled.
What's New In DevTools (Chrome 65)
Local Overrides, accessibility tools, performance and SEO audits, and more.
chrome65 devtools devtools-whatsnew
What's New In DevTools (Chrome 63)
Multi-client remote debugging, push notifications with custom data, and Workspaces 2.0.
chrome63 devtools devtools-whatsnew
What's New In DevTools (Chrome 64)
Performance Monitor, Console Sidebar, and Console groupings.
chrome64 devtools devtools-whatsnew
What's New In DevTools (Chrome 62)
Top-level await operators in the Console, new screenshot workflows, CSS Grid highlighting, and more.
chrome62 devtools devtools-whatsnew
What's New In DevTools (Chrome 61)
New features and changes coming to DevTools in Chrome 61.
chrome61 devtools devtools-whatsnew
DOMException: The play() request was interrupted
What is really happening with "DOMException: The play() request was interrupted"?
What's New In DevTools (Chrome 60)
New features and changes coming to DevTools in Chrome 60.
chrome60 devtools devtools-whatsnew
What's New In DevTools (Chrome 59)
New features and changes coming to DevTools in Chrome 59.
chrome59 devtools devtools-whatsnew
What's New In DevTools (Chrome 58)
New features and changes coming to DevTools in Chrome 58.
Chrome DevTools: JavaScript CPU Profiling in Chrome 58
"Record JavaScript CPU Profile" has been changed in Chrome 58.
DevTools Digest, October 2016
New Console features, updates on the context selector bug, and the new UC Browser user agent.
DevTools Digest, September 2016: Perf Roundup
Perf tooling improvements in DevTools over the last few Chrome releases.
DevTools Digest, August 2016
What happened to the Resources panel, new features, and community activity.
DevTools Digest: DevTools in 2016 and Beyond
Big themes and trends for DevTools in 2016 and beyond.
DevTools Digest: More Power with the New Command Menu
Read about DevTools' new command menu and its over 60 actions that enable super fast workflows.
A New Device Mode for a Mobile-First Generation
Learn all about Chrome DevTools' new, refreshed Device Mode introduced in Chrome 49.
Supercharged Remote Debugging, Class Toggles and Our Own Late Night Show?!
Learn all about the revamped “Inspect Devices” UI, toggle classes easily in the now-fixed style panel and watch the pilot of DevTools Tonight.
devtools digest update chrome49
DevTools Go Dark, @keyframe Editing and Smarter Autocomplete
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.
devtools digest update chrome49
Security Panel Debuts in Chrome DevTools
Learn all about the new Security Panel in Chrome DevTools.
DevTools Digest (CDS Edition): A Glimpse into the Future and RAIL Profiling
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.
DevTools Digest: Efficient Element Edits, Service Worker Debugging, and Material Design Shades
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.
DevTools Digest: Tab Reordering, Console is #2 and Framework Event Listeners
Re-order DevTools tabs which ever way suits you best and see exactly where framework events were bound.
The larger-than advanced Network Panel filter, and a few others
Did you know that the filter in the Network panel supports a few nifty custom search labels?
Simple keyboard tricks to use in the Styles Pane
Learn how to effectively navigate the Styles Pane with a few useful keyboard tricks.
DevTools Digest: Aggregated Timeline Details, Color Palettes and More
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.
Easily duplicate DOM nodes
You can easily change the DOM without having to edit the HTML as a giant string.
Edit HTML in the Console Panel
The DOM node context menu, which you may recognize from the elements panel, is also present in the console panel.
Five tricks to use in the Console Panel
A new home for DevTools
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.
Improved DOM breadcrumbs
Did you know the Elements Panel has a Breadcrumb trail?
Live-edit CSS in Sources
Did you know you can live edit CSS in Sources and have it update the page in real-time?
DevTools Digest: Film strip and a new home for throttling
Discover the new film strip functionality and more in this first of many DevTools Digest updates.
Add a new custom device as a preset
Do you frequently emulate devices of a certain dimension? In DevTools Device Mode, you can add new device presets.
Inspect and trigger CSS media queries
The Device Mode has a media query inspector built-in that allows for easier responsive design.
Shortcut to select the next occurrence
In the Sources Panel editor, you can select the next occurrence with Cmd + D.
Select and execute a block of code in the Sources Panel
Use the shortcut Ctrl + Shift + E to run a block of highlighted code in the Sources Panel.
Set a breakpoint based on a certain condition
When you set a breakpoint, you can make it conditional based on the result of an expression.
Quickly cycle through the DevTools panels
You can use Cmd+] (or Cmd+[) to cycle through the panels in the DevTools.
Print out a quick stack trace from the Console
You can use console.trace() to get a quick and easy stack trace to better understand code execution flow.
Who inspects the inspector?
Did you know you can inspect your DevTools with DevTools?
Trigger a pseudo class on an element
Ever tried to debug CSS hover effects but failed keeping the mouse on the element? Here's how to do it.
Project wide search with optional file scope
Learn the secret commands to search like a pro in DevTools.
Network color groups
Learn about which colors match to which resource type to easy identify resources.
Preview JavaScript values inline while debugging
Learn how to preview the values of JavaScript variables in DevTools while debugging.
Quickly edit/view resources from the Elements panel
Some UI and feature enhancements to the Color Picker tool
Alt + Click to expand all child nodes
Better Incognito DevTools
Some appearance preferences are now persisted through to incognito windows.
Command click to add multiple cursors in the Sources Panel
Learn how to to multi-cursor editing in the DevTools sources panel.
Copy image as data URI
Right click on an image preview within the Resources Panel to copy it as a Data URI (base 64 encoded).
Quick-edit element tags
You can double click on the opening tag name of a node in the Elements Panel to edit it.
Quickly monitor events from the Console Panel
You can log all the events dispatched to an object using the Command Line API method monitorEvents(object [, events]).
Reveal in Elements panel
Reveal DOM nodes in the Elements panel from the Console.
See matching selectors
When you are viewing a selector in the Styles Pane, comma separated selector portions are colored differently depending on whether or not they match the selected DOM node.
The currently selected DOM node
Learn the quick console shortcut to get the currently selected DOM node.
The easing editor
Select an easing CSS property to get a visual animated preview for how it behaves.
Toggle the DevTools dock state with a keyboard shortcut
Use Cmd + Shift + D to toggle the DevTools dock state between the last two recently used states.
Unfinished network requests
You can use the Is:running Advanced Network Filter to see unfinished network requests (e.g. running requests).
Use keyboard to navigate through callstack
How to set a breakpoint and navigate through the call stack with keyboard shortcuts.
Get and debug event listeners
Get and debug event listeners in DevTools with these console commands.
Automatically pause on any exception
In the DevTools, you can automatically pause on any exception (especially useful for uncaught exceptions).
Quickly change CSS values
Quickly change CSS values with the keyboard or mousewheel
Autocomplete for bracket notation
Did you know you can autocomplete bracket notation in the Sources panel?
Replay a network request in cURL
Learn how to debug a network request from the command line.
View and change your DOM breakpoints
How to view and change your DOM breakpoints with the Breakpoints pane in DevTools.
Scroll elements into the viewport
If an element you're inspecting is out of view, here's how to bring it into the viewport.
Film strips in Network panel
Visually navigate the network panel and view captured screenshots during page load
Triggering of pseudo classes
Learn how to trigger pseudo classes such as :active to properly debug your CSS.
Expand CSS shorthand properties
In the styles pane, you can expand CSS shorthand properties like flex or padding and see the full range of properties which are defined for you.
Port forwarding
DevTools port forwarding enables even localhost URLs to work on mobile.
Search DOM tree by CSS selector
When browsing the DOM with the Elements panel, try searching for nodes via CMD/Ctrl+F by their CSS selectors.
Get notified of JS errors while you type
If you get an error in the console panel, click it to reveal the line in the Sources Panel where an indication of the error pops up.
Easy timeline recording
Try undocking DevTools to a separate window so the record button is positioned closely to the portion of the page where you need to carry out an action
Go to a line number at a specific column
Learn how to jump to specific line numbers in the Sources panel.
Easily jump to event listeners
Learn how to show the function definition of a registered event listener on any node.
Granular statement highlights
See the exact executed statement with granular highlighting.
Local Modifications
Local modifications lets you see what changes have been made (via DevTools) to certain source files.
Hard reload
With DevTools opened, click and hold the reload button to see more options.
Cycle through editing locations
Your cursor position history is preserved in the Sources Panel, allowing you to cycle through previous editing locations with Alt+(backwards) or Alt+(forwards).
Copy the response of a network resource to your clipboard
In addition to copying the request/response headers of a network resource, you can also copy the response itself.
Perform a column selection by by dragging
You can make a column selection in the Sources Panel editor by holding Alt while dragging the mouse.
Predefined snippets
How to run predefined snippets of code on any web page.
Quick-edit element tags
You can double click on the opening tag name of a node in the Elements Panel to edit it.
Copy image as data URI
Right click on an image preview within the Resources Panel to copy it as a Data URI (base 64 encoded).
Reveal in Elements panel
Reveal DOM nodes in the Elements panel from the Console.
See matching selectors
When you are viewing a selector in the Styles Pane, comma separated selector portions are colored differently depending on whether or not they match the selected DOM node.
Quickly monitor events from the Console Panel
You can log all the events dispatched to an object using the Command Line API method monitorEvents(object [, events]).
Command click to add multiple cursors in the Sources Panel
Learn how to to multi-cursor editing in the DevTools sources panel.
Better Incognito DevTools
Some appearance preferences are now persisted through to incognito windows.
The currently selected DOM node
Learn the quick console shortcut to get the currently selected DOM node.
Alt + Click to expand all child nodes
Toggle the DevTools dock state with a keyboard shortcut
Use Cmd + Shift + D to toggle the DevTools dock state between the last two recently used states.
Unfinished network requests
You can use the Is:running Advanced Network Filter to see unfinished network requests (e.g. running requests).
The easing editor
Select an easing CSS property to get a visual animated preview for how it behaves.
A new home for DevTools
We've moved into a shiny new home at developer.google.com/web have great new tutorials and tips for you.
DevTools Timeline: Now Providing the Full Story
We've upgraded the Timeline panel for Chrome DevTools to give developers more insight on their site’s runtime performance.
DevTools Digest December 2013
The latest update for changes to the Chrome DevTools.
DevTools answers: What font is that?
Ever wondered which font is actually being used to render text? Wonder no more as Chrome DevTools reveals all!
sourceMappingURL and sourceURL syntax changed
Profiling Long Paint Times with DevTools' Continuous Painting Mode
Websocket Frame Inspection now in Chrome DevTools
Chrome Developer Tools for Speed
7 minute videos: JavaScript Console Protips & newish DOM APIs
