What is new in Chrome 74 DevTools

When you inspect a web element on the web page, and mouse hover a CSS property like “margin” or “padding” under the styles tab, all nodes affected by that declaration will be highlighted (Figure 1).

There is a new tab added to check the usability of the interactive elements in mobile view and a new badging system added for PWA (Progressive Web Apps) audits in the audits panel.

For an example, if a button and a link are too close when a mobile user tries to tab on the button may be the link can actually be touched. Therefore a warning will be shown as below under the audits tab (Figure 2):

As per the above (Figure 3) example, “File a bug” and “View source” links are to closer and can be overlapped when a mobile user trying to tap. To prevent that it suggests having enough space around them.

The next feature is if your web application passed “Fast and reliable”, “installable”, and “PWA optimised” sections PWA badge will be added as shown below (Figure 4) :

Under the network panel, you can view the binary WebSocket messages by following the below steps:

Now you no need to install any third party tools to capture the screenshots. You can simply do that by doing the following commands.

Now you can filter the initiated service workers by typing “is:service-worker-initiated” or intercepted service workers by typing “is:service-worker-intercepted” in the Network panel filter (Figure 8).

Under the performance panel, long tasks are shown with a red triangle on the top right corner (Figure 9).

In the timings section the new “First Paint” marker show as below (Figure 10):

Related posts:

I still remember that in some science fiction movies, driverless vehicles always attract everyone’s attention.Imagining cars no longer needs a driver, and you can sit in the back seat to enjoy the…

Wechat has been making rounds with its latest technology called mini-programs. After its launch last January 2017, mini programs have totally swept the Chinese market garnering more than 500 million…

service worker is main key ingredient and knight of this feature which install in client browser and run independently as application after installing in browser as service worker which regularly a…