A look at the new features of Chrome DevTools in 2020

This article will take you to quickly learn about some of the new features of Chrome DevTools. We'll briefly introduce it, then dive into many new DevTools features and learn about progress in other browsers. I keep focusing on these aspects because I created Dev Tips, the largest collection of DevTools prompts you can find online!

It is crucial to understand the changes in DevTools as it continues to evolve, with new features designed to help us improve our development and debug experience.

Let's take a look at the latest and best features. While the publicly stable version of Chrome has most of these features, I'm using Chrome Canary because I like to be at the forefront of technology.

Lighthouse

Lighthouse is an open source tool for auditing web pages, usually around performance, SEO, accessibility, and more. Lighthouse has been bundled together as part of DevTools for some time, meaning you can find it in a panel called…Lighthouse!

I really like Lighthouse because it is one of the easiest parts of DevTools to use. Click "Generate Report" and you will immediately get human-readable comments for the web page, such as:

Documents use easy-to-read font size, 100% easy-to-read text

or:

Avoid excessively large DOM sizes (1,189 elements)

Almost every review is linked to the developer documentation explaining why the review failed and how it can be improved.

The best way to get started with Lighthouse is to run the audit on your own website:

1. Open DevTools and navigate to the Lighthouse panel when you visit one of the sites
2. Select the project you want to review ( best practices are a good starting point)
3. Click to generate a report
4. Click on any approved/failed review to investigate the results

Although Lighthouse has been part of DevTools for some time (since 2017!), it is still worth mentioning as it continues to offer user-facing features such as:

• Check if the anchor element resolves to its URL audit (interesting fact: I'm involved in this work!)
• Check if the maximum content drawing metric is fast enough for review
• Warn you about auditing that is not using JavaScript

Better "check elements"

This is a nuanced, very small feature in some ways, but it can have a profound impact on how we handle web accessibility.

It works as follows. When you use Check Elements, arguably the most common use of DevTools, you now get tooltips that contain additional information about accessibility.

The reason I say this has a profound impact is that DevTools has accessibility for a while, but how many of us actually use them? Including this information in a commonly used feature like Check Element will give it a higher visibility and make it more accessible.

Tool tips include:

• The contrast ratio of text (how much contrast is the foreground text with background color, or how bad is it)
• Text representation
• ARIA Roles
• Whether the inspected element can be focused on the keyboard

To try this feature, right-click (or Cmd Shift C) element and select Check to view it in DevTools.

I made a 14-minute video about accessibility debugging with Chrome DevTools, which covers some of them in more detail.

Simulated vision defects

As the name implies, you can use Chrome DevTools to simulate visual impairment. For example, we can view websites from a blurred vision perspective.

How do you do this in DevTools? Like this:

1. Open DevTools (right-click and select Check or Cmd Shift C).
2. Open the DevTools command menu (Cmd Shift P on Mac and Ctrl Shift P on Windows).
3. Select Show Rendering in the Command menu.
4. Select the defect in the Rendering panel .

We use fuzzy vision as an example, but DevTools has other options including: full color blindness, partial color blindness, teal blindness, and total color blindness.

Like any such tool, it is designed to complement our (hopefully) existing accessibility skills. In other words, it is not instructive, but has an impact on the design and user experience we create.

Here are some additional resources on low vision accessibility and simulation:

• Accessibility requirements for people with low vision (W3C)
• Improve page accessibility by simulating vision defects

Get performance timing

Performance panels in DevTools sometimes look like a messy mix of shapes and colors.

The update to this is great because it does a better job of presenting meaningful performance metrics.

What we want to look at is the extra timing rectangle shown in Timing in Performance panel record. This highlights:

• DOMContentLoaded: Event fired when initial HTML loading
• First draw: When the browser first draws pixels onto the screen
• First content drawing: The browser draws the point of content from the DOM, which indicates to the user that the content is loading
• onload: When the page and all its resources are loaded
• Maximum content drawing: the largest image or text element rendered in the viewport

Additionally, if you find the largest content drawing event in the performance panel record, you can click it for additional information.

While there is a lot of valuable information here, "relevant nodes" may be the most useful project because it specifies which element causes the LCP event.

To try this feature:

1. Open DevTools and navigate to the Performance Panel
2. Click "Start Analysis and Reload Page"
3. Observe the timing indicators in the timing part of the record
4. Click on each metric to view the additional information you have obtained

Monitor performance

If you want to get started with DevTools quickly and you've tried Lighthouse, then I recommend the Performance Monitor feature. It's kind of like having WebPageTest.org at your fingertips, such as CPU usage.

Here is how to access it:

1. Open DevTools
2. Open the command menu (Cmd Shift P on Mac and Ctrl Shift P on Windows)
3. Select "Show Performance Monitor" from the command menu
4. Interact with the website and browse
5. Observation results

Performance monitors can give you interesting metrics, but, unlike Lighthouse, it requires you to figure out how to interpret them yourself and take action. No advice was provided. You need to study the CPU usage chart yourself and ask 90% if it is acceptable (may not).

The Performance Monitor has an interactive legend where you can turn metrics on and off, for example:

• CPU Usage
• JS heap size
• DOM Node
• JS event listener
• document
• Document Framework
• Layout/second
• Style recalculation/second

CSS Overview and Local Overview

CSS-Tricks has introduced these features, so check it out!

• CSS Overview: A convenient DevTools panel that provides a lot of interesting statistics about the CSS used by the page
• Local Overlay: A powerful feature that allows you to overwrite production websites with local resources so that you can easily preview changes

So, what about DevTools in other browsers?

I'm sure you've noticed that I'm using Chrome throughout the article. This is my personal browser. That is, it is worth considering:

• Firefox DevTools looks great right now
• As Microsoft Edge expands from Chromium, it will also benefit from these DevTools features
• As evidenced by the Safari Technology Preview Release Notes (search the Web Inspector on this page), Safari DevTools has made great strides

In other words, please pay attention, because this is a rapidly growing area!

in conclusion

We covered a lot in a very short time!

• Lighthouse: A panel that provides performance, accessibility, SEO and best practice tips and suggestions.
• Check Elements: Enhancement to Check Elements feature, which provides accessibility information for Check Elements tooltips
• Simulated Vision Deficits: A feature in the Rendering Panel for viewing pages from a low-vision perspective.
• Performance panel timing: Other metrics in the performance panel record, displaying user-oriented statistics such as maximum content drawing
• Performance Monitor – Real-time visualization of current website performance metrics such as CPU usage and DOM size

If you want to know the latest updates and get over 200 web development tips, check out my mailing list Dev Tips! I also have an advanced video course on ModernDevTools.com. And, I tend to post a lot of extra web development resources on Twitter.

The above is the detailed content of A Look at What's New in Chrome DevTools in 2020. For more information, please follow other related articles on the PHP Chinese website!