Отладка JavaScript с помощью настоящего отладчика

Новый отладчик JavaScript, встроенный в Firefox, поможет писать код быстро и без ошибок. В последней версии отладчика Firefox мы откроем простое приложение, а затем запустим debugger.html, использовав клавиатурную комбинацию Option + Cmd + S на Mac или Shift + Ctrl + S в Windows. Отладчик разделён на три панели: панель списка файлов, панель исходного кода и панель инструментов.

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

Перестаньте использовать console.log

В этом примере мы используем debugger.html, чтобы отладить приложение по шагам и найти значение переменной.

Мы можем использовать debugger.html, чтобы заглянуть в исходный код приложения, просто добавив breakpoints. Эти точки говорят отладчику остановить выполнение программы на указанной строке. В этом примере мы добавим breakpoints на строке 13 файла app.js.

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

Вы также сможете посмотреть всю эту информацию в панели «Области».

Теперь, когда выполнение скрипта приостановлено, его можно выполнить по шагам, используя кнопки в панели инструментов. Назначение кнопки «Возобновить/Пауза» очевидно. «Перешагнуть через» перешагивает через текущую строку кода, «Зайти в» заходит в вызываемую функцию, а «Выйти из» выполняет скрипт до выхода из текущей функции.

Также можно использовать выражения для отслеживания, чтобы следить за значением переменной. Введите выражение в поле «Выражения для отслеживания«, и отладчик будет следить за ним по мере того, как вы выполняете код по шагам. В примере, приведенном выше, можно добавить выражения «title» и «to-do«, и отладчик выдаст их значения, когда они станут доступны. Это особенно полезно в следующих случаях:

  • Когда выполняете код по шагам и следите за изменением значений;
  • Отлаживаете один и тот же кусок исходного кода несколько раз и хотите оценить одни и те же выражения;

Вы также можете использовать debugger.html, чтобы отладить приложения React/Redux. Вот как это работает:

  • Найдите компонент, который вы хотите отладить.
  • Посмотрите на общий вид компонента (функции в классе).
  • Добавьте breakpoints в соответствующие функции.
  • Остановите выполнение и посмотрите на статус и свойства компонента.
  • Стек вызовов упрощён, поэтому вы сможете увидеть код о приложения, чередующийся с кодом фреймворка.

Также debugger.html позволяет увидеть скрытый или сжатый код, который может вызывать ошибки. Это полезно, когда вы имеете дело с популярными фреймворками, вроде React/Redux. Отладчик знает про компоненты, на которых вы остановили выполнение кода, и покажет упрощённый стек вызовов, компонент и свойства.

Инструменты разработчика с открытым исходным кодом

Проект debugger.html был запущен около двух лет назад одновременно с полной переработкой инструментов разработчика, встроенных в Firefox. Мы хотели перестроить инструменты разработчика, используя современные веб-технологии.

JavaScript необходим для любого продвинутого веб-приложения, поэтому надёжный отладчик – ключевая часть набора инструментов для разработчиков.

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

debugger.html построен при помощи React, Redux и Babel. Компоненты React легковесные, тестируемые и легкие в разработке. Мы используем React Storybook для быстрого прототипирования пользовательского интерфейса и документирования общих компонентов.

Наши компоненты протестированы с помощью Jest и Enzyme, что упрощает итерации обновления пользовательского интерфейса. Это упрощает работу с различными JavaScript-фреймворками.

front-end код на Babel позволяет отображать класс компонента и его функции в левой панели. А также фиксировать breakpoints к функциям так, чтобы они не перемещались, когда вы изменяете исходный код.

Действия Redux – это чистый API для пользовательского интерфейса, но они также могут быть использованы для создания отдельного отладчика CLI JS. В хранилище Redux есть селекторы для выбора текущего состояния отладки.

Модульное тестирование вызывает действия Redux и симулирует ответы браузера. Интеграционные тесты отладчика управляют браузером с отладчиком действий Redux. Функциональная архитектура сама по себе разработана так, чтобы быть тестируемой.

Мы полагались на сообщество разработчиков Mozilla на каждом этапе. Проект был размещён на GitHub, и наша команда связывалась с разработчиками по всему миру, чтобы получить их поддержку.

Когда мы начинали, автоматизированное тестирование было критически важным компонентом для разработки в сообществе. Тесты предотвращали регрессию и документировали поведение, которое легко можно было пропустить. Поэтому одним из шагов, которые мы предприняли, было добавление модульного тестирования действий в Redux и типов Flow для хранилища Redux. Сообщество помогло нам удостовериться, что тесты во Flow и Jest гарантировали, что все файлы задокументированы и протестированы.

Как разработчики, мы верим, что инструменты тем надёжнее, чем больше людей включилось в процесс их создания. Наша основная команда всегда была маленькой (2 человека). Но в среднем в нашей работе принимало участие 15 разработчиков в неделю. Сообщество вносит разнообразие во взглядах, что помогает справляться с возникающими трудностями и создавать функционал, о котором мы и не мечтали. Теперь мы формируем стек вызовов для 24 различных библиотек. Мы также показываем карту привязок в WebPack и Angular в дереве исходного кода.

Мы планируем переместить все инструменты разработчика Firefox на GitHub, чтобы они могли быть использованы и улучшены широкой аудиторией.

Мы будем рады вашему участию. Зайдите на страницу проекта debugger.html на GitHub, чтобы начать. Мы создали подробные инструкции, чтобы помочь запустить отладчик на вашем компьютере. Используйте его, чтобы выполнять отладку JavaScript-кода для чего угодно: браузеров, терминалов, серверов, смартфонов, роботов. И, если вы видите, как его можно улучшить, дайте нам знать через GitHub.

Вы можете загрузить текущую версию Firefox (и инструментов разработчика) здесь.

Перевод статьи “Debugging JavaScript With A Real Debugger You Did Not Know You Already Have” был подготовлен дружной командой проекта Сайтостроение от А до Я.