Как разработчики программного обеспечения, мы проводим много времени, выясняя, что пошло не так. Для этого большинство из нас использует Chrome DevTools, а это отличный и мощный инструмент. DevTools знает все самое интересное, что связано с текущей средой выполнения, но не знает многого о том, как мы организуем наш код. Обычно мы пишем код в среде IDE, которая хорошо знает наш код, но не имеет информации о времени выполнения, необходимой для отладки.

Было бы неплохо иметь DevTools внутри IDE. Тогда мы могли бы писать и отлаживать наш код без переключения контекста и получать лучшее из обоих миров: полезную информацию о времени выполнения от DevTools и очень полезную навигацию IDE внутри нашего кода.

И мы можем! Да, мы могли сделать это раньше (с 2014 года), используя что-то вроде Spy-js, но для правильной работы требуется слишком много настроек, поэтому я не мог назвать это с удовольствием. Благодаря DevTools мы можем сделать это довольно легко в наших IDE.

Я покажу, как настроить отладчик внутри IntelliJ IDEA, но вы также можете сделать это в Visual Studio Code.

Лучше начать с простого примера, который позволяет нам познакомиться с отладкой в ​​IDE, которую мы можем настроить дальше. Я рекомендую репозиторий https://github.com/udacity/60fps в качестве первого кандидата для игры со встроенным отладчиком.

Итак, давайте клонируем его.

git clone https://github.com/udacity/60fps 60fps

Теперь откройте его в IntelliJ IDEA или WebStorm.

Откройте /lesson1/layoutPaint/index.html и выберите Run | 🐞 Debug 'index.html' в меню.

В браузере будет отображаться index.html, а в редакторе - Окно инструментов отладки.

Теперь мы готовы приступить к отладке. Установите точку останова на строке 40, щелкнув желоб рядом с номером строки.

Переключитесь в браузер и щелкните документ. После этого IDEA сосредоточится на редакторе, и вы увидите, что выполнение было остановлено в строке 40.

Как видите, IDEA уже показывает некоторую информацию о выражениях, например, что document.body.style.width равно пустой строке. Вы можете проверить это утверждение самостоятельно, используя действие «Оценить выражение». Вы можете найти это действие на панели инструментов отладчика.

Если вы нажмете кнопку «Оценить выражение», IDEA покажет вам окно с текстовым полем, где вы можете ввести выражение и оценить его.

Следовательно, в «document.body.style» нет «width». Вы также можете навести указатель на выражение, чтобы увидеть его значение.

Или, если вы предпочитаете клавиатуру, как я, вы можете установить курсор на выражение и нажать сочетание клавиш для «Quick Evaluate Expression».

Вы даже можете выбрать часть выражения или все выражение и оценить его.

Вы можете поиграть с оценкой и изучить код, используя «Объявление Goto», «Быстрая документация» и т. Д.

Пришло время пойти дальше. Как вы могли заметить, окно отладки похоже на DevTools. В нем есть информация о стеке вызовов и переменных, вкладка «Консоль», где вы также можете играть с кодом внутри текущего контекста времени выполнения, действиях « Step Over »,« Step Into »,« Step Out », которые позволяют контролировать выполнение.

Теперь вы можете нажать «Step Over», чтобы продолжить выполнение и проверить, к чему это приведет и как изменится состояние текущего приложения.

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

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

Реальные проекты намного больше и требуют установки среды разработки, но я пропущу этот шаг, потому что он немного выходит за рамки данной статьи. Я покажу, как настроить отладчик для проекта «webpack», но, поскольку настройка довольно проста, я не думаю, что у вас возникнут проблемы с внедрением его в свой собственный проект, даже если вы с помощью другого набора инструментов. Пойдем!

Я предполагаю, что вы уже установили webpack и webpack-dev-server. Первое, что нам нужно сделать, это добавить исходные карты ».

Важным параметром здесь является --devtool=eval-source-map, который добавляет исходные карты для нашего кода. Этот параметр необходим для правильного сопоставления кода, созданного «webpack», с исходным кодом.

Теперь давайте запустим «webpack-dev-server».

Неважно, как вы его запустите, из IDEA или терминала. В моем случае я запустил его из IDEA, и сервер запускается на «localhost: 8080».

Теперь давайте создадим конфигурацию отладки. Откройте диалоговое окно «Изменить конфигурации…».

и нажмите кнопку «Добавить новую конфигурацию».

Найдите и выберите «Отладка JavaScript».

Введите имя для этой конфигурации и вставьте URL-адрес, на котором работает наш сервер, в моем случае «localhost: 8080».

Нажмите «Применить», закройте окно и выберите Run | 🐞 Debug “index.html (Debug) в меню.

Установите «точку останова» и перезагрузите страницу.

И вуаля, вы готовы отлаживать свой код.

Должен ли я сказать, что вы тоже можете отлаживать свои тесты?

Я использовал этот процесс отладки не только для исправления ошибок, но и для изучения того, как работают различные библиотеки и фреймворки, такие как «Angularjs», «React», «MobX», «YourName».

Спасибо и удачной отладки! 🤓