New features and changes coming to DevTools in Chrome 62:
Top-level await operators in the Console
The
Console
now supports top-level
await
operators.
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:
- 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.
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:
Select an element
in the
Elements
panel.
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
node
and select
Capture node screenshot
. DevTools downloads a screenshot of the
selected node.
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.
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()
.
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.
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
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.
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.
Figure 10
. An example of the
Coverage
tab in Chrome 61. Line 4 is marked used, even though
it never executes
Starting in Chrome 62, the
Coverage
tab now tells you which code within a function is called.
Figure 11
. An example of the
Coverage
tab in Chrome 62. Line 4 is marked unused
Download the preview channels
Consider using the Chrome
Canary
,
Dev
or
Beta
as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!
Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.
- Submit a suggestion or feedback to us via
crbug.com
.
- Report a DevTools issue using the
More options
>
Help
>
Report a DevTools issues
in DevTools.
- Tweet at
@ChromeDevTools
.
- Leave comments on our What's new in DevTools
YouTube videos
or DevTools Tips
YouTube videos
.
What's new in DevTools
A list of everything that has been covered in the
What's new in DevTools
series.
Chrome 125
Chrome 124
Chrome 123
Chrome 122
Chrome 121
Chrome 120
Chrome 119
Chrome 118
Chrome 117
Chrome 116
Chrome 115
Chrome 114
Chrome 113
Chrome 112
Chrome 111
Chrome 110
Chrome 109
Chrome 108
Chrome 107
Chrome 106
Chrome 105
Chrome 104
Chrome 103
Chrome 102
Chrome 101
Chrome 100
Chrome 99
Chrome 98
Chrome 97
Chrome 96
Chrome 95
Chrome 94
Chrome 93
Chrome 92
Chrome 91
Chrome 90
Chrome 89
Chrome 88
Chrome 87
Chrome 86
Chrome 85
Chrome 84
Chrome 83
Chrome 82
Chrome 82 was cancelled
.
Chrome 81
Chrome 80
Chrome 79
Chrome 78
Chrome 77
Chrome 76
Chrome 75
Chrome 74
Chrome 73
Chrome 72
Chrome 71
Chrome 70
Chrome 68
Chrome 67
Chrome 66
Chrome 65
Chrome 64
Chrome 63
Chrome 62
Chrome 61
Chrome 60
Chrome 59