Отладка кода в браузере Антон Шувалов, Lazada, Москва
Transcript of Отладка кода в браузере Антон Шувалов, Lazada, Москва
Отладка кода в браузереАнтон Шувалов
FrontTalks 2016
Отладка кода в браузере
2
• Зачем нужен console.log и почему он не подходит для отладки?
• Как отладчик поможет вам?
С чего всё началось?3
4
5
6
7
8
9
Что не так с console.log()
10
• Не точно — с первого раза не попасть • Не подробно — одно предположение за раз • Медленно — сборка, перезагрузка страницы…
console.log — не отладчик
11
но…12
зачем нам console? 13
Console
console15
console.group16
console.dir17
Зачем использовать это? Юзкейсы? Продать
console.assert18
console.time19
console.profile20
console.profile21
Зачем нам сonsole?
22
• Сообщения, ошибки предупреждения • log(), info(), warn(), error(), assert(), group(),
dir() • Профилирование
• time(), profile()
Отладчик
23
Основы отладки
24
25
26
27
28
29
30
31
32
Откуда взялся репл?
33
34
35
36
Ссылка на доки, мануал, chrome dev tools code school
37
Нет постоянных перезагрузок страницы!
38
Управление ходом исполнения программы!
39
Доступ к стеку вызовов!
40
Отлично работающий REPL!
Что такое REPL?
41
Работает с SourceMaps!
42
Что ещё интересного в DevTools?
43
Watch Expressions
44
45
46
47
48
49
50
51
Работа со стеком
52
53
54
55
56
Отладка асинхронного кода
57
58
59
60
61
62
Карты кода
63
64
65
66
Карты Кода
67
• browserify --debug • gulp-sourcemaps • webpack { devtool: 'inline-source-map' } • … • profit!
68
69
_this
70
__this
71
_store2['default']
Не работают в REPL
72
Blackboxing
73
74
Продать дебаг
75
76
77
78
79
80
81
Отладчик не заходит внутрь черного ящика
82
Идеально подходит к оберткам над логгерами
83
Работает только с файлами
Discover Devtoolshttp://discover-devtools.codeschool.com/
84
Console — для логов
85
DevTools — для отладки
86
Не забивайте гвозди изолентой
87
88
twitter.com/shuvalov_anton
github.com/A
Шувалов Антон