DevTools and Headless Chrome - The Automation Power-Couple

on YouTube ↗31m

" summary

Combines the DevTools Protocol with Chrome 59 Headless Mode and puppeteer to run real browser actions from code, not just Selenium-style clicks. Implements CSS.startRuleUsageTracking plus stylesheet added events to compute unused CSS, turning an interactive measurement that shows 54% → 14% unused into a CI check that fails above 20%. Includes a runnable Node script that launches headless Chrome, mimics site navigation, reports the percentage, and demonstrates the numbers live.

AI-written summary · about

" chapters (10)

1. 0:00Start
2. 2:58Web Automation
3. 6:25Puppeteer
4. 9:08Querying the Dom
5. 10:38Chrome Dev Tools
6. 15:32Flame Chart
7. 18:55Toggle or Screencast
8. 20:52Lighthouse
9. 24:04The Coverage Panel
10. 29:35Recap

" related talks

• 25mDevTools and Headless Chrome–The Automation Power-CoupleYonatan Mevorach · FrontCon 2018
• 31mThe Chrome DevTools Protocol!Bradley Farias · WFH Conf 2020
• 35mOptimise your Web Development WorkflowUmar Hansa · ffconf 2016
• 25mAutomated Performance Testing With WebDriverChristian Bromann · Node+JS Interactive 2018
• 11mWhat's new in DevToolsJecelyn Yeen · Chrome Dev Summit 2020
• 21mWorking Well, The Future of JavaScript TestingTrent Willis · Assert(js) 2018
• 01h 15mPuppeteer can automate that!Önder Ceylan · HolyJS Piter 2020
• 30mModern Web Testing and Automation with PuppeteerAndrey Lushnikov, Joel Einbinder · Google I/O 2019