Google Chrome 86, which is due on October 6, 2020, will have an updated version of Dev Tools. It will provide new auditing and debugging features that will extend the usefulness of the tool. Publishers will be able to debug video in new easy to access media panel, have access to more of the emulators, and to take advantage of decent audits from Lighthouse to 6.2.

Screenshot of New Media Panel Video Debugger

Recommendation: Google Chrome To Display Fast Pages Label On Mobile

The New Media Panel

Chrome dev tools now have a new media panel that allows you to debug videos.

Steps To Access The Media Panel

1. Tap on the three dots to see more options.
2. Click on More Tools
3. Select Media to show the new video debugger tool.

You can inspect events, properties, messages, and timelines via the new media panel.

According To Google

• “The Properties tab displays the properties of the media player.
• Click on the Events tab to view all the media player events.
• Click on the Messages tab to view the media player message logs. You can filter the messages by log level or string.
• The Timeline tab is where you can view the media playback and buffer status live.”

Take Node Screenshots

It enables you to take screenshots of specific nodes through the contextual drop-down menu in the Elements panel.

Reproduce Missing Local Fonts

This will ignore all the fonts that are on your machine when enabled, and act as if the fonts are missing. This makes the dev tool to extract the font exactly like a new visitor will, enabling you to debug the process.

Emulate Prefers-Reduced-Data

This is a sort of setting that can emulate a website visitor who has set the browser preference as data saving mode. The so-called prefers-reduced-data CSS media query can then display a smaller image.

This feature is experimental and is said that it can be used to know low-income users by the W3c.

“This feature may be an undesired source of fingerprinting, with a bias towards low income with limited data. A Privacy and Security section should be added to this spec, and it should address this concern. <https://github.com/w3c/csswg-drafts/issues/4832>“

This type of media query will be supported from Chrome 85 onwards which also includes Chrome-based Microsoft Edge. This will let a publisher debug and view the web page behavior when enabled.

Lighthouse 6.2

This update comes up with a lot of improvement and fixes.

Some Of The Improvements Are- 

1. “Avoid long main thread tasks. Reports the longest tasks on the main thread, useful for identifying worst contributors to input delay.
2. Links are crawlable. Check if the href attribute of anchor elements links to an appropriate destination, so the links can be discovered.
3. Unsized image elements – Check if an explicit width and height is set on image elements. Explicit image size can reduce layout shifts and improve CLS.
4. Avoid non-composited animations. Reports non-composited animations that appear janky and reduce CLS.
5. Listens for the unload events. Reports the unload event. Consider using the pagehide or visibilitychange events instead as the unload event does not fire reliably.”

The above-mentioned list is just partial listing. There are more to the improvements such as support for new JavaScript features.