Cлайды моего доклада на FrontConf'15

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
Шувалов Антон