Record and replay user flow with the Recorder panel | DevTools Tips

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=rMUayh1QPYs


Duration: 2:46
103,256 views
1,274

Learn how to record, replay and audit user flows with the Recorder panel in DevTools.

Chapters:
0:00 - Intro
0:17 - Start a new recording
0:34 - Record a user flow
0:59 - Replay the user flow
1:09 - Edit a step
1:47 - Export to Puppeteer script
2:01 - Measure performance of the user flow

Links:
Customize user flows beyond DevTools → https://goo.gle/3VIFN2I
DevTools Recorder → https://goo.gle/devtools-recorder

Questions? Tweet to us:
Jecelyn Yeen → https://twitter.com/jecfish
Chrome DevTools → https://twitter.com/chromedevtools

Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#DevToolsTips #Chrome #Developer



Other Videos By Chrome for Developers


2022-02-10CSS Flexbox debugging tools | DevTools Tips
2022-02-09Thinking on ways to solve SVG FAVICON
2022-02-01New in Chrome 98: Per-element opt-out for auto-dark, COLRv1, and more!
2022-01-27Chrome 98 - What’s New in DevTools
2022-01-19Thinking on ways to solve a DARK/LIGHT THEME SWITCH
2022-01-13Discover and fix low contrast text with DevTools | DevTools Tips
2022-01-12Workbox TypeScript - Unpacking the Workbox
2022-01-04New in Chrome 97: Web Transport, Script type Detection, and more!
2022-01-04Cross-fading DOM elements | HTTP 203
2022-01-03Chrome 97 - What’s New in DevTools
2021-12-30Record and replay user flow with the Recorder panel | DevTools Tips
2021-12-27Generating your color palette in CSS | HTTP 203
2021-12-21Responsive images & art direction - Designing in the Browser
2021-12-16Authoring colors with DevTools | DevTools Tips
2021-12-15Choosing the right caching strategy - Unpacking the Workbox
2021-12-14The Zombie DOM - old DOM stuff that still haunts us today | HTTP 203
2021-12-14Dark mode - Designing in the Browser
2021-12-10Adapting caching to your needs - Unpacking the Workbox
2021-12-08Thinking on ways to solve TOASTS
2021-12-07Macro & micro layouts - Designing in the Browser
2021-12-03Offline fallback page - Unpacking the Workbox


Tags:
purpose: Educate
pr_pr: Chrome
type: DevByte (deck cleanup 0-10min)
GDS: Yes
shortcuts
settings
css
css overview
Chrome Devtools
intro to devtools tips
what are devtools tips
how to use devtools tips
devtools tips tutorial
devtools
chrome
developer
developers
google developer
google developers
google chrome developers
chrome developer
chrome developers
google chrome
Jecelyn Yeen