[Yonatan Mevorach] DevTools and Headless Chrome - The Automation Power-Couple

Presentation from GDG DevFest Ukraine 2017 - the biggest community-driven Google tech conference in the CEE.

Learn more at: https://devfest.gdg.org.ua

Transcript

1. DEVTOOLS & HEADLESS CHROME: THE AUTOMATION POWER-COUPLE
2. @cowchimp {{company}} Yonatan Mevorach
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
27. ALex Bessonov Mark Boychuk Serge Tarkovski Aleksandr Shpakovskyi Marta Maksymyak Sofiia Vynnytska Alina Yurenko Max Lo Sofiya Huts Ana Kuzmanovic Michael Bodnar Tomek Nowodziński Andriana Kovalyshyn Myroslav Rys Vasylyna Kuzmyak Andriy Omelyanenko Natasha Savchenko Vasylyna Mytsak Anna Kurylo Nazar Kryzhanivsky Viktor Malieichyk Anton Paisov Oksana Desiatnykova Vitalik Zasadnyy Bohdana Fedchyshyn Oleh Melnyk Volodia Chornenkyy Diana Pinchuk Oleh Zasadnyy Volodya Karpliuk Dmitriy Panyuta Oleksandr Pidlisnyi Volodymyr Berkovskyj Dmytro Suryadov Oleksandr Vilchynskyy Volodymyr Stoiko Helena Shevchenko Oleksiy Sadliak Yevheniy Potupa Herych Oleh Oles Potiatynyk Yurii Ostapchuk Ihor Dvoretskyi Olha Dolyk Yuriy Yunikov Ivan Kutuzov Ostap Andrusiv alexander kozubets Jaroslav Khorishchenko Paul Grynyk Богдан Камінський Julianna Bondarchuk Pavlo Osokin Володимир Кіт Kristina Sika Roman Danylyk Володимир Рогуля Maksym Lynnyk Roman Khrupa Кирило Пісковець Maksym Synyutka Roman Volykh Maria Zgoba Roman Zvarych
30. headless Chrome
31. Firefox headless
32. Chrome DevTools
36. Chrome DevTools protocol
37. Headless API Embedding app Chrome DevTools Frontend Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ WebSockets
38. 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
39. 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
41. 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
42. Headless API Embedding app DevTools target DevTools client Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ
43. node --inspect index.js
47. headless protocol
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. chrome --headless --disable-gpu --remote-debugging-port=9222 https://devfest.gdg.org.ua
55. Puppeteer Selenium DevTools Protocol
59. pixabay.com/photo-175605 o
60. pixabay.com/photo-175605 o
74. goo.gl/j41BaC q Recap!
75. blog.cowchimp.com @cowchimp tinyurl.com/ headless-talk