What's New In DevTools (Chrome 81)

Published on

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.

Simulating a Moto G4 viewport

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

Showing the Moto G4 hardware

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.

Blocked cookies in the Cookies pane of the Application panel

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.

Caution

Chrome is the only browser that supports cookie priority.

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.

Editing a cookie value

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.

Copy as Node.js fetch

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.

Icons in the Manifest pane

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:

The escaped string

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

The unescaped value

More detailed source map errors in the Console #

The Console now provides more detail on why a source map failed to load or parse. Previously it just provided an error without explaining what went wrong.

A source map loading error in the Console

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.

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.