New features and changes coming to DevTools in Chrome 62:
- Support for top-level
awaitoperators in the Console.
- Screenshots of a portion of the viewport, and screenshots of specific HTML nodes.
- CSS Grid highlighting.
- A new Console API for querying objects.
- Negative filters and URL filters in the Console.
- HAR imports in the Network panel.
- Previewable cache resources.
- More predictable cache debugging.
- Block-level code coverage.
Top-level await operators in the Console
The Console now supports top-level
New screenshot workflows
You can now take a screenshot of a portion of the viewport, or of a specific HTML node.
Screenshots of a portion of the viewport
To take a screenshot of a portion of your viewport:
- Click Inspect or press Command+Shift+C (Mac) or Control+Shift+C (Windows, Linux) to enter Inspect Element Mode.
- Hold Command (Mac) or Control (Windows, Linux) and select the portion of the viewport that you want to take a screenshot of.
- Release your mouse. DevTools downloads a screenshot of the portion that you selected.
Screenshots of specific HTML nodes
To take a screenshot of a specific HTML node:
Select an element in the Elements panel.
Open the Command Menu.
Capture node screenshot. DevTools downloads a screenshot of the selected node.
CSS Grid highlighting
To view the CSS Grid that's affecting an element, hover over an element
in the DOM Tree of the Elements panel. A dashed border appears around
each of the grid items. This only works when the selected item, or the
parent of the selected item, has
display:grid applied to it.
Check out the video below to learn the basics of CSS Grid in less than 2 minutes.
A new API for querying heap objects
queryObjects(Constructor) from the Console to return an array
of objects that were created with the specified constructor. For example:
queryObjects(Promise). Returns all Promises.
queryObjects(HTMLElement). Returns all HTML elements.
foois a function name. Returns all objects that were instantiated via
The scope of
queryObjects() is the currently-selected execution context
in the Console. See Selecting execution context.
New Console filters
The Console now supports negative and URL filters.
-<text> in the Filter box to filter out any Console message
DevTools filters out a message if
<text> is found:
- In the message text.
- In the filename from which the message originated.
- In the stack trace text.
The negative filter also works with regular expressions such as
url:<text> in the Filter box to only show messages that originated
from a script whose URL includes
The filter uses fuzzy matching. If
<text> appears anywhere in the URL,
then DevTools shows the message.
HAR imports in the Network panel
Drag and drop a HAR file into the Network panel to import it.
Previewable cache resources in the Application panel
Click a row in a Cache Storage table to see a preview of that resource below the table.
More responsive cache debugging
In Chrome 61 and earlier, debugging caches created with the Cache API is... rough. For example, when a page creates a new cache, you have to manually refresh the page or DevTools in order to see the new cache.
In Chrome 62, the Cache Storage tab now updates in real-time whenever you create, update, or delete a cache or a resource. Watch the video below for an example.
See the Cache Storage Demo to try it out yourself.
Block-level code coverage
In Chrome 61 and earlier, the Coverage tab marks all of the code within a function as used, so long as the function is called.
Starting in Chrome 62, the Coverage tab now tells you which code within a function is called.
The best place to discuss any of the features or changes you see here is the firstname.lastname@example.org mailing list. You can also tweet us at @ChromeDevTools if you're short on time. If you've encountered a certain bug in DevTools, please open an issue.
Discover other DevTools features
Below is a list of everything that's been covered in the What's New In DevTools series.
- Support for
classredeclarations in the Console
- Improved WebAssembly debugging
- Request Initiator Chains in the Initiator tab
- Highlight the selected network request in the Overview
- URL and path columns in the Network panel
- Updated User-Agent strings
- New Audits panel configuration UI
- Per-function or per-block code coverage modes
- Code coverage must now be initiated by a page reload
- Debug why a cookie was blocked
- View cookie values
- Simulate different prefers-color-scheme and prefers-reduced-motion preferences
- Code coverage updates
- Debug why a network resource was requested
- Console and Sources panels respect indentation preferences again
- New shortcuts for cursor navigation
- Multi-client support in the Audits panel
- Payment Handler debugging
- Lighthouse 5.2 in the Audits panel
- Largest Contentful Paint in the Performance panel
- File DevTools issues from the Main Menu
- Copy element styles
- Visualize layout shifts
- Lighthouse 5.1 in the Audits panel
- OS theme syncing
- Keyboard shortcut for opening the Breakpoint Editor
- Prefetch cache in the Network panel
- Private properties when viewing objects
- Notifications and push messages in the Application panel
- Autocomplete with CSS values
- A new UI for network settings
- WebSocket messages in HAR exports
- HAR import and export buttons
- Real-time memory usage
- Service worker registration port numbers
- Inspect Background Fetch and Background Sync events
- Puppeteer for Firefox
- Meaningful presets when autocompleting CSS functions
- Clear site data from the Command Menu
- View all IndexedDB databases
- View a resource's uncompressed size on hover
- Inline breakpoints in the Breakpoints pane
- IndexedDB and Cache resource counts
- Setting for disabling the detailed Inspect tooltip
- Setting for toggling tab indentation in the Editor
- Highlight all nodes affected by CSS property
- Lighthouse v4 in the Audits panel
- WebSocket binary message viewer
- Capture area screenshot in the Command Menu
- Service worker filters in the Network panel
- Performance panel updates
- Long tasks in Performance panel recordings
- First Paint in the Timing section
- Bonus tip: Shortcut for viewing RGB and HSL color codes (video)
- Detailed tooltips in Inspect Mode
- Export code coverage data
- Navigate the Console with a keyboard
- AAA contrast ratio line in the Color Picker
- Save custom geolocation overrides
- Code folding
- Frames tab renamed to Messages tab
- Bonus tip: Network panel filtering by property (video)
- Visualize performance metrics in the Performance panel
- Highlight text nodes in the DOM Tree
- Copy the JS path to a DOM node
- Audits panel updates, including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu
- Bonus tip: Use Device Mode to inspect media queries (video)
- Hover over a Live Expression result to highlight a DOM node
- Store DOM nodes as global variables
- Initiator and priority information now in HAR imports and exports
- Access the Command Menu from the Main Menu
- Picture-in-Picture breakpoints
- Bonus tip: Use
monitorEvents()to log a node's fired events in the Console (video)
- Live Expressions in the Console
- Highlight DOM nodes during Eager Evaluation
- Performance panel optimizations
- More reliable debugging
- Enable network throttling from the Command Menu
- Autocomplete Conditional Breakpoints
- Break on AudioContext events
- Debug Node.js apps with ndb
- Bonus tip: Measure real world user interactions with the User Timing API
- Eager Evaluation
- Argument hints
- Function autocompletion
- ES2017 keywords
- Lighthouse 3.0 in the Audits panel
- BigInt support
- Adding property paths to the Watch pane
- "Show timestamps" moved to Settings
- Bonus tip: Lesser-known Console methods (video)
- Search across all network headers
- CSS variable value previews
- Copy as fetch
- New audits, desktop configuration options, and viewing traces
- Stop infinite loops
- User Timing in the Performance tabs
- Network tab renamed to Page tab
- Dark theme updates
- Certificate transparency information in the Security panel
- Site isolation features in the Performance panel
- Bonus tip: Layers panel + Animations Inspector (video)
- Blackboxing in the Network panel
- Auto-adjust zooming in Device Mode
- Pretty-printing in the Preview and Response tabs
- Previewing HTML content in the Preview tab
- Local Overrides support for styles inside of HTML
- Bonus tip: Blackbox framework scripts to make Event Listener Breakpoints more useful
- Local Overrides
- New accessibility tools
- The Changes tab
- New SEO and performance audits
- Multiple recordings in the Performance panel
- Reliable code stepping with workers in async code
- Bonus tip: Automate DevTools actions with Puppeteer (video)
- Performance Monitor
- Console Sidebar
- Group similar Console messages
- Bonus tip: Toggle hover pseudo-class (video)
- Multi-client remote debugging support
- Workspaces 2.0
- 4 new audits
- Simulate push notifications with custom data
- Trigger background sync events with custom tags
- Bonus tip: Event listener breakpoints (video)
- Top-level await in the Console
- New screenshot workflows
- CSS Grid highlighting
- A new Console API for querying objects
- New Console filters
- HAR imports in the Network panel
- Previewable cache resources
- More predictable cache debugging
- Block-level code coverage
- Mobile device throttling simulation
- View storage usage
- View when a service worker cached responses
- Enable the FPS meter from the Command Menu
- Set mousewheel behavior to zoom or scroll
- Debugging support for ES6 modules
- New Audits panel
- 3rd-Party Badges
- A new gesture for Continue To Here
- Step into async
- More informative object previews in the Console
- More informative context selection in the Console
- Real-time updates in the Coverage tab
- Simpler network throttling options
- Async stacks on by default