• What’s New In DevTools (Chrome 78)

  • Developers.google.com/web/updates…

  • New feature 1: Audits panels also start to support bringing up other small panels for easy debugging

    • Before Chrome 78, we couldn’t access small panels like Request Blocking and Local Overrides in Audits. Now with this new feature, we can do more measurements and diagnostics for our web applications.

    • For example, suppose you create a Audits report on a web page that shows a performance score of 70 and tells you that the biggest performance optimization is to eliminate blocking resources. The diagram below:

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170b5b448ff~tplv-t2oaga2asx-image.image )
      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170bcde7b59~tplv-t2oaga2asx-image.image )

    • Now, with this new feature, you can quickly derive the improved performance by pulling out the Request Blocking panel, Blocking the resources that have performance problems, and then executing another audit. The diagram below:

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170b7d6b91a~tplv-t2oaga2asx-image.image )

    • In addition to this example, there are many application scenarios, such as adding async attribute to script tag through Local Overrides panel for performance comparison, readers can try by themselves.

    • Related links:

      • Block the requests for the render-blocking scripts web. Dev /render-bloc…
      • This section of the Demo should be devtools. Glitch. Me/wndt78 / mult…
      • Request Blocking (Request Blocking the use of the panel) developers.google.com/web/updates…
      • The use of Local Overrides (Local Overrides panel) developers.google.com/web/updates…

  • New feature 2: Supports debugging of the Payment Handler

    • The Background Services TAB in the Application pane now records the Payment Handler event as shown below:

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170bd370989~tplv-t2oaga2asx-image.image )

    • Note:

      • 1. Clicking the Record button (red circular button) will record Payment Handler events that occurred within 3 days — even if you turned off the developer tools.

      • 2. If the Payment Handler event occurred in another Origin, check the Show events from others Domains option.

      • The effect after recording is shown as follows:

        ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170bbd9793d~tplv-t2oaga2asx-image.image )

  • New feature 3: The Audits panels that use Lighthouse have been updated to version 5.2

    • The Audits panels actually run Lighthouse tools, and in Lighthouse 5.2, they add the third-party Usage diagnostics, which give you how much third-party code your web apps request and how much mainline time they take during page loading. The diagram below:

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170c7c4ada7~tplv-t2oaga2asx-image.image )

    • Note:

      • 1. Lighthouse 5.2 is already available in Chrome 77, but it wasn’t mentioned in the Update log for Chrome 77.

    • A link to the

      • Optimize your third-party resources web.dev/fast#optimi…

  • Largest Contentful Paint has been added to the Timeline of the Performance panel

    • The diagram below:

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170f508fa9b~tplv-t2oaga2asx-image.image )

    • Larget Contentful Paint (LCP) is a very important metric for performance analysis. It is defined as the start time and duration of the maximum content element drawing in the visual Viewport

    • Click the LCP icon on the timeline and hover the cursor over the Related Node in the Summary TAB below to see which content elements are the largest. If you click on the Element again, you can also navigate directly to the DOM tree in the Element panel.

    • A link to the

      • Analyzing the load performance in the performance panel (how to make a performance debugging) through the performance panel developers.google.com/web/tools/c…
      • Largest Contentful Paint (内 容 提 示) web.dev/ Largest…

  • New feature 5: Support for feedback on developer tools issues directly from the developer tools main menu

    • Feedback path: Main Menu > Help > Report a DevTools issue. The diagram below:

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170f58ae591~tplv-t2oaga2asx-image.image )

      Feedback on problems with any developer tools, suggestions, and requests for new features.

  • Associated documentation

    • Chrome 76 Developer Tools new features mubu.com/doc/7FnUFrg…
    • New Chrome 76 features to be updated….
    • Chrome update log directory mubu.com/doc/AObcWUR…