Документ посвящен использованию инструментов разработчика Chrome для анализа и отладки сложных приложений. В нем описываются различные методы отслеживания исполнения кода, управления событиями и анализа бизнес-логики с помощью умных брейкпоинтов и профилирования. Также рассматриваются собственные инструменты и API для расширений DevTools, подчеркивая важность глубокого понимания архитектуры и состояния кода.

1. Chrome Developer Tools
для вскрытия черных ящиков
Роман Сальников

2. Трудности
• Кода много
• Людей много
• Уследить невозможно
• Нужно постоянно изучать
1

3. Уровни понимания
• Трассы исполнения
• Сценарии использования
• Бизнес-логика
2

4. Трассы
исполнения

5. Если на пальцах
4

6. Поймать результат
• Pause on exceptions
• debugger;
• XHR breakpoint
• DOM breakpoint
5

7. Показать картинку
6

8. Если на пальцах
7

9. Поймать событие
• Event listeners
• $0 + getEventListeners() + debug()
8

10. Если на пальцах
9

11. Если на пальцах
10

12. Трассы исполнения
• Умные брэйкпоинты
• Async полезно, но не всегда
• Blackbox для сторонних библиотек
11

13. Сценарии
использования

14. Timeline
• Изначально - запись событий браузера
• Потом стал профайлером
• Потом научился отдавать стэки (переход к коду)
• Можно использовать для обзора архитектуры
13

15. Высчитать корни третьей степени
1999993 125.99195799852664
1999994 125.9919789972563
1999995 125.99199999597896
1999996 125.99202099469463
1999997 125.99204199340329
1999998 125.99206299210495
1999999 125.99208399079961
14

16. Timeline
• Именуйте функции
• Ставьте метки
• Анализируйте по-маленьку
15

17. Бизнес-логика

18. console на ключевых моментах
• .log()
• .group()
• .info()
• .warn()
• .timeStamp()
17

19. var watchMe = {};
Object.observe(watchMe, function(options) {
options.forEach(function(option) {
var groupName = option.name + ' changed';
console.groupCollapsed(groupName);
console.log('Old value: ', option.oldValue);
console.log('New value: ', option.object[option.name]);
console.groupEnd(groupName);
});
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
18

20. Собственные инструменты
19

21. DevTools Extensions API
• Панель, специфичная для приложения
• Интеграция со стандартными инструментами
• Теоритически, можно все, но...
• Не самая очевидная дока
• Не самая удобная отладка
20

22. Итого
• Уровень кода: умные брэйкпоинты и async callstack
• Уровень архитектуры и рантайма: timeline
• Уровень бизнес-логики: логи и крафтовые инструменты
21

23. Chrome Developer Tools
для вскрытия черных ящиков
Роман Сальников
r.salnikov@2gis.ru
@bardty