Note: Check what version of Chrome you're running at chrome://version. If you're running
an earlier version, these features won't exist. If you're running a later version, these features
may have changed. Chrome auto-updates to a new major version about every 6 weeks.

Search across all network headers and responses

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

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

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

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

Search pane UI updates

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.

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, Chrome OS) 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.

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.

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 was selected.

User Timing in the Performance tabs

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.

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.

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.

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

Consider Canary

If you're on Mac or Windows, please consider using Chrome Canary as your default
development browser. If you report a bug or a change that you don't like while it's still in
Canary, the DevTools team can address your feedback significantly faster.

Note: Canary is the bleeding-edge version of Chrome. It's released as soon as its built, without
testing. This means that Canary breaks from time-to-time, about once-a-month, and it's usually
fixed within a day. You can go back to using Chrome Stable while Canary is broken.

Discover other DevTools features

Below is a list of everything that's been covered in the What's New In DevTools series.