DevTools and Headless Chrome - The Automation Power Couple

on YouTube ↗32m

" summary

Chrome runs headless (Chrome 59) and a small Node library controls it; use Puppeteer npm to launch Chrome, navigate, type credentials and scrape Meetup, take screenshots, or run tests inside Docker. The demo sends raw DevTools Protocol commands (CSS.startRuleUsageTracking / CSS.stopRuleUsageTracking) to compute unused CSS and flips from 54% -> 14% unused CSS after interacting with the UI. Output is a percentage that can trigger email/Slack alerts; it works. Headless Chrome (Chrome 59)

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 2:26Web automation overview
3. 5:50Introducing Headless Chrome
4. 6:57Puppeteer demo
5. 12:50DevTools architecture
6. 14:43DevTools protocol commands
7. 17:48Running Headless Chrome
8. 20:01Lighthouse and auditing
9. 22:16Advanced protocol automation
10. 30:50Summary and resources

" related talks

• 19mDevTools and Headless Chrome - The Automation Power-CoupleYonatan Mevorach · Render Conference 2018
• 25mDevTools and Headless Chrome–The Automation Power-CoupleYonatan Mevorach · FrontCon 2018
• 30mPowerful Automation with the Chrome DevTools ProtocolTrent Willis · Nordic.js 2018
• 31mThe Chrome DevTools Protocol!Bradley Farias · WFH Conf 2020
• 28mRethinking Browser Automation: Unleashing the Power of Puppeteer and PlaywrightÖnder Ceylan · JSWorld Conference 2024
• 01h 15mPuppeteer can automate that!Önder Ceylan · HolyJS Piter 2020
• 20mGoing steady with the Chrome Dev ToolsPaul Irish · JSConf US 2011
• 29mNext level of Front end testing with Devtools and WebDriverSrinivasan Sekar, Fathima Harris · SeleniumConf London 2019