Отладка JavaScript в PhpStorm

Последнее обновление: 10.07.2017 г.
Публикация: 07.07.2017 г.
Информация

В этом руководстве описывается отладка JavaScript-кода в PhpStorm. Все действия, описанные здесь, были воспроизведены с корректными ожидаемыми результатами на PhpStorm 2016.1.2.

Ты когда-нибудь задумывался, что происходит в памяти браузера и DOM при работе с JavaScript? С помощью PhpStorm можно заниматься отладкой JavaScript-кода и выполнять его поэтапно, проверяя переменные (и даже изменяя их) во время выполнения скрипта. Давай посмотрим, как это делается.

Заметка

Помимо отладки JavaScript-кода, c помощью PhpStorm можно заниматься и отладкой PHP-кода.


1. Установка расширения для браузера Google Chrome

Для отладки JavaScript-кода в PhpStorm используется расширение JetBrains IDE Support для браузера Google Chrome. Это расширение обеспечивает связь между тем, что происходит в IDE, и тем, что происходит в браузере, и наоборот. Если расширение не установится автоматически при первом запуске сеанса отладки, то тебе придётся установить его вручную.

Заметка

Также указанное расширение имеет функцию Live Edit. Это позволяет тебе в режиме реального времени, без перезагрузки страницы, видеть изменения при редактировании кода на PHP, JS, HTML, CSS. Ты правишь что-то в IDE — результат моментально отображается в браузере.

Внимание

Если браузер закрыт при запуске сеанса отладки в IDE, то PhpStorm автоматически запустит его. Если расширение не установлено при запуске сеанса отладки, то PhpStorm предупредит об этом.

Установить расширение для браузера Google Chrome можно следующим образом:

  1. Открой Chrome, перейди к настройкам и выбери раздел Extensions или в адресной строке браузера набери:
    chrome://extensions
  2. Найди и установи расширение JetBrains IDE Support в интернет-магазине Chrome.
  3. Подтверди добавление нового расширения в браузер Chrome.

После установки расширения, можно заняться отладкой JavaScript-кода в PhpStorm.


2. Установка точек останова

В редакторе PhpStorm можно установить точки останова. Точки останова — это строки кода, в которых отладчик приостанавливает выполнение программы и позволяет увидеть, что происходит внутри JavaScript-кода. Ты можешь установить или удалить точки останова, щёлкнув в любой строке кода c левой стороны от редактора или поместив курсор на строку кода использовать горячие клавиши Ctrl + F8 (Cmd + F8 на Mac OS X). IDE показывает точку останова, как большую красную точку с левой стороны от редактора.

PhpStorm: Внешний вид точки останова
Заметка

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


3. Запуск сеанса отладки

После добавления точек останова, ты можешь начать сеанс отладки. Это можно сделать, с помощью панели инструментов или создав конфигурацию отладки JavaScript-кода, с помощью главного меню PhpStorm [Run → Edit Configurations...]. Также ты можешь использовать контекстное меню файла, который нуждается в отладке, выбрав пункт Debug <filename>.

PhpStorm: Запуск сеанса отладки через контекстное меню

Последний способ создаст конфигурацию отладки за тебя, а также запустит браузер.

4. Отладка

После запуска сеанса отладки, PhpStorm приостанавливает выполнение программы в точке останова и выделяет строку исходного кода, которая ещё не обработана интерпретатором.

PhpStorm: результаты отладки в окне инструмента "Debug"

Затем в IDE открывается окно инструмента Debug, с помощью него ты можешь перемещаться по работающему коду и проверять значения переменных.


4.1. Пошаговое выполнение кода

С помощью иконок на панели инструментов или горячих клавиш ты можешь перемещаться по коду:

  • Step Into (F7) — выполнение следующего выражения, таким способом их можно проверять одно за другим.
  • Step Over (F8) — выполнение следующего выражения в целом, без перехода вглубь стека выполнения.
  • F9 — выполнение выражений до следующей точки останова.
PhpStorm: иконки используемые для перемещения по коду

4.2. Наблюдение

Если нужно проверить значение определённой переменной в разных частях программы, то ты можешь добавить эту переменную в список наблюдений, с помощью панели Watches. Таким образом, запустив сеанс отладки и выполняя код пошагово, ты сможешь видеть, какие значения имеет переменная в разных частях программы. Эта возможность помогает фокусироваться и анализировать только нужные переменные.

PhpStorm: панель "Watches"

4.3. Параметры точек останова и условные точки останова

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

Для этого с помощью главного меню IDE [Run → View Breakpoints] или горячих клавиш Ctrl + Shift + F8 (Cmd + Shift + F8 на Mac OS X) можно открыть диалоговое окно Breakpoints и настроить точки останова. Можно указать условие, при котором точка останова является допустимой, где отладчик должен приостановить выполнение программы. Например, когда переменная итератора i равна 3, как показано ниже:

PhpStorm: окно "Breakpoints"
Заметка

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


4.4. Изменение переменных при выполнении кода

При отладке также полезна возможность, которая позволяет изменять переменные прямо во время выполнения кода. Например, ты можешь изменить переменную для тестирования конкретного условия. Переменные можно редактировать во время выполнения с помощью пункта контекстного меню Set value... (F2) на панели Variables окна инструмента Debug.

PhpStorm: панель "Variables"

После установки нового значения любой переменной, можно продолжить отладку кода.

Заметка

Используя пункт контекстного меню Evaluate Expression..., ты можешь выполнить любое выражение во время сеанса отладки. Это полезно использовать для быстрой проверки условия, вызова другой функции и так далее.


5. Карты кода*

Отладчик JavaScript также позволяет тебе работать с картами кода. Это очень удобно при использовании минифицированного JavaScript-кода или таких языков, как CoffeeScript или TypeScript, которые компилируются в JavaScript.

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

PhpStorm: использование карты кода jQuery

При работе с языками, которые компилируются в JavaScript, также используется идея карт кода. Ты можешь установить точки останова в коде CoffeeScript или TypeScript и запустить сеанс отладки. Отладчик будет знать, как сопоставить выполняемый JavaScript-код с исходным файлом. Он отобразит точки останова в CoffeeScript или TypeScript, даже если браузер фактически выполняет код на JavaScript.

PhpStorm: использование карты кода TypeScript

6. Плагин Spy-js*

Также в PhpStorm для отладки JavaScript-кода можно использовать плагин Spy-js. Он позволяет заниматься отладкой без точек останова и профилированием без специальных инструментов. Spy-js использует исторические данные исполнения, чтобы предоставить отладочную информацию после запуска кода. Более подробную информацию о плагине Spy-js ты можешь найти в блоге PhpStorm.

Пункт является опциональным при изучении руководства: Отладка JavaScript в PhpStorm.

Контрольные вопросы
Источники и дополнительные материалы