DevTools & Headless Chrome - Reversim Summit 2017

DevTools and Headless Chrome - The Automation Power-Couple

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 iOS, and we'll use Chrome in Headless Mode to do things like take screenshots, and to scrape sites for data.

Then we'll explore how by combining the two you can make DevTools work for you around-the-clock. We'll cover how to run tests, and set up automatic alerts to catch bugs in your code. We'll also find out how to avoid performance degradation by monitoring everything about your app (amount of unused CSS, memory footprint, etc.)

Transcript

1. DEVTOOLS & HEADLESS CHROME: THE AUTOMATION POWER-COUPLE
2. @cowchimp {{company}} Yonatan Mevorach
4. ”I can’t automate this” -- no one ever (after watching this talk)
5. Web Automation youtu.be/fsF7enQY8uI
6. flic.kr/p/qnSPdN cbnd Headless Browsers
7. Chrome
8. Chrome headless
21. shlomi-noach has 208 followers!
24. headless Chrome
25. Firefox headless
26. Chrome DevTools
30. Chrome DevTools protocol
31. Headless API Embedding app Chrome DevTools Frontend Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ WebSockets
32. Headless API Embedding app Chrome DevTools Frontend { id: 1, method: "Runtime.evaluate", params: { expression: "1 + 1" } } Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ
33. Headless API Embedding app Chrome DevTools Frontend { id: 1, result: { result: { type: "number", value: 2, description: "2" }, wasThrown: false } } { id: 1, method: "Runtime.evaluate", params: { expression: "1 + 1" } } Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ
35. Accessibility Console Device orientation Emulation Animation CSS DOM Heap profiler Application cache Database DOM debugger IndexedDB Cache storage Debugger DOM storage Input Inspector IO Layer tree Memory Network Page Profiler Rendering Runtime Security Service worker Tracing Worker Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ
36. Headless API Embedding app DevTools target DevTools client Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ
37. node --inspect index.js
41. headless protocol
42. chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com
43. chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com
44. chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com
45. chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com
46. chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com
47. chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com
49. Puppeteer Selenium DevTools Protocol
53. pixabay.com/photo-175605 o
54. pixabay.com/photo-175605 o
68. goo.gl/j41BaC q Recap!
69. blog.cowchimp.com @cowchimp tinyurl.com/ headless-talk