Top.Mail.Ru

Debugger Firefox = отладка JavaScript

А вы знали, что в новую версию 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 и изучить именно тот момент отладки, который вас интересует.

Text.ru - 100.00%
Поделись статьей с друзьями!
Поделиться с друзьями:

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