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