New features 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.
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 Control 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.
A new API for querying 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
New Console filters
The Console now supports negative and URL filters.
-<text> in the Filter box to filter out any Console message
that includes that
In general, if
<text> is found anywhere in the UI that DevTools presents
for the message, then the Console hides the message. This includes the
message text, the filename from which the message originated, and the stack
trace text (when applicable).
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.
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.