Google is committed to advancing racial equity for Black communities. See how.

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.

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.

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.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

To discuss the new features and changes in this post, or anything else related to DevTools:

Consider Canary

If you're on Mac or Windows, consider using Chrome Canary as your default development browser. Canary gives you access to the latest DevTools features.

Discover DevTools features

Below is a list of everything that's been covered in the What's New In DevTools series.

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

Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!