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.