hubelbauer.net

Chrome DevTools Updates

This repository contains a script which downloads the list of updates to the Chrome DevTools as documented on developers.google.com as well as a generated snapshot of the content generated by the script that follows below.

It uses dotnet script which you can install by running

dotnet tool install -g dotnet-script

The repository was bootstrapped using dotnet script init and you can run the script using dotnet script main.csx.

The rest of this README is auto-generated. Generated on: 2019-05-13T16:06:37

Chrome 75

Meaningful preset values when autocompleting CSS functions

Clear site data from the Command Menu

View all IndexedDB databases

View a resource’s uncompressed size on hover

Inline breakpoints in the breakpoint pane

IndexedDB and Cache resource counts

Setting for disabling the detailed inspect tooltip

Setting for toggling tab indentation in the Sources panel editor

Feedback

Consider Canary

Discover other DevTools features

Chrome 74

Video version of this page

Highlight all nodes affected by CSS property

This highlights the areas introduce by box-model-affecting CSS properties (like padding, margin) the same way like the DevTools used to, but does it for all elements which are affected by the particular rule.

<style>
p {
	margin: 3em;
}
</style>
<p>first</p>
<p>second</p>
<p>third</p>

When hovering over margin: 3em;, an area will be highlighted around all of the paragraphs, not just the one selected in the Explorer tab in the DevTools.

When using the Computed tab in the property inspector in the DevTools, highlighting over areas there will keep highlighting in the document only for the associated element, not all affected elements, so the behavior there differs now.

Lighthouse v4 in the Audits panel

WebSocket binary message viewer

I demonstrate the use of this feature in another repository of mine, net-core-web-socket-server.

I face a problem where outgoing web socket frames show no data and report an incorrect lengths of zero bytes. Incoming frames show correct data and report correct length.

I asked a Stack Overflow question on the topic as a result.

Capture area screenshot in the Command Menu

Service worker filters in the Network panel

Performance panel updates

Long tasks in Performance recordings

First Paint in the Timings section

New DOM tutorial

Feedback

Consider Canary

Discover other DevTools features

Chrome 73

Video version of these release notes

Logpoints

Detailed tooltips in Inspect Mode

Export code coverage data

AAA contrast ratio line in the Color Picker

Save custom geolocation overrides

Code folding

Messages tab

Feedback

Consider Canary

Discover other DevTools features

Chrome 72

Video version of these release notes

Visualize performance metrics

Highlight text nodes

Copy JS path

Audits panel updates

Feedback

Consider Canary

Discover other DevTools features

Chrome 71

Hover over a Live Expression to highlight a DOM node

Store DOM nodes as global variables

Initiator and priority information now in HAR imports and exports

Access the Command Menu from the Main Menu

Picture-in-Picture breakpoints

(Bonus Tip) Run monitorEvents() in the Console to watch an element’s events fire

Feedback

Consider Canary

Discover other DevTools features

Chrome 70

Live Expressions in the Console

Highlight DOM nodes during Eager Evaluation

Performance panel optimizations

More reliable debugging

Enable network throttling from the Command Menu

Autocomplete Conditional Breakpoints

Break on AudioContext events

Debug Node.js apps with ndb

Bonus tip: Measure real world user interactions with the User Timing API

Feedback

Consider Canary

Discover other DevTools features

Chrome 68

Assistive Console

Faster, more reliable audits, a new UI, and new audits

BigInt support

Add property path to watch

“Show timestamps” moved to settings

Feedback

Consider Canary

Discover other DevTools features

Chrome 67

Search across all network headers and responses

Copy as fetch

Audits panel updates

Stop infinite loops

User Timing in the Performance tabs

Select JavaScript VM instances in the Memory panel

Network tab renamed to Page tab

Dark theme updates

Certificate transparency in the Security panel

Site Isolation in the Performance panel

Feedback

Consider Canary

Discover other DevTools features

Chrome 66

Blackboxing in the Network panel

Pretty-printing in the Preview and Response tabs

Previewing HTML content in the Preview tab

Auto-adjust zooming in Device Mode

Local Overrides now works with some styles defined in HTML

Bonus tip: Blackbox framework scripts to make Event Listener Breakpoints more useful

A request from the DevTools team: consider Canary

Feedback

Discover other DevTools features

Chrome 65

Local Overrides

The Changes tab

New accessibility tools

New audits

Reliable code stepping with workers and asynchronous code

Multiple recordings in the Performance panel

Bonus: Automate DevTools actions with Puppeteer 1.0

A request from the DevTools team: consider Canary

Feedback

Discover other DevTools features

Chrome 63

Multi-client remote debugging support

Workspaces 2.0

Four new audits

Simulate push notifications with custom data

Trigger background sync events with custom tags

Feedback

Discover other DevTools features

Chrome 64

Performance Monitor

Console Sidebar

Group similar Console messages

Local Overrides

Feedback

Discover other DevTools features

Chrome 62

Top-level await operators in the Console

New screenshot workflows

CSS Grid highlighting

A new API for querying heap objects

New Console filters

HAR imports in the Network panel

Previewable cache resources in the Application panel

More responsive cache debugging

Block-level code coverage

Feedback

Discover other DevTools features

Chrome 61

Simulate low-end and mid-tier mobile devices in Device Mode

View storage usage

View when a service worker cached responses

Enable the FPS Meter from the Command Menu

Set mousewheel behavior to zoom or scroll with Performance recordings

Debugging support for ES6 Modules

Feedback

Discover other DevTools features

Chrome 60

New features

Changes

DevTools at Google I/O ‘17

Feedback

Discover other DevTools features

Chrome 59

Highlights

New features

Changes

Discover other DevTools features

Chrome 58

Highlights

New features

Changes