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

DevTools & Headless Chrome – FrontCon 2018

DevTools & Headless Chrome – FrontCon 2018

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.

940e4866e4f95fbabbe5334d0a4a0de1?s=128

cowchimp

June 14, 2018
Tweet

Transcript

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

  3. @cowchimp Yonatan Mevorach

  4. None
  5. None
  6. Web Automation youtu.be/fsF7enQY8uI

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

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

  9. Chrome

  10. Chrome headless

  11. None
  12. None
  13. [ { "time": "08:00 - 09:00", "title": "Registration, Breakfast, and

    Booths Open" }, { "time": "09:00 - 09:30", "title": "Opening of the Conference" }, { "time": "09:30 - 10:00", "title": "DevTools and Headless Chrome – The Automation Power-Couple" }, { "time": "10:05 - 10:35", "title": "Web performance in large-scale applications" }, { "time": "10:40 - 11:10", "title": "Backends for frontends with GraphQL" }, { "time": "11:10 - 11:45", "title": "Break" }, { "time": "11:45 - 12:15", "title": "JavaScript security: a retrospective" }, { "time": "12:20 - 12:50", "title": "Moving Web applications into Virtual Reality" }, { "time": "12:55 - 13:50", "title": "Lunch" }, { "time": "13:55 - 14:20", "title": "OpenSpace opening" }, { "time": "14:25 - 14:55", "title": "Channel your inner rockstar with the web audio API." }, { "time": "15:00 - 15:25", "title": "Break" }, { "time": "15:30 - 16:00", "title": "Challenge Accepted: Scoping Errors in “Multi-App” Environment" }, { "time": "16:05 - 16:40", "title": "Getting rid of runtime errors with Elm" }, { "time": "16:40 - 17:00", "title": "Close Day" }, { "time": "19:00 - ...", "title": "Dinner and Party" } ]
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. Chrome headless

  26. Firefox headless

  27. Chrome DevTools

  28. None
  29. None
  30. None
  31. Chrome DevTools protocol

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

    by © Sami Kyöstilä, Google goo.gl/yQi9kZ WebSockets
  33. 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
  34. 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. None
  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

  38. None
  39. None
  40. None
  41. None
  42. headless protocol

  43. chrome --headless --remote-debugging-port=9222 https://frontcon.lv

  44. chrome --headless --remote-debugging-port=9222 https://frontcon.lv

  45. chrome --headless --remote-debugging-port=9222 https://frontcon.lv

  46. chrome --headless --remote-debugging-port=9222 https://frontcon.lv

  47. chrome --headless --remote-debugging-port=9222 https://frontcon.lv

  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. goo.gl/j41BaC Recap!

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