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.

Figure 5. Highlighting a CSS Grid

Check out the video below to learn the basics of CSS Grid in less than
2 minutes.

A new API for querying heap 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

Negative filters

Type -<text> in the Filter box to filter out any Console message
that includes <text>.

Figure 6. The first statement logs one,
two, three, and four to the
Console. two is hidden because -two
is entered in the Filter box

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 -/[4-5]*ms/.

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.

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

Figure 8. Importing a HAR file
Note: To export a HAR file, right-click a request and select Save
As HAR With Content. All requests that DevTools has recorded are saved
to the file. If you've got any filters enabled, those are ignored.

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.

Figure 9. Previewing a cache resource

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.