Chrome DevTools improvements for Web developers
This is a summary about the improvements in Chrome DevTools in the latest versions.
It’s not en exhaustive list, the goal is to see which new features can help our productivity as developers (at least according to my personal opinion as Frontend developer). You can find more details in the Chrome Developers blog linked here: https://developer.chrome.com/blog/ Most of the images are extracted from the videos/blogs referenced.
I only describe the new features of Chrome. I previously used extensively Firefox Developer Edition for the development, but since the layoffs of the Mozilla Foundation I switched to Chrome that is the main choice of the frontend developers too.
(Coming soon) Chrome 100
Chrome 99
https://developer.chrome.com/blog/new-in-devtools-99/ (21-Feb-2022)
Throttling WebSocket requests
Previously this feature was available only for HTTP.
I rarely had to do with WebSockets projects but this feature allows to remove some manually coded throttling simulation for the tests, this is very important for mission-critical real-time application. According to the video this feature was requested since 2014(!) … don’t lose hope if you are waiting some specific improvement.
Styling the console messages
You can now add some style to your console messages. Previously the implementation was broken in Chrome. I tested using Firefox Developer Edition and it worked correctly too.
Here you can find the list of the options: https://developer.chrome.com/docs/devtools/console/format-style/ you can use ANSI and CSS.
New Reporting API pane in the Application panel
This panel should show if there are issues (security, deprecations, …) with the API calls. Here you have more details about the Reporting API. The errors report is sent to the Endpoints, allowing the developers to be notified of the issue. If you have a max security website it's worth to look if you can find this monitoring useful.
You can test the report here: https://reporting-api-demo.glitch.me/page
Other important improvements
Chrome 98
https://developer.chrome.com/blog/new-in-devtools-98/ (13-Jan- 2022)
Design mode
document.designMode = ‘on’ allows to edit the html elements directly in the viewer. It can be used to quickly prototype an existing page.
This is nice if you want quickly test some features (a.k.a. debug some issues) in live with the users. The changes are not saved but you can take a screenshot of the result.
New accessibility Tree (preview)
This is particularly important if you are developing public websites that have strict requirement in accessibility and/or are accessed using assistive technology.
Enable full-page accessibility tree is new, it requires a refresh after the selection.
You can find the details of the accessibility tree here: https://developer.chrome.com/blog/full-accessibility-tree/#what-is-the-accessibility-tree
Back/forward cache
Back-Forward cache improvements. Chrome will give more information in case there are problems with the bfcache.
If you don’t know what the bfcache is you can find more information here: https://web.dev/bfcache/, in a sentence: ‘bfcache is an in-memory cache that stores a complete snapshot of a page as the user is navigating away’.
Translation: the previous page is stored 'as-is’, if the user push the ‘back' button, the previous page is re-showed and not re-loaded. Maybe check if this can create benefits/issues with your application.
Code changes are pretty printed
This can be useful if, like me, you try a lot of changes directly in the browser before to apply the changes to the webapp. One limitation is that it doesn’t show the changes in element.style but only in pre-existing classes.
If you don’t see the Changes tab you can activate it with the menu:
Timeout in the Recorder
It’s now possible to set the timeout in the Recorder to avoid issues with the slow loading of elements. This can be useful when the backend is loading a lot of data and you don’t want to complain again with the Backend developers or setup a test server. You can give a bit more of ‘time’ to the action in the frontend.
Properties - show all
The Properties are now by default hidden and a Show All button has been added
FlexBox editor
Row and Column reverse have been added to the flexbox editor
