Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Отладка кода в браузере
Шувалов Антон
FrontendConf 2015
Отладка кода в браузере
2
• Зачем нужен console.log и почему он не
подходит для отладки?
• Как отладчик поможет вам?
Console
С чего всё началось?
4
console.log(), КАРЛ!
5
6
7
8
9
10
Что не так с console.log()
11
• Не точно
• Не подробно
• Медленно
console.log — не отладчик
12
но…
13
зачем нам console?
14
console
15
console.group
16
console.dir
17
console.assert
18
console.time
19
console.profile
20
console.profile
21
Возможности сonsole
22
• Сообщения, ошибки предупреждения
• log(), info(), warn(), error(), assert(), group(),
dir()
• Про...
Отладчик
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
Шувалов Антон
Upcoming SlideShare
Loading in …5
×

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

1,473 views

Published on

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

Published in: Software
  • Be the first to comment

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

  1. 1. Отладка кода в браузере Шувалов Антон FrontendConf 2015
  2. 2. Отладка кода в браузере 2 • Зачем нужен console.log и почему он не подходит для отладки? • Как отладчик поможет вам?
  3. 3. Console
  4. 4. С чего всё началось? 4
  5. 5. console.log(), КАРЛ! 5
  6. 6. 6
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10. 10
  11. 11. Что не так с console.log() 11 • Не точно • Не подробно • Медленно
  12. 12. console.log — не отладчик 12
  13. 13. но… 13
  14. 14. зачем нам console? 14
  15. 15. console 15
  16. 16. console.group 16
  17. 17. console.dir 17
  18. 18. console.assert 18
  19. 19. console.time 19
  20. 20. console.profile 20
  21. 21. console.profile 21
  22. 22. Возможности сonsole 22 • Сообщения, ошибки предупреждения • log(), info(), warn(), error(), assert(), group(), dir() • Профилирование • time(), profile()
  23. 23. Отладчик 23
  24. 24. Основы отладки 24
  25. 25. 25
  26. 26. 26
  27. 27. 27
  28. 28. 28
  29. 29. 29
  30. 30. 30
  31. 31. 31
  32. 32. 32
  33. 33. 33
  34. 34. 34
  35. 35. 35
  36. 36. 36
  37. 37. 37 Нет постоянных перезагрузок страницы!
  38. 38. 38 Управление ходом исполнения программы!
  39. 39. 39 Доступ к стеку вызовов!
  40. 40. 40 Отлично работающий REPL!
  41. 41. 41 Работает с SourceMaps!
  42. 42. 42
  43. 43. Что ещё интересного в DevTools? 43
  44. 44. Watch Expressions 44
  45. 45. 45
  46. 46. 46
  47. 47. 47
  48. 48. 48
  49. 49. 49
  50. 50. 50
  51. 51. 51
  52. 52. Работа со стеком 52
  53. 53. 53
  54. 54. 54
  55. 55. 55
  56. 56. 56
  57. 57. Отладка асинхронного кода 57
  58. 58. 58
  59. 59. 59
  60. 60. 60
  61. 61. 61
  62. 62. 62
  63. 63. Console — для логов 63
  64. 64. DevTools — для отладки 64
  65. 65. Не забивайте гвозди изолентой 65
  66. 66. 66 twitter.com/shuvalov_anton github.com/shuvalov-anton Шувалов Антон

×