What's New In DevTools (Chrome 81)

Published on

Interested in helping improve DevTools? Sign up to participate in Google User Research here.

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.

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!

Getting in touch with the Chrome DevTools team

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   More   > 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 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

Updated on Improve article

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