Отладка кода в браузере Антон Шувалов, 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

Шувалов Антон