A presentation at Øredev Developer Conference in in Malmö, Sweden by Yonatan Mevorach
DEVTOOLS & HEADLESS CHROME: THE AUTOMATION POWER-COUPLE
Yonatan Mevorach @cowchimp
”I can’t automate this” -- no one ever (after watching this talk)
Web Automation youtu.be/fsF7enQY8uI
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": { "time": { "time": // ... "09:00", "10:30", "10:30", "10:30", "10:30", "10:30", "10:30", "10:30", "11:30", "11:30", "11:30", "11:30", "11:30", "11:30", "11:30", "12:50", "12:50", "12:50", "12:50", "12:50", "12:50", "12:50", "13:50", "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "title": "Hacking the World with Digital Biology" }, "Building Mixed Reality Apps" }, "12-Factor, Cloud Native Enterprise Java Applications" }, "Building Evolutionary Architectures" }, "What's New in CSS?" }, "Building Performant Backends with Elixir" }, "ASP.NET Core in Production: Lessons Learned" }, "Stop Building Useless Software" }, "GDPR Compliance for Your Datastore" }, "Having Your Cake and Eating It Too — GraphQL in Reason" }, "The New Paradigm For Leading Teams in the Digital Age" }, "Dissecting the stdlib" }, "Reality is Becoming Virtual" }, "Functional Patterns for the Object Oriented" }, "Designing Distributed Systems with TLA+" }, "TDD on Android: Why and how?" }, "Practice Safe Networking" }, "Crafting Faster in the Dark" }, "Behind the Scenes at Gapminder: A Story about Data and Visualizations" }, "The Future of QA in the Age of AI" }, "Blazor, a New .NET Single Page Application Framework" }, "How to Be a High Performing Distributed Agile Team" }, "Java with a Clojure Mindset" },
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
Accessibility Cache storage Animation Console CSS Device orientation DOM Emulation Heap profiler Inspector Page Application cache IO Profiler Service worker Database DOM debugger Debugger DOM storage IndexedDB Layer tree Rendering Input Memory Runtime Tracing Network Security Worker 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 http://oredev.org
chrome --headless --remote-debugging-port=9222 http://oredev.org
chrome --headless --remote-debugging-port=9222 http://oredev.org
chrome --headless --remote-debugging-port=9222 http://oredev.org
chrome --headless --remote-debugging-port=9222 http://oredev.org
DevTools Protocol Selenium Puppeteer
pixabay.com/photo-175605
pixabay.com/photo-175605
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.