В своей работе мы постоянно используем инструменты, призванные облегчить нам жизнь. Но как хорошо мы ими на самом деле владеем? И почему мы пренебрегаем их суперсилами? Например, Chrome DevTools — это не только отладчик и инспектор HTML. Но когда у нас в руках молоток, кругом мерещатся гвозди. Десятки мегабайт и процентов загрузки процессора на вкладку браузера — верный признак того, что пора учиться пользоваться микроскопом. Роман предложит освоить что-то посложнее молотка и расскажет о том, какую реальную пользу можно получить от профилирования, как найти в огромном отчёте проблему с кодом и что лучше — написать в коде десяток console.log или async debug.

1. Суперсилы Chrome Developer Tools
Роман Сальников
1

3. Код проекта –черный ящик
События ➔
?
➔ Отрисовка
Внешние API ➔ ➔ Данные
Время ➔ ➔ Внешние API
3

4. 4

5. DevTools обывателя и профессионала
5

8. Тренировочная площадка
6

10. 1.Отладка

11. Баг –элемент добавляется дважды
8

13. Хардкорная обычная отладка
1. Ищем по проекту что-то похожее
2. Читаем код
3. Ставим console.log и/или брэйкпоинт
4. Повторяем
9

14. Есть кое-что
мощнее

15. Умные брэйкпоинты
— Изменения DOM
— XHR запросы
— Event Listeners
— Workers
11

16. Event Listeners
12

18. DOM Breakpoints
13

20. Асинхронные коллстэки
Пробивают сквозь пространство и время
— setInterval
— setTimeout
— XMLHttpRequest
— promises
— requestAnimationFrame
— и т.д, и т.п
14

21. Обычный vs.Async коллстэк
Коллстэк курильщика Коллстэк здорового человека
15

22. Async + Breakpoints = ❤
1. Включаем Async Call Stack
2. Ловим результат бага (DOM, XHR Breakpoints)
3. Можем вернуться к истокам проблемы
4. ???
5. Profit
16

25. Console

26. $0 + getEventListeners
18

29. Отладка объектов JavaScript
19

30. var watchMe = {};
Object.observe(watchMe, function() {
debugger;
});
watchMe.foo = 'bar'; // выполнение останавливается
01.
02.
03.
04.
05.
06.
20

31. Snippets
21

33. Инструменты для отладки
— Умные брэйкпоинты
— Async Call Stack
— Console API
22

34. 2.FPS

35. Страница заметно
тормозит

36. FPS meter
25

38. Timeline
26

42. Timeline
— JavaScript
— Recalculate Style , Layout
— Paint
27

43. Recalculate Style
— Собирает все стили
— Находит соответствие между элеметами DOM и селекторами
— Высчитывает Calculated Style для каждого элемента
28

44. Layout
— Высчитывает геометрии элементов на основе стилей
29

45. Paint
— Преобразует все, что было подсчитано, в пиксели
— Отрисовывает на экране
30

47. 31

48. CPU profiler
32

53. Диагностика FPS JavaScript
— CPU Profiler Tree – дает снимок, не дает понимания динамики
— CPU Profiler Chart – лучше, но сложно синхронизировать с Timeline
33

54. 34

55. Прокачанный Timeline
— Включить режим экспериментов DevTools в chrome://flags
— Включить дополнительные настройки
— Наслаждаться результатом
35

60. Диагностика FPS Styles
36

61. Диагностика FPS Styles
37

62. Forced synchronous layout Styles
Bad way
Изменяем
размеры A
➔
Invalidate
layout
➔
Получаем
размеры
➔ Layout ➔
Изменяем
размеры B
➔ ...
Good way
Получаем
все размеры
➔
Изменяем
все размеры
➔
Invalidate
layout
➔ Layout ➔ ...
38

63. Мы поняли
— updateHeaderPosition – корень всех проблем
— Из нее вызывается много тяжелого кода jQuery
— Есть проблема с инвалидацией лэйаута
39

64. function getHeaderOffset() {
return $(window).scrollTop()
- $('#pageHeader').offset().top;
}
01.
02.
03.
04.
40

65. // updateHeaderPosition
$('#pageHeaderText').css({
top: headerHeight/2 - (getHeaderOffset() / 2)
});
...
$('.letter').animate({
paddingLeft: getHeaderOffset() / 10,
paddingRight: getHeaderOffset() / 10
}, 0);
01.
02.
03.
04.
05.
06.
07.
08.
09.
41

66. var headerOffset = getHeaderOffset();
var destPadding = headerOffset / 10;
...
$('#pageHeaderText').css({
top: headerHeight/2 - (headerOffset / 2)
});
$('.letter').css({
paddingLeft: destPadding,
paddingRight: destPadding
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
42

67. После исправления анимации
43

69. Диагностика FPS Paint
— Paint Rectangles – показывает, какая область экрана перерисовывается
на каждом кадре.
— Чем реже требуется перерисовка, тем лучше
— Чем меньше область перерисовки, тем лучше
44

71. Решение проблемы с перерисовкой
45

74. Timeline после всех изменений
46

76. Так что же всё-таки делать с FPS?
— Убедиться, что есть проблема, с помощью FPS meter
— Записать активность в Timeline
— JavaScript CPU Profiler / Canary Timeline
— Styles Обращать внимание на предупреждения
— Paint Paint Rectangles, скрыть подозрительные элементы
47

77. 3.Память

79. Timeline показывает память
50

82. Heap Snapshots
51

86. Detached Nodes
52

89. После устранения проблемы
53

91. Память
— Изолируем проблему
— Проверяем с помощью Timeline (forced GC)
— Определяем, что искать
— Сравниваем до/после через Heap Snapshots
54

92. 4.Итоги

93. Chrome DevTools помогает
— Отлаживать
— Изучать незнакомый код
— Искать проблемы с производительностью
56

94. Пример из этой презентации
https://github.com/bardt/devtools_training_app
Пул-реквесты приветствуются. Сделаем этот проект еще хуже!
57

95. Если хочется еще deeper
Отладка
— Debugging Asynchronous JavaScript with Chrome DevTools – Pearl Chen
— Using the Console
— Breakpoints on JavaScript Event Listeners
58

96. Если хочется еще deeper
FPS и память
— Advanced Performance Tooling in Chrome DevTools – Paul Irish
— Parallax Performance [CSSConfUS2014] – Paul Irish
— JavaScript Memory Management – Addy Osmani
— GPU Boundedness – Nat Duca
59

97. Firefox
— Debugging with Firefox
— Performance fundamentals
Opera
— Dragonfly documentation
60

98. К чему это все?
— Осваивайте инструменты, упрощающие вам жизнь
— Не растрачивайте время впустую
— Пишите больше фич и получайте от этого кайф
61

99. Спасибо!

100. Суперсилы Chrome Developer Tools
Роман Сальников
r.salnikov@2gis.ru
techno.2gis.ru
63