Данный материал является вольным переводом статьи:
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. Первая итерация закончена и включена в ночную сборку. Вы можете попробовать отладчик там.
##Примите участие
Как уже упоминалось выше, проект находится в разработке, мы будем благодарны за вашу помощь в создании, возможно, лучшего отладчика. Если вы хотите присоединиться к нам, пожалуйста, ознакомьтесь с руководством контрибьютера.