Отладка кода в браузере

Отладка кода в браузереШувалов Антон

FrontendConf 2015

Отладка кода в браузере

2

• Зачем нужен console.log и почему он не подходит для отладки?

• Как отладчик поможет вам?

Console

С чего всё началось?4

console.log(), КАРЛ!5

6

7

8

9

10

Что не так с console.log()

11

• Не точно • Не подробно • Медленно

console.log — не отладчик

12

но…13

зачем нам console? 14

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

37

Нет постоянных перезагрузок страницы!

38

Управление ходом исполнения программы!

39

Доступ к стеку вызовов!

40

Отлично работающий 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

Console — для логов

63

DevTools — для отладки

64

Не забивайте гвозди изолентой

65

66

twitter.com/shuvalov_anton

github.com/shuvalov-anton

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