Знакомство с debugger.html


Данный материал является вольным переводом статьи:
Bryan Clark Introducing debugger.html

debugger.html — современный JavaScript отладчик от Mozilla, сделанный на React и Redux. Проект начался в начале этого года в попытке заменить Firefox Developer Tools. Помимо этого мы хотели сделать отладчик с возможностью отладки нескольких целей и функционирования в стандартном режиме.

В данный момент debugger.html можно подключить к Firefox, а так же в экспериментальном режиме связать с Chrome и Node. Отладчик подключается при помощи Mozilla’s Remote Debug Protocol (RDP) и взаимодействует с Node и Chrome используя Chrome’s RDP.

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

debugger.html

Пользовательский интерфейс разделён на три области: панель исходников, панель редактирования и правый сайдбар.

  • Панель исходников показывает дерево всех исходников для отлаживаемого в данный момент приложения.
  • Панель редактирования используется для отображения содержимого файлов исходников, установки брейкпоинтов и улучшения форматирования исходников.
  • Правый сайдбар текущие установленные брейкпоинт, текущий вызов стека и области видимости переменных, когда отладчик находится в паузе
    • Отладчик поддерживает паузу, step over, step in, step out и запуск функций для отладки вашего JavaScript.
    • Панель вызова стека отображает фреймы вызова стека для состояний в паузе, а панель областей видимости показывает раскрываемое дерево переменных на основе выбранного фрейма.

Приступая к работе

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

Если вы хотите сразу приступить к работе, выполните следующие команды:

npm install - установите зависимости
npm start - запустите сервер разработки
open http://localhost:8000 - откройте в любом современном браузере

После того как вы открыли отладчик в браузере главная страница отладчика будет отображать список целей для отладки, которые мы можете выбрать. Для того чтобы подключить отладчик и начать работу, цель должна быть запущена с возможностью удаленной отладки. Обычно это требует установки нескольких флагов. Например, если вы хотите запустить Firefox на MacOS вы должен включить отладку с помощью следующей команды.

$ /Applications/Firefox.app/Contents/MacOS/firefox-bin –start-**debugger**-server 6080 -P development

Другие опции для Chrome и Firefox вы можете найти здесь.

Отладка Node требует наличия у вас версии 6.3.0 или выше. Node вы должны запускать со специальным флагом. Например, если вы хотите отлаживать myserver.js вы должны использовать следующую команду.

$ node –inspect myserver.js

Больше информации вы можете получить в руководстве к началу работы.

Firefox Developer Tools

Мы интегрируем отладчик в Developer Tools для Firefox. Первая итерация закончена и включена в ночную сборку. Вы можете попробовать отладчик там.

Примите участие

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