Сборка от 17 марта 2017 г

Общий вид панели Sources

В вашей версии Chrome панель может выглядеть несколько по‑иному, но что где находится, должно быть понятно. Зайдите на страницу с примером браузером Chrome.

Откройте инструменты разработчика: Выберите сверху Sources .
или в меню Инструменты > Инструменты Разработчика .

Вы видите три зоны:

1. 
   Зона исходных файлов. В ней находятся все подключённые к странице файлы, включая JS/CSS. Выберите pow.js , если он не выбран.
   
2. 
   Зона текста. В ней находится текст файлов.
   
3. 
   Зона информации и контроля. Мы поговорим о ней позже.
   

Обычно зона исходных файлов при отладке не нужна. Скройте её кнопкой .

Общие кнопки управления

Три наиболее часто используемые кнопки управления:

Формат

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

Консоль

Очень полезная кнопка, открывает тут же консоль для запуска команд. Можно смотреть код и тут же запускать функции. Её нажатие можно заменить на клавишу Esc .

Окно

Если код очень большой, то можно вынести инструменты разработки вбок или в отдельное окно, зажав эту кнопку и выбрав соответствующий вариант из списка.

Точки останова

Открыли файл pow.js во вкладке Sources? Кликните на 6‑й строке файла pow.js , прямо на цифре 6. Поздравляю! Вы поставили точку останова или, как чаще говорят, «брейкпойнт».

Выглядет это должно примерно так:

Слово Брейкпойнт (breakpoint) – часто используемый английский жаргонизм. Это то место в коде, где отладчик будет автоматически останавливать выполнение JavaScript, как только оно до него дойдёт.

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

Вы можете видеть, что информация о точке останова появилась справа, в подвкладке Breakpoints. Вкладка Breakpoints очень удобна, когда код большой, она позволяет:

• 
  Быстро перейти на место кода, где стоит брейкпойнт кликом на текст.
  
• 
  Временно выключить брейкпойнт кликом на чекбокс.
  
• 
  Быстро удалить брейкпойнт правым кликом на текст и выбором Remove, и так далее.