JavaScript

Отладка JavaScript в Firefox с помощью Debugger. Подробная инструкция

Lorem ipsum dolor

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

Отладка JavaScript в Firefox, в частности сам Debugger, нужно изучать, чтобы иметь возможность правильно им пользоваться. Для этого команда Firefox опубликовала подробный список инструкций, как правильно запустить их отладчик на своем ПК. Все, что остается, — это найти их страницу на GitHub и изучить именно тот момент отладки, который вас интересует.

 

Схожие статьи

Что значит JavaScript Error: учимся дебажить JavaScript на примерах
JavaScript

Что значит JavaScript Error: учимся дебажить JavaScript на примерах

JSX. Что это за расширение, где и для чего оно используется
JavaScript

JSX. Что это за расширение, где и для чего оно используется

Метод Map в JavaScript. Описание для новичков и сфера применения
JavaScript

Метод Map в JavaScript. Описание для новичков и сфера применения

Что лучше: Java или C? Сравнительная характеристика, плюсы и минусы
JavaScript

Что лучше: Java или C? Сравнительная характеристика, плюсы и минусы