Открываем страницу

Переходим на вкладку Sources панели разработчика

navigator		debugger

Для просмотра кода загруженной страницы используем кнопку >> и открываем Pages

Слева вы видите структуру проекта, где можно выбрать файл для просмотра

выбираем файл проекта, содержимое которого будет отображаться в центре ( index02.js )

---

В отладчике можно не только работать с кодом открытой страницы

Можно создать свой фрагмент кода, который хотите отладить

С помощью той же кнопки >> выберем Snippets

Можно:

• добавить новый сниппет ( слева )
• вставить код ( в центре )
• сохранить сниппет ( Ctrl+S )
• запустить код сниппета ( правая кнопка мышки ⇾ контекстное меню ⇾ Run )

---

Watch	Call Stack	Scope	Breakpoints

Для отслеживания значений переменных используем секцию Watch в панели debugger

Нужно добавить имена переменных, значения которых мы хотим отслеживать

Точки останова Breakpoints в панели debugger позволяют приостановить выполнение кода и посмотреть значения отслеживаемых переменных

Для возобновления выполнения кода используем кнопку

После установки breakpoints перезагрузите страницу

Можно внести изменения в код, отображаемый в центре ( между панелями navigator и debugger )

После внесения изменений нужно сохранить их ( Ctrl + S )

Теперь будет работать новая версия кода

Если изменения не были сохранены, в панели navigator измененный файл будет отмечен символом *

Mожно отслеживать изменение значений переменных еще и в секции Scope дебаггера:

• Local - локальные переменные исполняемой функции,
• Block - переменные контекста вызова исполняемой функции

Следите, какая функция сейчас выполняется, в секции Call Stack

---

В Chrome DevTools можно также приостанавливать выполнение кода, когда происходят события DOM

Посмотрите код примера

На событие click элемента button повешен обработчик, который скрывает / показывает элемент div.circle, изменяя значение свойства circle.style.visibility Опять откроем панель разработчика, вкладку Sources В закладке Watch укажем circle.style.visibility, чтобы отслеживать изменение значения этого свойства Развернем закладку Event Listener Breakpoints развернем пункт Mouse выберем событие click Теперь при клике левой кнопкой мышки выполнение кода будет приостановлено, и мы сможем пошагово проследить работу всех обработчиков события click Поскольку в браузере есть свои обработчики события click, будем "пролистывать" их с помощью уже известной нам кнопки , пока не дойдем до нашего обработчика события click на кнопке Здесь мы будем отслеживать работу кода пошагово с помощью кнопки Step into next function call

Самостоятельно установите наблюдение за свойством button.innerHTML Подкорректируйте код в Sources так, чтобы при наведении указателя мышки на схему она плавно поворачивалась на 90 градусов

google