Chrome DevTools існує 10 років, його можливості безмежні, та мало хто використовує і 3%.

1. Chrome Dev Tools: Debug me!

2. Whoami
• Team/Tech lead (Infopulse)
• Організатор BeerJS Zhytomyr, PublicIT,
frontendZt
• Суддя DevChallange 2019
• Розробляю щось у фронтенді
• Розповідаю дивні речі на конференціях
• Люблю слухати дивні речі на конференціях

3. Chrome DevTools – 12!
6 вересня 2008
• Firebug
• Webkit Web Inspector
• «Inspect element» епоха
• Мобільна епоха. Створено «devtools-protocol»
• Performance епоха
• NodeJS епоха
• WebAssembly епоха ?

4. Перехід на новий тул

5. Командне меню
Cmd + Shift + P / Ctrl + Shift + P

7. Темна тема – це круто!
Переходь на темну сторону, в нас є печиво

8. Сніпети
Примітивна можливість дебагу

9. Сніпети
Використовуйте для речей, які необхідно виконувати на різних ресурсах

10. Inspect tooltip
Редагування, а також відключення тултіпу можливо

11. Clear site data

12. Зберігання файлів через девтул
Збірка проекту з хот релоад
Використання локальних змін
Локальний проект
Гіт проект (з доступом до коду)
Чужий проект без доступу
Локальні зміни (Local overrides)
Навіщо взагалі фіча?

13. Локальні зміни (Local overrides)

14. Capture screenshot

18. Lighthouse 4.0

19. Прелоад шрифтів за допомогою локальних змін
Lighthouse 4.0

20. Reporting observer
Девтул допомагає відстежувати старі АПІ

21. Page Lifecycle API
Маніпулюй роботою браузера

22. Page Lifecycle API

23. Профілірування
Різниця між інструментуванням і семпліруванням
Інструментування
function kharkivJSStart() {
// learn
// drink
// think
}
Записати час та стеки
Записати час та стеки
Зібрати стек
Зібрати стек
Семплірування
Зібрати стек
Зібрати стек

24. Профілірування
В чому ж різниця
Інструментування СемпліруванняVS
• Нерівномірно спотворює
результат
• Завжди включає всі функції
• Містить детальну
інформацію про стек
виклику
• Важкий в реалізації
• Рівномірно спотворює
результат
• Точність обмежена
частотою семплірування

26. Швидкий аналіз найбільш повільних місць коду
ПС: споживання пам’яті завжди відображається на конверсії і доходах
Performance monitor

27. Coverage
Рахуй кількість невикористаного коду

28. Coverage
Puppeteer + coverage API
Export to JSON

29. Network
Блокування запитів

30. Network
Пошук по будь-якому хеадеру, а також знаходження залежностей

31. Network
Service worker filters

32. Shareable Network
Експортуйте ваші данні для тестування без проблем

33. Rendering
Перевіряй зони і FPS

34. IO’19 step-into & workers
Або тепер я знаю, як вірно працювати з ним

35. Сторінка WorkerDevTools
new Worker('worker.js');
Cповістити токен…
Зупинитись…
Створити новий потік,
Передати в нього токен
Зберегти токен…
Продовжити
Попросити зупинитись,
якщо токен, продовжити
Сповістити про себе
Зупитинись
Розпочати задачу з
токеном, зупинитись
postMessage('pong');
IO’19 step-into & workers
Або тепер я знаю, як вірно працювати з ним

36. IO’19 step-int

37. NDB
Що це?

38. NBD – node debug CDT
Підтримує Node > 8, працює на > 10
• Побудований на Chromium
• Працює як окремий застосунок (в планах додати до CDT)
• Підтримує всі можливості CDT
• Має JS and memory профілювальники
• Розпізнає і додає «дитячі»

39. Browse Remote API

40. Area screenshoot

41. Яку кількість разів Ви закривали браузер
при вічному циклі під час дебагу?

42. Infinite loading

43. logpoint

44. Консоль / термінал
• «Всі, все рівно, дебажать в консолі»
• «Debugger – це добре, але console.log надійніше»
• «Я потім приберу»
• «З ним працює, без нього - ні…»
• «Залиш консоль лог, щоб я знав, де дивитись»

45. Стандартні повідомлення

46. Eager Evaluation & highlight DOM
Особливість: функції та вирази не повинні містити побічних дій

47. $
Що це?

49. $0 - $4 – доступ до останніх п’яти DOM елементів
Evaluate Expressions

50. Evaluate Expressions
Вибірка та інспектування в консолі

51. getEventListeners, monitorEvents, monitor, keys.
Робота з подіями

52. Копіювання в буфер
Лише JSON-подібна структура може бути збережена

53. debug
Пошук стороннього legacy

54. Швидка можливість отримання
всіх екземплярів класу.
Особливість: клас має бути
доступний з консолі.
queryObjects

55. Посилання
• F12
• F12 -> What’s new
• https://developers.google.com/web/tools/chrome-
devtools/
https://developers.google.com/web/tools/lighthouse/
• https://github.com/ChromeDevTools/awesome-chrome-devtools
https://flaviocopes.com/chrome-devtools-tips/
https://github.com/bahmutov/code-snippets
https://umaar.com/dev-tips/

56. ?
Запитання