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.
- Open the Command Menu and run the
Capture screenshotcommand 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.
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.
Cookie priority in the Cookie pane #
The Cookies tables in the Network and Application panels now include a Priority column.
Chrome is the only browser that supports cookie priority.
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.
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.
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 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.
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.