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

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

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

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

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

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

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

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

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

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

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

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

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

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

Также можно использовать выражения для отслеживания, чтобы следить за значением переменной. Введите выражение в поле ввода «Выражения для отслеживания«, и отладчик будет следить за ним по мере того, как вы выполняете программный код по шагам. В примере, приведенном выше, можно добавить выражения «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(и инструментов разработчика) здесь.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *