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.

Image.png

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.

Image.png

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

Image.png

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.

AnimatedImage.gif

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.

Image.png

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.

Image.png

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:

Image.png

Image.png

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.

Image.png

Properties - show all

The Properties are now by default hidden and a Show All button has been added

Image.png

FlexBox editor

Row and Column reverse have been added to the flexbox editor

Image.png


You could be interested in

Right click context menu with Angular

Right click custom menu inside dynamic lists with Angular Material
2020-05-31

Enums in Angular templates

How to use enum in the html template
2019-01-21

WebApp built by Marco using SpringBoot, Java 16, Mustache, Markdown and Hosted using Jelastic