DevTools & Headless Chrome - Render Conf 2018

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
   

   View Slide

2. @cowchimp
   Yonatan
   Mevorach
   

   View Slide

3. Web Automation
   youtu.be/fsF7enQY8uI
   

   View Slide

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

   View Slide

5. flic.kr/p/qnSPdN
   cbnd
   Headless
   Browsers
   

   View Slide

6. Chrome
   

   View Slide

7. Chrome
   headless
   

   View Slide

8. View Slide

9. View Slide

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

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. Chrome DevTools
    

    View Slide

21. View Slide

22. View Slide

23. Chrome DevTools
    protocol
    

    View Slide

24. Headless API
    Embedding app Chrome
    DevTools
    Frontend
    Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ
    WebSockets
    

    View Slide

25. 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
    

    View Slide

26. 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
    

    View Slide

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

    View Slide

28. node --inspect index.js
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. headless protocol
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

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

    View Slide