Чем плох console.log, и как сэкономить время на отладке в Dev Tools? - Точки останова. - Просмотр состояния стеков. - Работа с repl в контексте активного стека. - Как удобно следить за состояниями переменных и выражений с помощью watch expressions. - Как поставить точку останова на события, мутации DOM, XHR, на обращения к полям объектов и на неперехваченные исключения? - Pretty print и source maps. - Немного о логах и debug.js.

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

2. Отладка кода в браузере
2
• Зачем нужен console.log и почему он не
подходит для отладки?
• Как отладчик поможет вам?

3. Console

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

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

6. 6

7. 7

8. 8

9. 9

10. 10

11. Что не так с console.log()
11
• Не точно
• Не подробно
• Медленно

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

13. но…
13

14. зачем нам console?
14

15. console
15

16. console.group
16

17. console.dir
17

18. console.assert
18

19. console.time
19

20. console.profile
20

21. console.profile
21

22. Возможности сonsole
22
• Сообщения, ошибки предупреждения
• log(), info(), warn(), error(), assert(), group(),
dir()
• Профилирование
• time(), profile()

23. Отладчик
23

24. Основы отладки
24

25. 25

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31

32. 32

33. 33

34. 34

35. 35

36. 36

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

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

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

40. 40
Отлично работающий
REPL!

41. 41
Работает с SourceMaps!

42. 42

43. Что ещё интересного
в DevTools?
43

44. Watch Expressions
44

45. 45

46. 46

47. 47

48. 48

49. 49

50. 50

51. 51

52. Работа со стеком
52

53. 53

54. 54

55. 55

56. 56

57. Отладка асинхронного кода
57

58. 58

59. 59

60. 60

61. 61

62. 62

63. Console — для логов
63

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

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

66. 66
twitter.com/shuvalov_anton
github.com/shuvalov-anton
Шувалов Антон