Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Stfalcon QA Meetup 31.01.2020

66 vues

Publié le

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

Publié dans : Logiciels
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Stfalcon QA Meetup 31.01.2020

  1. 1. Chrome Dev Tools: Debug me!
  2. 2. Whoami • Team/Tech lead (Infopulse) • Організатор BeerJS Zhytomyr, PublicIT, frontendZt • Суддя DevChallange 2019 • Розробляю щось у фронтенді • Розповідаю дивні речі на конференціях • Люблю слухати дивні речі на конференціях
  3. 3. Chrome DevTools – 12! 6 вересня 2008 • Firebug • Webkit Web Inspector • «Inspect element» епоха • Мобільна епоха. Створено «devtools-protocol» • Performance епоха • NodeJS епоха • WebAssembly епоха ?
  4. 4. Перехід на новий тул
  5. 5. Командне меню Cmd + Shift + P / Ctrl + Shift + P
  6. 6. Темна тема – це круто! Переходь на темну сторону, в нас є печиво
  7. 7. Сніпети Примітивна можливість дебагу
  8. 8. Сніпети Використовуйте для речей, які необхідно виконувати на різних ресурсах
  9. 9. Inspect tooltip Редагування, а також відключення тултіпу можливо
  10. 10. Clear site data
  11. 11. Зберігання файлів через девтул Збірка проекту з хот релоад Використання локальних змін Локальний проект Гіт проект (з доступом до коду) Чужий проект без доступу Локальні зміни (Local overrides) Навіщо взагалі фіча?
  12. 12. Локальні зміни (Local overrides)
  13. 13. Capture screenshot
  14. 14. Lighthouse 4.0
  15. 15. Прелоад шрифтів за допомогою локальних змін Lighthouse 4.0
  16. 16. Reporting observer Девтул допомагає відстежувати старі АПІ
  17. 17. Page Lifecycle API Маніпулюй роботою браузера
  18. 18. Page Lifecycle API
  19. 19. Профілірування Різниця між інструментуванням і семпліруванням Інструментування function kharkivJSStart() { // learn // drink // think } Записати час та стеки Записати час та стеки Зібрати стек Зібрати стек Семплірування Зібрати стек Зібрати стек
  20. 20. Профілірування В чому ж різниця Інструментування СемпліруванняVS • Нерівномірно спотворює результат • Завжди включає всі функції • Містить детальну інформацію про стек виклику • Важкий в реалізації • Рівномірно спотворює результат • Точність обмежена частотою семплірування
  21. 21. Швидкий аналіз найбільш повільних місць коду ПС: споживання пам’яті завжди відображається на конверсії і доходах Performance monitor
  22. 22. Coverage Рахуй кількість невикористаного коду
  23. 23. Coverage Puppeteer + coverage API Export to JSON
  24. 24. Network Блокування запитів
  25. 25. Network Пошук по будь-якому хеадеру, а також знаходження залежностей
  26. 26. Network Service worker filters
  27. 27. Shareable Network Експортуйте ваші данні для тестування без проблем
  28. 28. Rendering Перевіряй зони і FPS
  29. 29. IO’19 step-into & workers Або тепер я знаю, як вірно працювати з ним
  30. 30. Сторінка WorkerDevTools new Worker('worker.js'); Cповістити токен… Зупинитись… Створити новий потік, Передати в нього токен Зберегти токен… Продовжити Попросити зупинитись, якщо токен, продовжити Сповістити про себе Зупитинись Розпочати задачу з токеном, зупинитись postMessage('pong'); IO’19 step-into & workers Або тепер я знаю, як вірно працювати з ним
  31. 31. IO’19 step-int
  32. 32. NDB Що це?
  33. 33. NBD – node debug CDT Підтримує Node > 8, працює на > 10 • Побудований на Chromium • Працює як окремий застосунок (в планах додати до CDT) • Підтримує всі можливості CDT • Має JS and memory профілювальники • Розпізнає і додає «дитячі»
  34. 34. Browse Remote API
  35. 35. Area screenshoot
  36. 36. Яку кількість разів Ви закривали браузер при вічному циклі під час дебагу?
  37. 37. Infinite loading
  38. 38. logpoint
  39. 39. Консоль / термінал • «Всі, все рівно, дебажать в консолі» • «Debugger – це добре, але console.log надійніше» • «Я потім приберу» • «З ним працює, без нього - ні…» • «Залиш консоль лог, щоб я знав, де дивитись»
  40. 40. Стандартні повідомлення
  41. 41. Eager Evaluation & highlight DOM Особливість: функції та вирази не повинні містити побічних дій
  42. 42. $ Що це?
  43. 43. $0 - $4 – доступ до останніх п’яти DOM елементів Evaluate Expressions
  44. 44. Evaluate Expressions Вибірка та інспектування в консолі
  45. 45. getEventListeners, monitorEvents, monitor, keys. Робота з подіями
  46. 46. Копіювання в буфер Лише JSON-подібна структура може бути збережена
  47. 47. debug Пошук стороннього legacy
  48. 48. Швидка можливість отримання всіх екземплярів класу. Особливість: клас має бути доступний з консолі. queryObjects
  49. 49. Посилання • 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/
  50. 50. ? Запитання

×