What's New In DevTools (Chrome 67)
New features and major changes coming to DevTools in Chrome 67 include:
- Search across all network headers
- CSS variable value previews in the Styles pane
- Copy as fetch
- New audits, desktop configuration options, and viewing traces
- Stop infinite loops
- User Timing in the Performance tabs
- The Network tab in the Sources panel has been renamed to the Page tab
- Dark theme updates
- Certificate transparency information in the Security panel
- Site isolation features in the Performance panel
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
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.
Figure 5. Copying the
fetch()-equivalent code for a request
DevTools produces code like the following:
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.
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.
Figure 7. The View Trace button
Stop infinite loops #
If you work with
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:
- Open the Sources panel.
- Click Pause . The button changes to Resume Script Execution .
In the video above, the clock is being updated via a
setInterval() timer. Clicking Start Infinite Loop runs a
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.
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.
Next to the
developers.google.com instance there are 2 values:
8.7 MB and
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
Certificate transparency in the Security panel #
The Security panel now reports certificate transparency information.
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.
Figure 13. Per-process flame charts in a Performance recording