| layout | title | authors | date | updated | description | hero | alt | tags | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
layouts/blog-post.njk |
What's New In DevTools (Chrome 98) |
|
2022-01-13 |
2022-01-13 |
Full-page Accessibility tree, more precise changes in the Changes tab, and more. |
image/dPDCek3EhZgLQPGtEG3y0fTn4v82/G9SHKEY2944USYg0uks6.jpg |
|
{% Partial 'devtools/banner.md' %}
{% YouTube id='YqkIS88VulM' %}
The new Full-page accessibility tree makes it easier for you to get an overview of the full-page accessibility tree and help you better understand how your web content is exposed to assistive technology.
In the Elements panel, open the Accessibility pane and select Enable full-page accessibility tree checkbox. Then, reload DevTools and you will see a new accessibility button in the Elements panel.
You can click on it to toggle to the Full-page accessibility tree view. You can expand nodes or click to see details in the Accessibility pane.
Select a node and toggle back to the DOM tree view. The corresponding DOM node is selected now. This is a great way to understand the mapping between the DOM node and its accessibility tree node. This works for DOM tree ⬌ Accessibility tree view too!
Previously, the accessibility tree was available in the Accessibility pane. The view is limited, it only enables you to explore a single node and its ancestors.
Our team is still actively working on this preview feature. We are looking for your feedback for further enhancements!
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/o4BY07JabERFd6OieU8b.png", alt="Full-page accessibility tree", width="800", height="505" %}
Chromium issue: 887173
The code changes in the Changes tab is pretty-printed automatically.
Previously, it was hard to trace the actual changes of minified source code because all the code is shown in a single line.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/aup2bT490dkvuBu3o4DS.png", alt="Changes tab", width="800", height="450" %}
Chromium issues: 1238818, 1268754 , 1086491
You can now adjust the Timeout settings in the Recorder for all steps or a specific step. This is useful especially for pages with slow network requests and lengthy animation.
For example, I recorded a user flow on this demo page to load and click on the menu item. However, the loading of the menu items is slow (it takes 6 seconds). The replay of this user flow failed because it exceeds 5 seconds (the default timeout).
We can use the new Timeout settings to fix this. Expand the step which we click on the menu item. Edit the step by Add timeout and set it to 6000 milliseconds (equal to 6s).
Optionally, you can adjust the Timeout in the Replay settings for all the steps. Expand the Replay settings and edit the Timeout value.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/y7RDpIp3pd2n6Vnxc5Du.png", alt="timeout settings for user flow recording", width="800", height="530" %}
Chromium issue: 1257499
Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation.
The new Back/forward cache tab can help you test your pages to ensure they're optimized for bfcache, and identify any issues that may be preventing them from being eligible.
To test a particular page, navigate to it in Chrome and then in DevTools go to Application > Back-forward Cache. Next, click the Test back/forward cache button and DevTools will attempt to navigate away and back to determine whether the page could be restored from bfcache.
As web developers, it's critical to know how to optimize your pages for bfcache across all browsers because it will significantly improve the browsing experience for users—especially those with slower networks or devices.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/4OrWjuRgG1bB0AupcMmS.png", alt="Back/forward cache tab", width="800", height="516" %}
Chromium issue: 1110752
If you want to focus on a specific property in the Properties pane, you can now type that property name or value in the new Filter textbox.
By default, properties whose value is null or undefined are not shown. Enable the Show all checkbox to view all properties.
These enhancements allow you to get to the properties you care for quicker and thus improve your productivity!
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ewmNloO4ohRxlWRNuEW1.png", alt="Properties pane filter", width="800", height="505" %}
Chromium issue: 1269674
The forced-colors CSS media feature is used to detect if the user agent has enabled a forced colors mode (e.g. Windows High Contrast mode) where it enforces a user-chosen limited color palette on the page.
Open the Command Menu, run the Show Rendering command, and then set the Emulate CSS media feature forced-colors dropdown.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/75qGjkzfbXfOEJUhML5i.png", alt="CSS forced-colors media feature", width="800", height="623" %}
Chromium issue: 1130859
You can now open the Command Menu and run the Show rulers on hover command. The page rulers make it easier to measure the width and height of an element.
Previously, you can only enable the page rulers via Settings > Show rulers checkbox.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/FLF6RWO2bm5SMksdayLv.png", alt="Show rulers on hover command", width="800", height="591" %}
Chromium issue: 1270562
The Flexbox editor added two new buttons to support row-reverse and column-reverse in flex-direction.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/JHI4frP4MqaydXk19sq2.png", alt="Flexbox editor", width="800", height="546" %}
Chromium issue: 1263866
Select a XHR request in the Network panel and press R on the keyboard to replay the XHR. Previously, you can only replay the XHR via the context menu (right click > Replay XHR)
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/M3s35wS3A0OoKMeubzMx.png", alt="replay XHR", width="800", height="530" %}
Chromium issue: 1050021
A new shortcut is added in the Search tab allowing you to expand and collapse all the search results. Previously, you could only expand and collapse the search results by clicking on one file at a time.
Open the search tab via Esc > 3-dot menu > Search. Enter a search string (e.g. function) and press Enter to see the list of search results. Focus on the search results and use the following shortcut to expand/collapse the search files:
- Windows / Linux -
Ctrl+Shift+{or} - MacOS -
Cmd+Options+{or}
Go to the keyboard shortcuts for reference of keyboard shortcuts in Chrome DevTools.
{% Video src="video/dPDCek3EhZgLQPGtEG3y0fTn4v82/v11XfQLwp7w9qIk440QP.mp4", autoplay="true", muted="false", loop="true", class="screenshot" %}
Chromium issue: 1255073
The Lighthouse panel is now running Lighthouse 9. Lighthouse will now list all the elements sharing the same id.
Non-unique element id is a common accessibility problem. For instance, the id referenced in an aria-labelledby attribute is used on multiple elements.
Check out the What’s new in Lighthouse 9.0 for more details on the updates.
{% Img src="image/MtjnObpuceYe3ijODN3a79WrxLU2/gZI1flmYHuUpF637Idzy.png", alt="A Lighthouse audit for 'All focusable elements must have a unique id', showing two elements, both with the same id", width="800", height="380", class="screenshot" %}
Chromium issue: 772558
Loads of stability improvements in the Sources panel as we upgraded it to use CodeMirror 6. Here are few notable improvements:
- Significantly faster when opening large files (e.g. WASM, JavaScript)
- No more random scrolling when stepping through code
- Improved auto-complete suggestions for editable sources (e.g. snippets, local override)
Chromium issue: 1241848
These are some noteworthy fixes in this release:
- Properly displaying the waterfall diagram of network requests. Previously, the style was broken. (1275501)
- The code highlight was broken when searching in documents with very long lines in the Sources panel. It’s now fixed. (1275496)
- No more duplicate Payload tab in network requests. (1273972)
- Fixed the missing layout shifts details in the Summary section of the Performance panel. (1259606)
- Support arbitrary characters (e.g.
,,.), in Network Search queries. (1267196)
{% Aside %} To enable the experiment, check the Enable Reporting API panel in the Application panel checkbox under Settings > Experiments. {% endAside %}
The experimental Reporting API pane was introduced in Chrome 96 to help you monitor the reports generated on your page and their status.
The Endpoints section is now available. It gives you an overview of all the endpoints configured in the Reporting-Endpoints header.
Learn to use the Reporting API to monitor security violations, deprecated API calls, and more.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/D1fUz4zuS1xwDbszgft1.png", alt="Reporting API pane", width="800", height="560" %}
Chromium issue: 1200732
{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}