Chrome Developer Toolsдля вскрытия черных ящиков
Роман Сальников
Трудности• Кода много
• Людей много
• Уследить невозможно
• Нужно постоянно изучать
1
Уровни понимания• Трассы исполнения
• Сценарии использования
• Бизнес-логика
2
Трассы
исполнения
Если на пальцах
4
Поймать результат• Pause on exceptions
• debugger;
• XHR breakpoint
• DOM breakpoint
5
Показать картинку
6
Если на пальцах
7
Поймать событие• Event listeners
• $0 + getEventListeners() + debug()
8
Если на пальцах
9
Если на пальцах
10
Трассы исполнения• Умные брэйкпоинты
• Async полезно, но не всегда
• Blackbox для сторонних библиотек
11
Сценарии
использования
Timeline• Изначально - запись событий браузера
• Потом стал профайлером
• Потом научился отдавать стэки (переход к коду)
• Можно использовать для обзора архитектуры
13
Высчитать корни третьей степени
1999993 125.99195799852664
1999994 125.9919789972563
1999995 125.99199999597896
1999996 125.99202099469463
1999997 125.99204199340329
1999998 125.99206299210495
1999999 125.99208399079961
14
Timeline• Именуйте функции
• Ставьте метки
• Анализируйте по-маленьку
15
Бизнес-логика
console на ключевых моментах• .log()
• .group()
• .info()
• .warn()
• .timeStamp()
17
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
Собственные инструменты
19
DevTools Extensions API• Панель, специфичная для приложения
• Интеграция со стандартными инструментами
• Теоритически, можно все, но...
• Не самая очевидная дока
• Не самая удобная отладка
20
Итого• Уровень кода: умные брэйкпоинты и async callstack
• Уровень архитектуры и рантайма: timeline
• Уровень бизнес-логики: логи и крафтовые инструменты
21