DevTools: State of the Union 2022

preview_player
Показать описание
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:

Speaker: Jecelyn Yeen

Watch more:

#GoogleIO
  1. Chrome for Developers
  2. DevTools
  3. web developers
  4. web development
  5. site performance insights
  6. user flow automation
Рекомендации по теме
DevTools: State of 0:25:26

DevTools: State of the Union 2022

DevTools: State of 0:41:41

DevTools: State of the Union 2017 (Google I/O '17)

State of the 0:21:01

State of the Union for Speed Tooling (Chrome Dev Summit 2018)

Chrome DevTools: State 0:31:08

Chrome DevTools: State of the Union - jQuery UK 2015

Chrome DevTools: State 0:58:37

Chrome DevTools: State of the union - FullStack 2015 Keynote

Chrome DevTools: State 0:51:25

Chrome DevTools: State Of The Union 2023, Addy Osmani — SmashingConf SF 2023

Devtools 2017: Beginner 0:03:30

Devtools 2017: Beginner to Expert w/ Chrome Developer Tools (Coupon Code)

Debugging Promises with 0:07:13

Debugging Promises with DevTools, Totally Tooling Tips (S1, Ep2)

WWDC24: Platforms State 1:06:31

WWDC24: Platforms State of the Union | Apple

DevTools in 2015: 0:28:30

DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)

A look at 0:37:43

A look at 2018's Chrome DevTools | Paul Irish | 2018 FEDC

14 Must Know 0:10:36

14 Must Know Chrome Dev Tools Tricks - #JavaScript30 9/30

Chrome Apps: State 0:11:04

Chrome Apps: State of the Union 2014

Chrome DevTools Tutorial 0:03:08

Chrome DevTools Tutorial 11: Performance / Timeline, Memory, Security

Extending Chrome DevTools 0:23:35

Extending Chrome DevTools for fun and profit...

The web: state 0:37:32

The web: state of the union (Google I/O '18)

Polymer - State 0:28:18

Polymer - State of the Union (Chrome Dev Summit 2015)

Google Chrome Developer 0:51:20

Google Chrome Developer Tools Crash Course

Chrome DevTools Debugger 0:00:51

Chrome DevTools Debugger

Chrome 103 - 0:06:32

Chrome 103 - What’s New in DevTools

Chrome Dev Tools 0:13:55

Chrome Dev Tools Tutorial

Chrome DevTools Masterclass 0:48:07

Chrome DevTools Masterclass | Pixel Camps 2016

Utilizing Web Component 0:24:13

Utilizing Web Component DevTools

Real-time performance audit 1:01:44

Real-time performance audit with Chrome DevTools

Комментарии
Автор

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.

ecereto
Автор

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.

aram
Автор

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

ociemitchell
Автор

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?

MuratKeremOzcan
Автор

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

eg
Автор

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

StanleySeow