Возможности современных дебаггеров на примере дебаггер Google Chrome. Точки останова, трассировка, события. Video: https://www.youtube.com/watch?v=8eIKtIypLJc

1. Олег Воскович

2. JS Дебаггер:
 точки останова
 отслеживание переменных
 трассировка
2

3. 3

4. JS Дебаггер:
 точки останова
 отслеживание переменных
 трассировка
4

5. https://developer.chrome.com/devtools/docs/javascript-
debugging
Тулз
http://spy-js.com
5

6. Тулз
http://getfirebug.com/javascript
https://developer.mozilla.org/en-US/docs/Tools/Debugger
6

7. Основные возможности
дебаггеров на примере Google
Chrome
7

8. Точки останова
 установка точки останова
 останов по условию
 управление точками останова
 стек вызовов
8

9. Установка точки останова 1/4
9

10. Установка точки останова 1/4
10
Ctrl + O (Cmd + O)

11. Установка точки останова 1/4
11
Ctrl + Shift + O (Cmd + ⇧ +
O)

12. Установка точки останова 1/4
12

13. Останов по условию 2/4
13

14. Останов по условию 2/4
14

15. Управление точками останова
3/4
15

16. Управление точками останова 3/4
16

17. Стек вызовов 4/4
17

18. Стек вызовов 4/4
18

19. Отслеживание переменных и
выражений
 список переменных
 выражения
19

20. Локальный скоуп
 local
 closure
 global
Выводит все доступные
переменные из текущей
точки останова.
Изменение значений
параметров входе
выполнения.
20

21. Просмотр выражений.
Удобно использовать если
вам необходимо следить
только за некоторыми
переменными.
Изменять значения
параметров входе
выполнения так же
возможно.
Дает возможность следить
за результатом выражения в
ходе выполнения.
21

22. Трассировка
 управление трассировкой
 точки останова XHR
 точки останова DOM манипуляций
 точки останова при вызове событий
 точки останова при вызове исключений
 точки останова получения сообщений воркеров
22

23. Панель трассировки
 панель управления
 Call stack
 Breakpoints
 XHR Breakpoints
 DOM BR
 Exception BR
 Event Listener BPs
 Worker
Прослушивание событий
манипуляция с DOM
23

24. Управление трассировкой
1/6
24

25. Управление трассировкой
1/6
25

26. Пример XHR BP 2/6
26

27. Точки останова DOM манипуляций
3/6
27

28. Точки останова DOM манипуляций
3/6
28

29. Точки останова событий 4/6
29

30. Пример отлова
исключения
до исключения 5/6
30

31. 31
Пример отлова исключения
до исключения 5/6

32. Отслеживание Worker 6/6
32

33. JS дебаггер в
PHPStorm/WebStorm
33

34. JS дебаггер SPY-JS (spy-js.com)
34

35. 35

36. Полезные ссылки
 https://developer.mozilla.org/en-
US/docs/Tools/Debugger
 https://developer.chrome.com/devtools/d
ocs/javascript-debugging
 http://getfirebug.com/javascript
 https://developer.chrome.com/devtools/d
ocs/shortcuts
 http://spy-js.com/
36

37. JS Дебаггер Q&A
 точки останова
 отслеживание переменных
 трассировка
37

38. 38