What's New In DevTools (Chrome 67)

New features and major changes coming to DevTools in Chrome 67 include:

Video version of the release notes:

Open the Network panel then press Command+F (Mac) or Control+F (Windows, Linux, ChromeOS) to open the new Network Search pane. DevTools searches the headers and bodies of all network requests for the query that you provide.

Searching for the text 'cache-control' with the new Network Search pane.

Figure 1. Searching for the text cache-control with the new Network Search pane

Click Match Case Match Case to make your query case-sensitive. Click Use Regular Expression Use Regular Expression to show any results that match the pattern you provide. You don't need to wrap your RegEx in forward slashes.

A regular expression query in the Network Search pane.

Figure 2. A regular expression query in the Network Search pane.

The UI of the Global Search pane now matches the UI of the new Network Search pane. It now also pretty-prints results to aid scannability.

The old and new UI.

Figure 3. The old UI on the left, and the new UI on the right

Press Command+Option+F (Mac) or Control+Shift+F (Windows, Linux, ChromeOS) to open Global Search. You can also open it via the Command Menu.

CSS variable value previews in the Styles pane

When the value of a CSS color property, such as background-color or color, is set to a CSS variable, DevTools now shows a preview of that color.

An example of CSS variable color values.

Figure 4. In the old UI on the left, there is no color preview next to color: var(--main-color), whereas in the new UI on the right, there is

Copy as fetch

Right-click a network request then select Copy > Copy As Fetch to copy the fetch()-equivalent code for that request to your clipboard.

Copying the fetch()-equivalent code for a request.

Figure 5. Copying the fetch()-equivalent code for a request

DevTools produces code like the following:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Audits panel updates

New audits

The Audits panel has 2 new audits, including:

  • Preload key requests. Preloading requests can speed up page load time by giving hints to the browser to download resources that are important for your Critical Rendering Path as soon as possible.
  • Avoid invisible text while webfonts are loading. Ensuring that text is visible while webfonts load makes the page more useful to users faster.

New configuration options

You can now configure the Audits panel to:

  • Preserve desktop viewport and user agent settings. In other words, you can prevent the Audits panel from simulating a mobile device.
  • Disable network and CPU throttling.
  • Preserve storage, such as LocalStorage and IndexedDB, across audits.

New audit configuration options.

Figure 6. New audit configuration options

View traces

After auditing a page, click View Trace to view the load performance data that your audit is based off of in the Performance panel.

The View Trace button.

Figure 7. The View Trace button

Stop infinite loops

If you work with for loops, do...while loops, or recursion a lot, you've probably executed an infinite loop by mistake while developing your site. To stop the infinite loop, you can now:

  1. Open the Sources panel.
  2. Click Pause Pause. The button changes to Resume Script Execution Resume.
  3. Hold Resume Script Execution Resume then select Stop Current JavaScript Call Stop.

In the video above, the clock is being updated via a setInterval() timer. Clicking Start Infinite Loop runs a do...while loop that never stops. The interval resumes because it wasn't running when Stop Current JavaScript Call Stop was selected.

User Timing in the Performance tabs

When viewing a Performance recording, click the User Timing section to view User Timing measures in the Summary, Bottom-Up, Call Tree and Event Log tabs.

Viewing User Timing measures in the Bottom-Up tab.

Figure 8. Viewing User Timing measures in the Bottom-Up tab. The blue bar to the left of the User Timing section indicates that it is selected.

In general, you can now select any of the sections (Main Thread, User Timing, GPU, ScriptStreamer, and so on) and view that section's activity in the tabs.

Select JavaScript VM instances in the Memory panel

The Memory panel now clearly lists out all JavaScript VM instances associated with a page, rather than hiding them behind the Target dropdown menu as before.

Before and after screenshots of the Memory panel.

Figure 9. In the old UI on the left, the JavaScript VM instances are hidden behind the Target dropdown menu, whereas in the new UI on the right they are shown in the Select JavaScript VM Instance table

Next to the developers.google.com instance there are 2 values: 8.7 MB and 13.3 MB. The left value represents memory allocated because of JavaScript. The right value represents all OS memory that is being allocated because of that VM instance. The right value is inclusive of the left value. In Chrome's Task Manager, the left value corresponds to JavaScript Memory and the right value corresponds to Memory Footprint.

Network tab renamed to Page tab

On the Sources panel, the Network tab is now called the Page tab.

Two DevTools windows side-by-side, demonstrating the name change.

Figure 10. In the old UI on the left, the tab showing the page's resources is called Network, whereas in the new UI on the right it's called Page

Dark theme updates

Chrome 67 ships with a number of minor changes to the dark theme color scheme. For example, the breakpoint icons and the current line of execution are now green.

A screenshot of the new breakpoint icon and current line of execution color scheme.

Figure 11. A screenshot of the new breakpoint icon and current line of execution color scheme

Certificate transparency in the Security panel

The Security panel now reports certificate transparency information.

Certificate transparency information in the Security panel.

Figure 12. Certification transparency information in the Security panel

Site Isolation in the Performance panel

If you've got Site Isolation enabled, the Performance panel now provides a flame chart for each process so that you can see the total work that each process is causing.

Per-process flame charts in a Performance recording.

Figure 13. Per-process flame charts in a Performance recording

Download the preview channels

Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Submit a suggestion or feedback to us via crbug.com.
  • Report a DevTools issue using the More options   More   > Help > Report a DevTools issues in DevTools.
  • Tweet at @ChromeDevTools.
  • Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.

What's New in DevTools

A list of everything that has been covered in the What's New In DevTools series.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59