DEVTOOLS & HEADLESS CHROME: THE AUTOMATION POWER-COUPLE

Yonatan Mevorach @cowchimp

Web Automation youtu.be/fsF7enQY8uI

”I can’t automate this” -- no one ever (after watching this talk)

Headless Browsers cbnd flic.kr/p/qnSPdN

Chrome

headless Chrome

[ { { { { { { { { { { { { { { { { { { { { { ] time: time: time: time: time: time: time: time: time: time: time: time: time: time: time: time: time: time: time: time: time: "08:00", "09:00", "09:10", "09:40", "10:10", "10:40", "11:10", "11:30", "11:50", "12:20", "12:40", "13:40", "13:55", "14:10", "14:25", "14:55", "15:25", "15:55", "16:35", "17:15", "17:25", title: title: title: title: title: title: title: title: title: title: title: title: title: title: title: title: title: title: title: title: title: "Registration and breakfast" }, "Welcome" }, "A CSS Carol" }, "Talk details coming soon" }, "Common ways we break accessibility and how to avoid them" }, "Refreshments" }, "DevTools and Headless Chrome - The Automation Power-Couple" }, "Reducing the friction of online payments" }, "How to hack a web app?" }, "Teach Your Bundler The Users' Habits" }, "Lunch" }, "Creating IoT applications with Web Bluetooth" }, "Escaping the Sandbox with Puck.js" }, "Physical interfaces for digital applications" }, "Let's Get Chatty with Conversational Interface in JavaScript" }, "WebAssembly as cross-platform architecture?!" }, "Refreshments" }, "Data Sketches | A year of exotic data visualizations" }, "Serving for the win - Deploys and hosting for the rest of us" }, "Closing remarks" }, "After Party" }

Chrome DevTools

protocol Chrome DevTools

DevTools Embedding Frontendapp WebSockets ChromeAPI Headless Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ

{ id: 1, method: "Runtime.evaluate", params: { expression: "1 + 1" } } DevTools Embedding Frontendapp ChromeAPI Headless Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ

{ id: 1, method: "Runtime.evaluate", params: { expression: "1 + 1" } } DevTools Embedding Frontendapp ChromeAPI Headless { id: 1, result: { result: { type: "number", value: 2, description: "2" }, wasThrown: false } } Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ

DevTools Embedding client app DevTools Headlesstarget API Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ

node --inspect index.js

headless protocol

chrome --headless --remote-debugging-port=9222 https://2018.render-conf.com

chrome --headless --remote-debugging-port=9222 https://2018.render-conf.com

chrome --headless --remote-debugging-port=9222 https://2018.render-conf.com

chrome --headless --remote-debugging-port=9222 https://2018.render-conf.com

chrome --headless --remote-debugging-port=9222 https://2018.render-conf.com

tinyurl.com/ headless-talk @cowchimp blog.cowchimp.com