Codehints | What's New In DevTools (Chrome 60)

What’s New In DevTools (Chrome 60)

Anish

Aug 10^th, 2017

Developer

Note: You can check what version of Chrome you’re running at chrome://version. Chrome auto-updates to a new major version about every 6 weeks.

Welcome! New features and major changes coming to DevTools in Chrome 60 include:

A new Audits panel, including tests for progressive web apps, performance, accessibility, and best practices.
Third-party badges. Find out which third-parties are making network requests, logging to the Console, and executing JavaScript.
Continue To Here. A new gesture that can speed up your JavaScript debugging workflow.
Predictable debugging for asynchronous JavaScript.
Object previews in the Console.
Real-time updates in the Coverage tab.
A new menu for selecting contexts in the Console.
Simpler network throttling options.
Async stack traces on by default.

What’s New In DevTools (Chrome 60)

Kayce Basques By Kayce Basques Technical Writer at Google Welcome! New features and major changes coming to DevTools in Chrome 60 include: A new Audits panel, including tests for progressive web apps, performance, accessibility, and best practices. Third-party badges. Find out which third-parties are making network requests, logging to the Console, and executing JavaScript. Continue To Here. A new gesture that can speed up your JavaScript debugging workflow. Predictable debugging for asynchronous JavaScript. Object previews in the Console. Real-time updates in the Coverage tab. A new menu for selecting contexts in the Console. Simpler network throttling options. Async stack traces on by default. Note: You can check what version of Chrome you’re running at chrome://version. Chrome auto-updates to a new major version about every 6 weeks. Check out the video version of these release notes below or read on to learn more.

New features

New Audits panel, powered by Lighthouse

The Audits panel is now powered by Lighthouse. Lighthouse provides a comprehensive set of tests for measuring the quality of your web pages.

The scores at the top for Progressive Web App, Performance, Accessibility, and Best Practices are your aggregate scores for each of those categories. The rest of the report is a breakdown of each of the tests that determined your scores. Improve the quality of your web page by fixing the failing tests.

To audit a page:

Click the Audits tab.
Click Perform an audit.
Click Run audit. Lighthouse sets up DevTools to emulate a mobile device, runs a bunch of tests against the page, and then displays the results in the Audits panel.

Lighthouse at Google I/O ’17

Check out the DevTools talk from Google I/O ’17 below to learn more about Lighthouse’s integration in DevTools.

Contribute to Lighthouse

Lighthouse is an open-source project. To learn lots more about how it works and how to contribute to it, check out the Lighthouse talk from Google I/O ’17 below. Got an idea for a Lighthouse audit? Post it here!

Third-party badges

Use third-party badges to get more insight into the entities that are making network requests on a page, logging to the Console, and executing JavaScript.

**Figure 2**. Hovering over a third-party badge in the Network panel

**Figure 3**. Hovering over a third-party badge in the Console

To enable third-party badges:

Open the Command Menu.
Run the Show third party badges command.

Use the Group by product option in the Call Tree and Bottom-Up tabs to group performance recording activity by the third-party entities that caused the activities. See Get Started With Analyzing Runtime Performance to learn how to analyze performance with DevTools.