What's New In DevTools (Chrome 81)

Moto G4 support in Device Mode

After enabling the Device Toolbar you can now simulate the dimensions of a Moto G4 viewport from the Device list.

Click Show Device Frame to show the Moto G4 hardware around the viewport.

Related features:

• Open the Command Menu and run the Capture screenshot command to take a screenshot of the viewport that includes the Moto G4 hardware (after enabling Show Device Frame).
• Throttle the network and CPU to more accurately simulate a mobile user's web browsing conditions.

Chromium issue #924693

Cookie-related updates

Blocked cookies in the Cookies pane

The Cookies pane in the Application panel now colors blocked cookies with a yellow background.

See also Debug why a cookie was blocked to learn how to access a similar UI from the Network panel.

Chromium issue #1030258

Cookie priority in the Cookie pane

The Cookies tables in the Network and Application panels now include a Priority column.

Chromium issue #1026879

Edit all cookie values

All cells in the Cookie tables are editable now, except cells in the Size column because that column represents the network size of the cookie, in bytes. See Fields for an explanation of each column.

Copy as Node.js fetch to include cookie data

Right-click a network request and select Copy > Copy as Node.js fetch to get a fetch expression that includes cookie data.

Chromium issue #1029826

More accurate web app manifest icons

Previously, the Manifest pane in the Application panel would perform its own requests in order to display web app manifest icons. DevTools now shows the exact same manifest icon that Chrome uses.

Chromium issue #985402

Hover over CSS content properties to see unescaped values

Hover over the value of a content property to see the unescaped version of the value.

For example, on this demo when you inspect the p::after pseudo-element you see an escaped string in the Styles pane:

When you hover over the content value you see the unescaped string:

Source map errors in the Console

The Console now tells you when a source map has failed to load or parse.

Setting for disabling scrolling past the end of a file

Open Settings and then disable Preferences > Sources > Allow scrolling past end of file to disable the default UI behavior that allows you to scroll well past the end of a file in the Sources panel.

Here's a GIF of the feature.

<<../../_shared/devtools-feedback.md>>

<<../../_shared/canary.md>>

<<../../_shared/discover.md>>