С чем едят js-дебаггур?!
TRANSCRIPT
Олег Воскович
JS Дебаггер:
точки останова
отслеживание переменных
трассировка
2
3
JS Дебаггер:
точки останова
отслеживание переменных
трассировка
4
https://developer.chrome.com/devtools/docs/javascript-
debuggingТулз
http://spy-js.com
5
Тулз
http://getfirebug.com/javascript
https://developer.mozilla.org/en-US/docs/Tools/Debugger6
Основные возможности
дебаггеров на примере Google
Chrome
7
Точки останова
установка точки останова
останов по условию
управление точками останова
стек вызовов
8
Установка точки останова 1/4
9
Установка точки останова 1/4
10
Ctrl + O (Cmd + O)
Установка точки останова 1/4
11
Ctrl + Shift + O (Cmd + ⇧ +
O)
Установка точки останова 1/4
12
Останов по условию 2/4
13
Останов по условию 2/4
14
Управление точками останова
3/4
15
Управление точками останова 3/4
16
Стек вызовов 4/4
17
Стек вызовов 4/4
18
Отслеживание переменных и
выражений
список переменных
выражения
19
Локальный скоуп
local
closure
global
Выводит все доступные
переменные из текущей
точки останова.
Изменение значений
параметров входе
выполнения.
20
Просмотр выражений.
Удобно использовать если
вам необходимо следить
только за некоторыми
переменными.
Изменять значения
параметров входе
выполнения так же
возможно.
Дает возможность следить
за результатом выражения в
ходе выполнения.
21
Трассировка
управление трассировкой
точки останова XHR
точки останова DOM манипуляций
точки останова при вызове событий
точки останова при вызове исключений
точки останова получения сообщений воркеров
22
Панель трассировки
панель управления
Call stack
Breakpoints
XHR Breakpoints
DOM BR
Exception BR
Event Listener BPs
Worker
Прослушивание событий
манипуляция с DOM
23
Управление трассировкой
1/6
24
Управление трассировкой
1/6
25
Пример XHR BP 2/6
26
Точки останова DOM манипуляций
3/6
27
Точки останова DOM манипуляций
3/6
28
Точки останова событий 4/6
29
Пример отлова
исключения
до исключения 5/6
30
31
Пример отлова исключения
до исключения 5/6
Отслеживание Worker 6/6
32
JS дебаггер в
PHPStorm/WebStorm
33
JS дебаггер SPY-JS (spy-js.com)
34
35
Полезные ссылки
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
JS Дебаггер Q&A
точки останова
отслеживание переменных
трассировка
37
38