А вы знали, что в новую версию Firefox встроен обалденный отладчик Debugger для языка JavaScript. Данный отладчик был встроен в «Лису» в новую версию браузера Quantum. На тот момент разработчики решили кардинально пересмотреть инструментарий разработчиков в своем продукте, чтобы он соответствовал современным технологическим требованиям к веб-разработке.
Ведь как мы знаем, любое современное, продвинутое приложение так или иначе содержит код JavaScript, поэтому отличный отладчик в Firefox – это как раз то, что надо.
Отладчик Debugger в Firefox
Сам Дебаггер разработан с использованием технологий React, Redux и Babel. Именно поэтому получился надежный, шустрый, адаптивный и легкий отладчик. Плюс, использование популярных технологий позволило «войти» в более тесный контакт с сообществом современных разработчиков. Все на одной «волне».
Любой компонент React — легковесный, легко тестируемый и легок в разработке. В Debugger используется React Storybook, поэтому удалось достичь скоростного использования интерфейса пользователя и документирования используемых компонентов.
Весь «Front» написан с использованием Babel. Поэтому есть возможность в левой панели выводить функции и класс компонентов отладки. И технология построена так, чтобы не было перемещений функций, когда вы будете изменять исходный код.
Redux используется для взаимодействия с API интерфейса пользователя, но также может использоваться при создании дополнительного отладчика для CLI JS. Наличие специальных селекторов в Redux, позволяет в любой момент просмотреть текущее состояние отладки.
Сам проект Debugger-отладчик в Firefox был выложен в открытый доступ на GitHub. Это позволило программистам со всего мира участвовать и давать обратную связь о разработке отладчика. Это позволило добиться колоссального результата, потому что продукт был протестирован теми, для кого он создавался еще на стадии разработки. Поэтому в нем в процессе создания добавился дополнительный функционал, который не планировался изначально. Так как в процессе общей «работы» над отладчиком, программисты предоставляли качественную обратную связь о возникающих трудностях в отладке кода и о желаемых функциях Debugger.
Поэтому продукт получился качественным. А команда разработчиков Firefox и дальше планирует работать в такой же системе — открыто на ГитХабе, чтобы инструменты браузера смогли улучшаться его же пользователями самостоятельно.
Отладка JavaScript в Firefox при помощи Debugger
По старинке часто для отладки кода применяется console.log. Да, это безусловно частично спасало ситуацию, но «консоль» не способна по-настоящему осуществить отладку. Все что делает console , так это «рассказывает» вам о вашем приложении и не более того.
Поэтому в Firefox решили добавить настоящий отладчик JavaScript.
Чтобы им воспользоваться, нужно сделать следующее:
• открыть приложение для отладки;
• запустить debugger.html.
После запуска отладчика, вы увидите, что он разделен на три части:
1. блок со списком файлов слева;
2. блок с самим кодом приложения в центре;
3. панель с инструментами справа.
Нам для отладки больше интересна сама панель инструментария разработчиков. На ней вы найдете:
- toolbar;
- использование выражений для отслеживания;
- точку останова;
- стэк вызовов;
- возможности применения.
Нужно помнить, что одно из главных отличий отладчика JavaScript в Firefox от стандартной “Консоли” является то, что отладчик способен глубоко «прогружаться» в исходный код. Поэтому не нужно забывать добавлять точки останова на на какой-нибудь строке, для того чтоб Дебаггер смог стать на паузу, а вы смогли посмотреть и изучить код.
Добавляйте точки останова, добавляйте списки задач и ждите пока дебаггер станет на паузу в «точке». После старта отладки, мы можем просматривать значение функций и переменных, наводя на них курсором. Также возможно просматривать наличие якорей, апплетов, дочерних элементов и т.д.
Также, пока отладчик Firefox стоит в “паузе” в точке останова, мы можем использовать тулбар. При помощи него можно просмотреть выполнение скрипта построчно.
Также в Debugger возможно отслеживать изменения значений переменной, используя выражение для отслеживания. Для этого нужно всего-лишь вписать нужное выражение в панели «Выражения для отслеживания». Это полезно использовать, когда вы хотите:
- пошагово выполнять код и следить за тем, как изменяется выбранное значение;
- отслеживать один “кусок” программы несколько раз, чтобы отследить общее изменение значений;
- просто понять, как так случилось, что не функционирует ваша кнопка.
Заключение
Отладчик в Firefox способен отлаживать не только код JavaScript, но также он может отладить код приложения, разработанного на React/Redux. В целом Дебаггер позволяет просматривать и отлаживать спутанный и минифицированный код программы, вызывающий ошибку. То есть типичный код молодых программистов.
Возможно вам будет интересно почитать “Все о Firefox Quantum”
Отладка JavaScript в Firefox, и в частности сам Debugger, нужно изучать, чтобы иметь возможность правильно им пользоваться. Для этого команда Firefox опубликовала подробный список инструкций, как правильно запустить их отладчик на своем ПК. Все что остается — это найти их страницу на GitHub и изучить именно тот момент отладки, который вас интересует.
