Dev Tips: DevTools: Record and playback your user journeys 🎥

Dev Tips

 

DevTools: Record and playback your user journeys ðŸ“½

 

Introduction

You can use the new Recorder Panel to record user flows (a.k.a. user journeys or user interactions) and play them back. The playback can be useful for:

  • Asserting website functionality (for example, with automated testing).
  • Repeatedly performance profiling a user flow to see if there's any improvement when you change your code.


How to use the Recorder

The Recorder has its own panel:

  1. Open up the Recorder panel from the Command Menu (Cmd + Shift + P).
  2. Select Start new recording and enter a name for your flow, e.g. Sign up or Scroll to bottom.
  3. Perform your desired user flow on the page and select End recording.

Your script is now recorded! You can do the following:

  • Replay the user flow. The playback happens on the page.
  • Performance profile the user flow. It works like this: 1) Profiling begins, 2) The playback runs on the page, 3) The Performance panel immediately opens up with your results.
  • Export the user flow as a Puppeteer script. This way, you can clean it up and use it in your acceptance tests for example.
  • Edit the user flow. Within the DevTools UI, click on a single action in a user flow to edit it. For example, you can edit selectors, change values and more.


Puppeteer script

When you export a user flow as a Puppeteer script, it's likely you'll need to edit it slightly. However it's a great starting point. As an example, the following script was generated automatically, it inputs the Enter key on a page:

const targetPage = page;
await targetPage.keyboard.up("Enter");

This script clicks on a button:

const targetPage = page;
const element = await waitForSelectors([["#button"]], targetPage);
await element.click({ offset: { x: 22.75, y: 16} });

The code may not be production-ready, but it's a good first step.


Availability

This feature is currently in Chrome Canary, tested in version 97.


Further Resource

If you want to learn more about the Performance Panel, check out a video I made: Understanding Paint Performance with Chrome DevTools.

Email Marketing Powered by Mailchimp

Copyright © 2021 Umar, All rights reserved.
You are receiving this email because you signed up for Dev Tips.

unsubscribe from this list    update subscription preferences 

Older messages

Dev Tips: DevTools: Visualise your JavaScript bundles 📊

Friday, October 29, 2021

Dev Tips DevTools: Visualise your JavaScript bundles 📊 Introduction The Lighthouse Treemap shows a visualisation of your JavaScript bundles. It's compatible with sourcemaps and is great for

DevTips: DevTools: Easily change CSS units and values 🔢

Monday, October 18, 2021

Dev Tips DevTools: Easily change CSS units and values 🔢 Hey all, hope you have a great week! Introduction Changing CSS values/units ( 10px / 1rem / 20vh ) can be cumbersome. Canary DevTools has some

Dev Tips: DevTools: Better accessibility inspection with the Source Order Viewer

Friday, July 30, 2021

Dev Tips DevTools: Better accessibility inspection with the Source Order Viewer 🔎 View this online: umaar.com/dev-tips/245-source-order-viewer / tweet Introduction The Source Order Viewer shows you the

DevTips: DevTools: Easily control typography with the CSS Font Editor 🖊

Friday, July 23, 2021

Dev Tips DevTools: Easily control typography with the CSS Font Editor 🖊 Introduction The Font Editor within the Styles Pane helps you to quickly change typography on a web page - using a visual tool

Dev Tips: DevTools: Using the CSS Grid & Flexbox Editor

Friday, July 16, 2021

Dev Tips DevTools: Better Debugging with the CSS Grid & Flexbox Editor ✨ Hey friends. I took a break from emailing for a while, but I'm grateful to have you all here, part of this amazing Dev

You Might Also Like

Charted | Global Economic Confidence in 2025, by Country 🌎

Wednesday, December 25, 2024

While emerging markets in Asia have the strongest confidence in the global economy looking ahead, European countries are most pessimistic. View Online | Subscribe | Download Our App FEATURED STORY

Top Tech Deals 🎅 Sony Headphones, iPhone Cases, 4K Projector, and More!

Wednesday, December 25, 2024

The season of giving is upon us. How-To Geek Logo December 25, 2024 Top Tech Deals: Sony Headphones, iPhone Cases, 4K Projector, and More! The season of giving is upon us. Happy Holidays! If you're

Why the Race to AGI is Humanitys Defining Moment

Wednesday, December 25, 2024

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? 🪐 What's happening in tech today, December 25, 2024? The

Iran's Charming Kitten Deploys BellaCPP: A New C++ Variant of BellaCiao Malware

Wednesday, December 25, 2024

THN Daily Updates Newsletter cover The Data Science Handbook, 2nd Edition ($60.00 Value) FREE for a Limited Time Practical, accessible guide to becoming a data scientist, updated to include the latest

Software Testing Weekly - Issue 251

Wednesday, December 25, 2024

GitHub Copilot is free! 🤖 View on the Web Archives ISSUE 251 December 25th 2024 COMMENT Welcome to the 251st issue! In case you missed it — GitHub Copilot is free! The free version works with Visual

Daily Coding Problem: Problem #1647 [Medium]

Tuesday, December 24, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Square. In front of you is a row of N coins, with values v 1 , v 1 , ..., v n . You are

Sentiment Analysis, Topological Sort, Web Security, and More

Tuesday, December 24, 2024

Exploring Modern Sentiment Analysis Approaches in Python #661 – DECEMBER 24, 2024 VIEW IN BROWSER The PyCoder's Weekly Logo Exploring Modern Sentiment Analysis Approaches in Python What are the

🤫 Do Not Disturb Mode Is My Secret to Sanity — 8 Gadgets I Want To See Nintendo Make

Tuesday, December 24, 2024

Also: The Best Christmas Movies to Watch on Netflix, and More! How-To Geek Logo December 24, 2024 Did You Know Their association with the Christmas season might make you think poinsettias hail from a

😱 AzureEdge.net DNS Retiring Jan. 2025, 🚀 Microsoft Phi-4 AI Outperforms, 🔒 Microsoft Secure Future Initiative

Tuesday, December 24, 2024

Blog | Advertise | View Online Your trusted source for Cloud, AI and DevOps guidance with industry expert Chris Pietschmann! Phi-4: Microsoft's New Small Language Model Outperforms Giants in AI

Mapped | The Top Health Insurance Companies by State 🏥

Tuesday, December 24, 2024

In 13 US states, a single company dominates the health insurance market, holding at least half of the total market share. View Online | Subscribe | Download Our App Presented by: Global X ETFs Power