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

940e4866e4f95fbabbe5334d0a4a0de1?s=128

cowchimp

March 23, 2018
Tweet

Transcript

  1. DEVTOOLS & HEADLESS CHROME: THE AUTOMATION POWER-COUPLE

  2. @cowchimp Yonatan Mevorach

  3. Web Automation youtu.be/fsF7enQY8uI

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

    this talk)
  5. flic.kr/p/qnSPdN cbnd Headless Browsers

  6. Chrome

  7. Chrome headless

  8. None
  9. None
  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" } ]
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. Chrome DevTools

  21. None
  22. None
  23. Chrome DevTools protocol

  24. Headless API Embedding app Chrome DevTools Frontend Adapted from content

    by © Sami Kyöstilä, Google goo.gl/yQi9kZ WebSockets
  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
  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
  27. Headless API Embedding app DevTools target DevTools client Adapted from

    content by © Sami Kyöstilä, Google goo.gl/yQi9kZ
  28. node --inspect index.js

  29. None
  30. None
  31. None
  32. headless protocol

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

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

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

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

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

  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. blog.cowchimp.com @cowchimp tinyurl.com/ headless-talk