https://clck.ru/CuZsy

DevTools

Как открыть DevTools

• Контекстное меню - Просмотреть код (Chrome), Исследовать элемент (Firefox, Yandex browser)
  
  
• Safari: сначала надо разрешить показ инструментов разработки
  
  
• Другие браузеры: аналогично Chrome/Firefox
• На английском: Inspect element, inspect object и т.п.

Панель Elements (Элементы, Инспектор DOM и т.п.)

• Просмотр/редактирование актуального состояния дерева DOM (может отличаться от загруженного HTML)
• Просмотр/редактирование стилей
• Просмотр вычисленных стилей
• Режим адаптивного дизайна (в Safari - через меню "Разработка" - "Перейти в режим отзывчивого дизайна")
• Firefox: просмотр обработчиков событий, Chrome: просмотр и удаление
• Chrome, Firefox: последние проинспектированные элементы: $0, $1, $2, $3
• DOM properties
• DOM breakpoints (Chrome, Safari)
  
  

Console (Консоль)

• $0 ... $4
• Логирование в консоль событий на элементе monitorEvents(element, eventName) ... unmonitorEvents(element) monitorEvents(document, 'mouse') // unmonitorEvents(document)
• Reveal in Elements panel в контекстном меню на элементе
• ... и многое другое

Sources (Отладчик в Safari и Firefox)

• Pause on exceptions (all, unhandled)
• XHR/fetch breakpoints (Chrome, Safari)
• Event listener breakpoints
• debugger в JavaScript
• Команды консоли для логирования/отладки вызовов функции debug(function), monitor(function) monitor(myIntervalHandler) // unmonitor(myIntervalHandler)
• Логирование на лету без модификации кода: условные точки останова
• Ctrl+Shift+O (Cmd+Shift+O) - список методов
• Во время отладки вычисляет выделенный фрагмент кода при ховере
  
  
• Blackbox script (Firefox, Chrome)

Network (Сеть, Монитор сети)

• Список колонок настраивается (это неочевидно, и многие об этом не знают)
• Можно делать скриншоты в процессе загрузки (Chrome)
• Включение/отключение кэша (об этом важно помнить, когда смотришь в production)
• Network throttling - эмуляция медленного соединения
• Ховер с нажатой клавишей Shift - подсветка инициировавшего/инициированных запросов

Performance

• CPU/Network throttling
• Клавиши WASD для перемещения/масштабирования

Memory

• Heap snapshot
• Allocation timeline
• Find memory leaks: three snapshots technique, timeline

JS Profiler

• Deprecated в Chrome, будет удалён
• В IE11/Windows 7 (который без Edge) был инструментирующий профайлер

Application (Хранилище в Safari и Firefox)

• Local Storage, Session Storage, IndexedDB, Cookies и т.п.
• В Chrome - удаление и принудительное обновление Service Workers

Security

Audits (Chrome)

Дополнительные панели

Rendering

• Дополнительная панель, открывается в настройках консоли
• Paint flashing
• FPS meter
• Scrolling performance issues
• Emulate CSS media - проверка стилей для печати

JS/CSS coverage

Отладка экзотики и мобильных браузеров

• Chrome Mobile:
  • разрешить отладку в мобильном Chrome
  • подключить телефон по USB
  • разрешить подключение
  • в десктопном браузере открыть вкладку Remote devices в нижней консоли
• Safari iOS:
  • разрешить отладку в мобильном Safari
  • подключить телефон по USB
  • разрешить подключение
  • в десктопном браузере в меню "Разработка" должно появиться устройство
• Открыть Firebug Lite

Полезные ссылки

• https://developers.google.com/web/tools/chrome-devtools/ - Документация по DevTools Chrome
• https://umaar.com/dev-tips - Полезные советы по DevTools