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

DevTools & Headless Chrome - GDG Devfest Lviv 2017

940e4866e4f95fbabbe5334d0a4a0de1?s=47 cowchimp
October 13, 2017

DevTools & Headless Chrome - GDG Devfest Lviv 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.)

940e4866e4f95fbabbe5334d0a4a0de1?s=128

cowchimp

October 13, 2017
Tweet

Transcript

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

  2. @cowchimp {{company}} Yonatan Mevorach

  3. None
  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

  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. headless Chrome

  30. Firefox headless

  31. Chrome DevTools

  32. None
  33. None
  34. None
  35. Chrome DevTools protocol

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

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

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

  43. None
  44. None
  45. None
  46. headless protocol

  47. chrome --headless --disable-gpu --remote-debugging-port=9222 https://devfest.gdg.org.ua

  48. chrome --headless --disable-gpu --remote-debugging-port=9222 https://devfest.gdg.org.ua

  49. chrome --headless --disable-gpu --remote-debugging-port=9222 https://devfest.gdg.org.ua

  50. chrome --headless --disable-gpu --remote-debugging-port=9222 https://devfest.gdg.org.ua

  51. chrome --headless --disable-gpu --remote-debugging-port=9222 https://devfest.gdg.org.ua

  52. chrome --headless --disable-gpu --remote-debugging-port=9222 https://devfest.gdg.org.ua

  53. None
  54. Puppeteer Selenium DevTools Protocol

  55. None
  56. None
  57. None
  58. pixabay.com/photo-175605 o

  59. pixabay.com/photo-175605 o

  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. goo.gl/j41BaC q Recap!

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