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

Chrome Developer Toolsдля вскрытия черных ящиков

Роман Сальников

r.salnikov@2gis.ru

@bardty