What New Chrome DevTools Features Arrived in the Last Six Months?

Preface

Chrome DevTools is an essential toolbox for front‑end engineers. Over the past six months, six Chrome releases introduced numerous DevTools updates. Below is a concise translation of the most noteworthy new capabilities.

DevTools (Chrome 74) New Features

Highlight Nodes Affected by CSS Properties

Hovering over a CSS property such as padding or margin highlights every DOM node whose box model is impacted by that declaration.

Audits Panel – Lighthouse v4

The new “Tap targets are not sized appropriately” check evaluates whether interactive elements on mobile devices have sufficient size and spacing.

It also introduces a new badge scoring system for PWA categories.

WebSocket Binary Message Viewer

Steps to view binary WebSocket messages:

Open the Network panel.

Filter for WebSocket resources (click WS ).

Select a WebSocket connection and click its Name column.

Open the Messages tab.

Choose a binary message to inspect.

Use the dropdown at the bottom to decode the payload as Base64 or UTF‑8, and click Copy to clipboard to copy the binary data.

Area Screenshot from Command Menu

Open DevTools and press Ctrl+Shift+P (or ⌘+Shift+P on macOS) to open the Command Menu, type area, select Capture area screenshots , and press Enter. Drag the mouse to define the region to capture.

Network Panel – Service Worker Filters

Enter is:service-worker-initiated or is:service-worker-intercepted in the Network filter box to view requests started by a Service Worker or those that were intercepted.

Performance Recordings – Long Task Markers

The Performance panel now marks long tasks. See the Performance panel for examples and the “Do less main thread work” guide.

Performance Timings – First Paint Marker

The Timings view now highlights the First Paint event.

DevTools (Chrome 75) New Features

CSS Function Auto‑Completion with Meaningful Presets

When editing properties like filter, DevTools now suggests realistic function values (e.g., filter: blur(1px)) and previews the visual effect directly in the UI.

Clear Site Data from Command Menu

Open the Command Menu ( Ctrl+Shift+P / ⌘+Shift+P) and run Clear Site Data to wipe Service Workers, localStorage, sessionStorage, IndexedDB, Web SQL, cookies, Cache, etc. The same options also exist under Application → Clear Storage .

View All IndexedDB Databases

Starting with Chrome 75, the Application → IndexedDB panel lists databases from all origins, not just the current one, even when they are used inside an <iframe>.

Hover to See Uncompressed Resource Size

Hover over the Size column in the Network panel to view the original (uncompressed) size of a resource.

Inline Breakpoints

When a line contains multiple statements (e.g.,

document.querySelector('#dante').addEventListener('click', logWarning);

), DevTools now creates a separate breakpoint entry for each statement in the Breakpoints panel.

document.querySelector('#dante').addEventListener('click', logWarning);

DevTools (Chrome 76) New Features

CSS Property Name Auto‑Completion from Values

Typing a CSS value (e.g., bold) automatically suggests the corresponding property ( font-weight: bold).

Total Memory Real‑Time Usage

The Memory panel now displays the total memory consumption of the page (e.g., 43.4 MB) and the per‑second increase (e.g., 209 KB/s).

Service Workers Show Port Numbers

The Service Workers panel title now includes the worker’s port number for easier identification.

Background Fetch & Background Sync Events

In the Application → Background Services section, you can record and view Background Fetch and Background Sync events, which persist for up to three days even after the page or Chrome is closed.

DevTools (Chrome 77) New Features

Copy Element Styles

Right‑click a DOM node and copy its computed CSS to the clipboard.

Layout Shift Visualization

Enable Show Rendering → Layout Shift Regions from the Command Menu to highlight layout‑shifted areas in blue during interaction.

Open Command Menu.

Type Rendering.

Select Show Rendering .

Check Layout Shift Regions .

Lighthouse 5.1 in Audits Panel

New checks include Apple touch‑icon availability, request count & size breakdown, and First Input Delay (replacing Estimated Input Latency).

Check for apple-touch-icon support.

Report total request numbers and sizes per category.

Measure First Input Delay to gauge time from user interaction to browser response.

System Theme Synchronization

When the operating system switches to a dark theme, DevTools automatically follows suit.

Breakpoint Editor Shortcut

Press Ctrl+Alt+B (or ⌘+Option+B on macOS) while focused on the Sources panel to open the Breakpoint Editor, where you can create log or conditional breakpoints.

Network Panel – Prefetch Cache Indicator

Resources loaded from the prefetch cache display “prefetch cache” in the Size column, e.g., prefetch2.html and prefetch2.css.

Viewing Private Object Properties

The console now shows private class fields (e.g., #color) in the newer Chrome version.

Application Panel – Push Messages & Notifications

The Background Services section now lists Push Messages and Notifications generated by Service Workers, persisting for three days even after the page or Chrome is closed.

DevTools (Chrome 78) New Features

Audits Panel Supports Multiple Clients

The Audits panel can now be combined with Request Blocking and Local Overrides. For example, disabling render‑blocking scripts via Request Blocking can raise the performance score from 70 to 97.

Payment Handler Debugging

Under Application → Background Services, a new Payment Handler window lets you record payment events for up to three days, even when DevTools is closed. Enable “Show events from other domains” to capture cross‑origin events.

Audits Panel – Lighthouse 5.2

Lighthouse 5.2 adds a “Third‑Party Usage” audit that reports how many third‑party scripts are loaded and how much main‑thread time they block.

Performance Panel – Largest Contentful Paint

The Timings view now marks Largest Contentful Paint (LCP). Clicking the LCP marker highlights the associated DOM node in the Summary tab, and you can locate it in the DOM tree.

Further References

For more details, see the official “What’s New in DevTools” pages for Chrome 74‑78.