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

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

1

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

События ➔

?➔ Отрисовка

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

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

3

4

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

5

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

6

1. Отладка

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

8

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

2. Читаем код

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

4. Повторяем

9

Есть кое-что

мощнее

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

— XHR запросы

— Event Listeners

— Workers

11

Event Listeners

12

DOM Breakpoints

13

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

— setInterval

— setTimeout

— XMLHttpRequest

— promises

— requestAnimationFrame

— и т.д, и т.п

14

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

15

Async + Breakpoints = ❤1. Включаем Async Call Stack

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

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

4. ???

5. Profit

16

Console

$0 + getEventListeners

18

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

19

var watchMe = {};

Object.observe(watchMe, function() {

debugger;

});

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

01.

02.

03.

04.

05.

06.

20

Snippets

21

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

— Async Call Stack

— Console API

22

2. FPS

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

тормозит

FPS meter

25

Timeline

26

Timeline— JavaScript

— Recalculate Style , Layout

— Paint

27

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

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

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

28

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

29

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

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

30

31

CPU profiler

32

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

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

33

34

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

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

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

35

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

36

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

37

Forced synchronous layout StylesBad way

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

➔Invalidate

layout➔

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

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

➔ . . .

Good way

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

➔Изменяем

все размеры➔

Invalidatelayout

➔ Layout ➔ . . .

38

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

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

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

39

function getHeaderOffset() {

return $(window).scrollTop()

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

}

01.

02.

03.

04.

40

// 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

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

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

43

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

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

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

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

44

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

45

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

46

Так что же всё-таки делать с FPS?— Убедиться, что есть проблема, с помощью FPS meter

— Записать активность в Timeline

— JavaScript CPU Profiler / Canary Timeline

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

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

47

3. Память

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

50

Heap Snapshots

51

Detached Nodes

52

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

53

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

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

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

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

54

4. Итоги

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

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

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

56

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

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

57

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

— Debugging Asynchronous JavaScript with Chrome DevTools – Pearl Chen

— Using the Console

— Breakpoints on JavaScript Event Listeners

58

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

— Advanced Performance Tooling in Chrome DevTools – Paul Irish

— Parallax Performance [CSSConfUS2014] – Paul Irish

— JavaScript Memory Management – Addy Osmani

— GPU Boundedness – Nat Duca

59

Firefox— Debugging with Firefox

— Performance fundamentals

Opera— Dragonfly documentation

60

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

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

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

61

Спасибо!

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

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

r.salnikov@2gis.ru

techno.2gis.ru

63