Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DevTools & Headless Chrome - Render Conf 2018

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

cowchimp

March 23, 2018
Tweet

More Decks by cowchimp

Other Decks in Programming

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