Суперсилы Chrome DevTools — Роман Сальников, 2ГИС

Суперсилы Chrome Developer Tools

Роман Сальников, 2ГИС

r.salnikov@2gis.ru

1

Код проекта - черный ящик

События ➔

?➔ Отрисовка

Внешние API ➔ ➔ Данные

Время ➔ ➔ Внешние API

3

4

DevTools обывателя

5

DevTools профессионала

6

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

7

1. Отладка

Баг - элемент добавляется дважды

9

Хардкорная обычная отладка1. Ищем по проекту что-то похожее

2. Читаем код

3. Ставим console.log и/или брэйкпоинт

4. Повторяем

10

Есть кое-что

мощнее

Умные брэйкпоинты— Изменения DOM

— XHR запросы

— Event Listeners

— Workers

12

Event Listeners

13

DOM breakpoint

14

Асинхронные коллстэкиПробивают сквозь пространство и время

— setInterval

— setTimeout

— XMLHttpRequest

— promises

— requestAnimationFrame

— и т.д, и т.п

15

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

16

Async + breakpoints = ❤1. Включаем Async call stack

2. Ловим результат бага (DOM, XHR breakpoints)

3. Можем вернуться к истокам проблемы

4. ???

5. Profit

17

Async + breakpoints = ❤

18

Async + breakpoints = ❤

19

Console

$0 + getEventListeners

21

Events

22

Отладка объектов JavaScriptvar watchMe = {};

Object.observe(watchMe, function() {

debugger;

});

watchMe.foo = 'bar'; // выполнение останавливается

01.

02.

03.

04.

05.

06.

23

Snippets

24

Инструменты для отладки— Умные брэйкпоинты

— Async call stack

— Console API

25

2. FPS

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

тормозит

FPS meter

28

Timeline

29

Timeline

30

Timeline

31

Timeline— JavaScript

— Recalculate Style , Layout

— Paint

32

Recalculate Style— Собирает все стили

— Находит соответствие между элеметами DOM и селекторами

— Высчитывает Calculated Style для каждого элемента

33

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

34

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

— Отрисовывает на экране

35

Timeline

36

37

CPU profiler

38

CPU profiler (Heavy)

39

CPU profiler (Chart)

40

CPU profiler (Chart)

41

Диагностика FPS JavaScript— CPU Profiler Tree - дает снимок, не дает понимания динамики

— CPU Profiler Chart - лучше, но сложно синхронизировать с Timeline

42

43

Прокачанный Timeline— Включить режим экспериментов DevTools в chrome://flags

— Включить дополнительные настройки

— Наслаждаться результатом

44

Прокачанный Timeline

45

Прокачанный Timeline

46

Прокачанный Timeline

47

Прокачанный Timeline

48

Диагностика FPS Styles

49

Forced synchronous layout StylesBad way

Изменяемразмеры A

➔Invalidate

layout➔

Получаемразмеры

➔ Layout ➔Изменяемразмеры B

➔ . . .

Good way

Получаемвсе размеры

➔Изменяем

все размеры➔

Invalidatelayout

➔ Layout ➔ . . .

50

Диагностика FPS Styles

51

Мы поняли:— updateHeaderPosition - корень всех проблем

— Из нее вызывается много тяжелого кода jQuery

— Есть проблема с инвалидацией лэйаута

52

function getHeaderOffset() {

return $(window).scrollTop()

- $('#pageHeader').offset().top;

}

01.

02.

03.

04.

53

$('#pageHeaderText').css({

top: headerHeight/2 - (getHeaderOffset() / 2)

});

...

$('.letter').animate({

paddingLeft: getHeaderOffset() / 10,

paddingRight: getHeaderOffset() / 10

}, 0);

01.

02.

03.

04.

05.

06.

07.

08.

54

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.

55

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

56

Диагностика FPS Paint— Paint Rectangles - показывает, какая область экрана перерисовывается

на каждом кадре.

— Чем реже требуется перерисовка, тем лучше

— Чем меньше область перерисовки, тем лучше

57

Paint Rectangles

58

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

59

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

60

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

61

62

Так что же всё-таки делать с FPS?— FPS meter

— Timeline

— JavaScript CPU Profiler / Canary Timeline

— Styles Обращаем внимание на предупреждения

— Paint Paint Rectangles, скрываем подозрительные элементы

63

3. Память

Timeline умеет показывать расходуемуюпамять

66

Heap snapshots

67

Heap snapshots

68

Heap snapshots

69

Detached nodes

70

71

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

72

Память— Изолируем проблему

— Проверяем с помощью Timeline (forced GC)

— Определяем, что искать

— Сравниваем до/после через Heap Snapshots

73

Итоги

Chrome DevTools помогает— Отлаживать

— Изучать незнакомый код

— Искать проблемы с производительностью

75

Пример из этой презентацииhttps://github.com/bardt/devtools_training_app

Пул-реквесты приветствуются. Сделаем этот проект еще хуже!

76

Если хочется еще deeperОтладка

— Debugging Asynchronous JavaScript with Chrome DevTools - Pearl Chen

— Using the Console

— Breakpoints on JavaScript Event Listeners

77

Если хочется еще deeperFPS и память

— Advanced performance tooling in Chrome DevTools - Paul Irish

— Parallax Performance [CSSConfUS2014] - Paul Irish

— JavaScript Memory Management - Addy Osmani

— GPU boundedness - Nat Duca

78

Firefox— Debugging with Firefox

— Performance fundamentals

Opera— Dragonfly documentation

79

К чему это все?— Осваивайте инструменты, упрощающие вам жизнь

— Не растрачивайте время впустую

— Пишите больше фич и получайте от этого кайф

80

Спасибо!