What's New In DevTools (Chrome 62)
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.
Note: You can check what version of Chrome you're running at
chrome://version. Chrome auto-updates to a new major version about every 6
weeks.
Top-level await operators in the Console
The Console now supports top-level await operators.
await operators in the
Console
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
![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.
or press
Command+Shift+C (Mac) or
Control+Shift+C (Windows, Linux)
to enter Inspect Element Mode.
Screenshots of specific HTML nodes
To take a screenshot of a specific HTML node:
Select an element in the Elements panel.
![An example of a node]()
Figure 3. In this example, the goal is to take a screenshot of the blue header that contains the text Tools. Note that this node is already selected in the DOM Tree of the Elements panel
- Open the Command Menu.
Start typing
nodeand selectCapture node screenshot. DevTools downloads a screenshot of the selected node.![The result of the 'Capture node screenshot' command]()
Figure 4. The result of the Capture node screenshotcommand
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
Call 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.queryObjects(foo), wherefoois a function name. Returns all objects that were instantiated vianew foo().
New Console filters
The Console now supports negative and URL filters.
Negative filters
Type -<text> in the Filter box to filter out any Console message
that includes that <text>.
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).
-foo
Console filter
URL filters
Type url:<text> in the Filter box to only show messages that originated
from a script whose URL includes <text>.
The filter uses fuzzy matching. If <text> appears anywhere in the URL,
then DevTools shows the message.
hymn. By hovering
over the script name, you can see that the host name includes this text
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.
Feedback
The best place to discuss any of the features or changes you see here is the google-chrome-developer-tools@googlegroups.com mailing list. You can also tweet us at @ChromeDevTools if you're short on time.