DevTools: State of the Union 2022

See a demo tour of new DevTools features that allow web developers to generate site performance insights, automate user flows, debug design issues, and more.
00:00 Introduction
00:38 Design
06:19 Accessibility
08:44 Debugging
12:50 WebAssembly (WASM)
14:16 Performance insights
20:38 Automation - User flow Recorder
23:09 User flows transformation - Puppeteer Replay
Resources:
Identify potential performance improvements with the Performance Insights panel → goo.gle/devtools-performance
Record, replay, and measure user flows → goo.gle/devtools-recorder
Identify potential CSS improvements → goo.gle/css-overview
Grid debugging tools → goo.gle/devtools-grid
Full page accessibility tree → goo.gle/accessibility-tree
Debugging WebAssembly Faster → goo.gle/faster-wasm-debugging
Performance Insights panel → goo.gle/devtools-performance
User flow Recorder → goo.gle/devtools-recorder
Puppeteer Replay → goo.gle/puppeteer-replay
Speaker: Jecelyn Yeen
Watch more:
All Google I/O 2022 Sessions → goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → goo.gle/IO22_Web
All Google I/O 2022 technical sessions → goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO

[@ecereto]

Jecelyn I was skeptical at first, your accent threw me off. But after a while watching your videos I'm truly in awe. You are great at what you do. I regret my own initial biased impression and I humbly apologize. You are a star, please keep this coming, I'm fully hooked now.

[@aram5642]

I got excited to hear the introduction to Performance analysis, with the cockpit image. This is exactly how I feel. Good to know that the ChromeDev team is aware of that problem.

[@ociemitchell]

14:38 This is a great analogy. I sometimes call this the "scary cockpit view" :)

[@daelous88]

Really awesome, thank you.

[@StanleySeow]

Can these features on containers be used in a bootstrap-Vue environment ?

[@pjf7044]

Thnkyou i love responsive css design

[@eg8580]

Great vid! Request: can you make the Chrome recorder create a Playwright spec out of it? Danke!

[@MuratKeremOzcan]

The Chrome recorder, being able to export the JSON for a bug report and create a Cypress spec out of it is next level stuff. Make Cypress the official test tool for Angular already, what are you waiting for?

[@11fleek]

Amazing!

[@persim100]

so exciting ! 😍

[@oleksandrdidych8656]

емейзінг

[@nekitandr2781]

Слава Україні!