Don't miss out on the action at this year's Chrome Dev Summit, happening on Oct 23rd and 24th. Learn more.

What's New In DevTools (Chrome 62)

New features coming to DevTools in Chrome 62:

Top-level await operators in the Console

The Console now supports top-level await operators.

Using top-level await operators in the Console
Figure 1. Using top-level 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:

  1. Click Inspect Inspect or press Command+Shift+C (Mac) or Control+Shift+C (Windows, Linux) to enter Inspect Element Mode.
  2. Hold Control and select the portion of the viewport that you want to take a screenshot of.
  3. Release your mouse. DevTools downloads a screenshot of the portion that you selected.
Taking a screenshot of a portion of the viewport
Figure 2. Taking a screenshot of a portion of the viewport

Screenshots of specific HTML nodes

To take a screenshot of a specific HTML node:

  1. 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

  2. Open the Command Menu.

  3. Start typing node and select Capture 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 screenshot command

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.

Highlighting a CSS Grid
Figure 5. Highlighting a CSS Grid

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), where foo is a function name. Returns all objects that were instantiated via new 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).

An example of 3 messages that will be filtered out
Figure 6. An example of 3 messages that will be filtered out
The result after applying the negative filter
Figure 7. The result after applying the -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.

An example of URL filtering
Figure 8. Using URL filtering to only display messages that originate from scripts whose URL includes 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.

Importing a HAR file
Figure 9. Importing a HAR file

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.

Previewing a cache resource
Figure 10. Previewing a cache resource

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.