A presentation at FrontCon in in Riga, Latvia by Yonatan Mevorach
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
09:00", "title": "Registration, Breakfast, and Booths Open" }, 09:30", "title": "Opening of the Conference" }, 10:00", "title": "DevTools and Headless Chrome – The Automation Power-Couple" }, 10:35", "title": "Web performance in large-scale applications" }, 11:10", "title": "Backends for frontends with GraphQL" }, 11:45", "title": "Break" }, 12:15", "title": "JavaScript security: a retrospective" }, 12:50", "title": "Moving Web applications into Virtual Reality" }, 13:50", "title": "Lunch" }, 14:20", "title": "OpenSpace opening" }, 14:55", "title": "Channel your inner rockstar with the web audio API." }, 15:25", "title": "Break" }, 16:00", "title": "Challenge Accepted: Scoping Errors in “Multi-App” Environment" }, 16:40", "title": "Getting rid of runtime errors with Elm" }, 17:00", "title": "Close Day" }, ...", "title": "Dinner and Party" }
headless Chrome
headless Firefox
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://frontcon.lv
chrome --headless --remote-debugging-port=9222 https://frontcon.lv
chrome --headless --remote-debugging-port=9222 https://frontcon.lv
chrome --headless --remote-debugging-port=9222 https://frontcon.lv
chrome --headless --remote-debugging-port=9222 https://frontcon.lv
Recap! goo.gl/j41BaC
tinyurl.com/ headless-talk @cowchimp blog.cowchimp.com
In this talk we'll see what problems we can fix (or better yet, avoid) by combining two things developers love: Chrome DevTools and automating repetitive tasks. To do this we'll use a new capability introduced in Chrome 59: running Chrome in "Headless Mode". First off we'll show the powers of each of these tools separately. We'll use DevTools to debug other platforms like node.js, and we'll use Chrome in Headless Mode to run tests, take screenshots, and to scrape sites for data. Then we'll explore how by combining the two you can perform any DevTools action from code. Using this approach you can have DevTools work for you around-the-clock and monitor everything about your app (amount of unused CSS\JS, memory footprint, etc.). After attending this talk prepare to never say "Sorry I can't automate this" ever again.
for free. You
can too.