![](/style/images/good.png)
![](/style/images/bad.png)
What's New In DevTools (Chrome 88)
source link: https://developers.google.com/web/updates/2020/11/devtools
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
![Jecelyn Yeen](https://developers.google.com/web/images/contributors/jecelynyeen.jpg)
Faster DevTools startup
DevTools startup now is ~37% faster in terms of JavaScript compilation (from 6.9s down to 5s)! 🎉
The team did some optimization to reduce the performance overhead of serialisation, parsing and deserialisation during the startup.
There will be an upcoming engineering blog post explaining the implementation in detail. Stay tuned!
Chromium issue: 1029427
New CSS angle visualization tools
DevTools now has better support for CSS angle debugging!
![CSS angle](https://developers.google.com/web/updates/images/2020/11/devtools/01-angle.png)
When an HTML element on your page has CSS angle applied to it (e.g. background: linear-gradient(angle, color-stop1, color-stop2)
, transform: rotate(angle)
), a clock icon is shown next to the angle in the Styles pane. Click on the clock icon to toggle the clock overlay. Click anywhere in the clock or drag the needle to change the angle!
There are mouse and keyboard shortcuts to change the angle value as well, check out our documentation to learn more!
Chromium issues: 1126178, 1138633
Emulate unsupported image types
DevTools added two new emulations in the Rendering tab, allowing you to disable AVIF and WebP image formats. These new emulations make it easier for developers to test different image loading scenarios without having to switch browsers.
Suppose we have the following HTML code to serve an image in AVIF and WebP for newer browsers, with a fallback PNG image for older browsers.
<picture>
 <source srcset="test.avif" type="image/avif">
 <source srcset="test.webp" type="image/webp">
 <img src="test.png" alt="A test image">
</picture>
Open the Rendering tab, select “Disable AVIF image format” and refresh the page. Hover over the img src
. The current image src (currentSrc
) is now the fallback WebP image.
![Emulate image types](https://developers.google.com/web/updates/images/2020/11/devtools/02-emulate-image-type.png)
Chromium issue: 1130556
Simulate storage quota size in the Storage pane
You can now override storage quota size in the Storage pane. This feature gives you the ability to simulate different devices and test the behavior of your apps in low disk availability scenarios.
Go to Application > Storage, enable the Simulate custom storage quota checkbox, and enter any valid number to simulate the storage quota.
![Simulate storage quota size](https://developers.google.com/web/updates/images/2020/11/devtools/03-storage-quota.png)
Chromium issues: 945786, 1146985
New Web Vitals lane in the Performance panel recordings
Performance recordings now have an option to display Web Vitals information.
After recording your load performance, enable the Web Vitals checkbox in the Performance panel to view the new Web Vitals lane.
The lane currently displays Web Vitals information such as First Contentful Paint (FCP), Largest Contentful Paint (LCP) and Layout Shift (LS).
Check out web.dev/vitals to learn more about how to optimize user experience with the Web Vitals metrics.
![Web Vitals lane](https://developers.google.com/web/updates/images/2020/11/devtools/04-web-vitals-lane.png)
Chromium issue: N/A
Report CORS errors in the Network panel
DevTools now shows CORS error when a network request is failed due to Cross-origin Resource Sharing (CORS).
In the Network panel, observe the failed CORS network request. The status column shows “CORS error”. Hover over on the error, the tooltip now shows the error code. Previously, DevTools only showed generic “(failed)” status for CORS errors.
This lays the foundation for our next enhancements on providing more detailed description of the CORS problems!
![CORS errors](https://developers.google.com/web/updates/images/2020/11/devtools/05-cors-err.png)
Chromium issue: 1141824
Frame details view updates
Cross-origin isolation information in the Frame details view
The cross-origin isolated status is now displayed under the Security & Isolation section.
The new API availability section displays the availability of SharedArrayBuffer
s (SAB) and whether they can be shared using postMessage()
.
A deprecation warning will show if the SAB and postMessage()
is currently available,
but the context is not cross-origin isolated. Learn more about cross-origin isolation and why it will be required for features like SharedArrayBuffers
in this article.
![Cross-origin information](https://developers.google.com/web/updates/images/2020/11/devtools/06-frame-cross-origin-isolated-api.png)
Chromium issue: 1139899
New Web Workers information in the Frame details view
DevTools now displays dedicated web workers under the frame which creates them.
In the Application panel, expand a frame with web workers, then select a worker under the Workers tree to view the web worker's details.
![Web workers information](https://developers.google.com/web/updates/images/2020/11/devtools/07-frame-worker.png)
Chromium issues: 1122507, 1051466
Display opener frame details for opened windows
You can now view the details about which frame caused the opening of another Window.
Select an opened window under the Frames tree to view the window details. Click on the Opener Frame link to reveal the opener in the Elements panel.
![Opener frame details](https://developers.google.com/web/updates/images/2020/11/devtools/08-frame-opener.png)
Chromium issue: 1107766
Open Network panel from the Service Workers pane
View all service worker (SW) request routing information with the new Network requests link. This provides developers added context when debugging the SW.
Go to Application > Service Workers, click on the Network requests of a SW. The Network panel is opened in the bottom panel displaying all service worker related requests (the network requests are filtered by “is:service-worker-intercepted”).
![Open Network panel from the Service Workers](https://developers.google.com/web/updates/images/2020/11/devtools/09-sw-network-request.png)
Chromium issue: N/A
New copy options in the Network panel
Copy property value
The new “Copy value” option in the context menu lets you copy the property value of a network request.
![Copy property value](https://developers.google.com/web/updates/images/2020/11/devtools/10-copy-prop-value.png)
In the Network panel, click on a network request to open the Headers pane. Right click on one of the properties under these section: Request payload (JSON) Form Data Query String Parameters Request Headers Response Headers
Then, you can select Copy value to copy the property value to your clipboard.
Chromium issue: 1132084
Copy stacktrace for network initiator
Right-click a network request, then select Copy stacktrace to copy the stacktrace to your clipboard.
![Copy stacktrace](https://developers.google.com/web/updates/images/2020/11/devtools/11-copy-stacktrace.png)
Chromium issue: 1139615
Wasm debugging updates
Preview Wasm variable value on mouseover
When hovering over a variable in WebAssembly (Wasm) disassembly while paused on a breakpoint, DevTools now shows the variable current value.
In the Sources panel, open a Wasm file, put a breakpoint and refresh the page. Hover to a variable to see the value.
![Preview Wasm variable on mouseover](https://developers.google.com/web/updates/images/2020/11/devtools/12-wasm-mouseover.png)
Chromium issues: 1058836, 1071432
Evaluate Wasm variable in the Console
You can now evaluate Wasm variable in the Console while paused on a breakpoint.
In this example, we put a breakpoint on the line local.get $input
. When debugging, type $input
in the Console will return the current value of the variable, which is 4
in this case.
![Evaluate Wasm variable in the Console](https://developers.google.com/web/updates/images/2020/11/devtools/12-wasm-console.png)
Chromium issue: 1127914
Consistent units of measurement for file/memory sizes
DevTools now consistently use kB for displaying file/memory sizes. Previously DevTools mixed kB (1000 bytes) and KiB (1024 bytes). For example, the Network panel previously used “kB” labels but actually performed calculations using KiB, which caused needless confusion.
Chromium issue: 1035309
Highlight pseudo elements in the Elements panel
DevTools has increased the color contrast of pseudo elements to help you better spot them.
![Highlight pseudo elementse](https://developers.google.com/web/updates/images/2020/11/devtools/15-pseudo.png)
Chromium issue: 1143833
Experimental features
CSS Flexbox debugging tools
To enable the experiment, check the Enable CSS Flexbox debugging features checkbox under Settings > Experiments.
Flexbox debugging tools are coming!
For starters, DevTools now shows a flex
badge in the Elements panel for elements with display: flex
applied to it.
Beside that, new alignment icons are added in the following flexbox properties:
flex-direction
align-items
align-content
align-self
justify-items
justify-content
On top of that, these icons are context-aware. The icon direction will be adjusted according to:
flex-direction
direction
writing-mode
These icons aim to help you better visualize the flexbox layout of the page.
![CSS Flex debugging](https://developers.google.com/web/updates/images/2020/11/devtools/13-flex-debugging.png)
Here is the design doc of the Flexbox tooling features. More features will be added soon.
Give it a try and let us know what you think!
Chromium issues: 1144090, 1139945
Customize chords keyboard shortcuts
To enable the experiment, check the Enable keyboard shortcut editor checkbox under **Settings** > **Experiments**.
DevTools added experimental support for customize keyboard shortcuts since last release.
You can now create chords (a.k.a multi-keypress shortcuts) in the shortcut editor.
Go to Settings > Shortcuts, hovering on a command and click the Edit button (pen icon) to customize the chords shortcut.
![Chords keyboard shortcuts](https://developers.google.com/web/updates/images/2020/11/devtools/14-keyboard-shortcuts.png)
Chromium issue: 174309
Feedback
To discuss the new features and changes in this post, or anything else related to DevTools:
- File definite bug reports and feature requests at Chromium Bugs.
- Discuss possible features, changes, and bugs on the Mailing List.
- Get help on how to use DevTools on Stack Overflow.
- Tweet us at @ChromeDevTools.
- File bugs on this document in the Web Fundamentals repository.
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.
Note: Canary is released as soon as its built, without testing. This means that Canary breaks about once-a-month. It's usually fixed within a day. You can go back to using Chrome Stable while Canary is broken.Discover DevTools features
Below is a list of everything that's been covered in the What's New In DevTools series.
Chrome 88
Chrome 87
Chrome 86
Chrome 85
Chrome 84
Chrome 83
Chrome 82
Chrome 81
Chrome 80
Chrome 79
Chrome 78
Chrome 77
Chrome 76
Chrome 75
Chrome 74
Chrome 73
Chrome 72
- Visualize performance metrics in the Performance panel
- Highlight text nodes in the DOM Tree
- Copy the JS path to a DOM node
- Audits panel updates, including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu
- Bonus tip: Use Device Mode to inspect media queries (video)
Chrome 71
Chrome 70
Chrome 68
Chrome 67
Chrome 66
Chrome 65
Chrome 64
Chrome 63
Chrome 62
Chrome 61
Chrome 60
Chrome 59
rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK