Pro Yearly is on sale from $80 to $50! »

DevTools & Headless Chrome - Reversim Summit 2017

940e4866e4f95fbabbe5334d0a4a0de1?s=47 cowchimp
October 16, 2017

DevTools & Headless Chrome - Reversim Summit 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 16, 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. shlomi-noach has 208 followers!

  22. None
  23. None
  24. headless Chrome

  25. Firefox headless

  26. Chrome DevTools

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

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

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

  42. chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com

  43. chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com

  44. chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com

  45. chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com

  46. chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com

  47. chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com

  48. None
  49. Puppeteer Selenium DevTools Protocol

  50. None
  51. None
  52. None
  53. pixabay.com/photo-175605 o

  54. pixabay.com/photo-175605 o

  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. goo.gl/j41BaC q Recap!

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