А вы знали, что в новую версию 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.
После запуска отладчика вы увидите, что он разделен на три части:
- блок со списком файлов слева;
- блок с самим кодом приложения в центре;
- панель с инструментами справа.
Нам для отладки больше интересна сама панель инструментария разработчиков. На ней вы найдете:
- toolbar;
- использование выражений для отслеживания;
- точку останова;
- стэк вызовов;
- возможности применения.
Нужно помнить, что одним из главных отличий отладчика JavaScript в Firefox от стандартной «Консоли» является то, что отладчик способен глубоко «прогружаться» в исходный код. Поэтому не нужно забывать добавлять точки останова на какой-нибудь строке, для того чтобы Дебаггер смог встать на паузу, а вы смогли посмотреть и изучить код.
Добавляйте точки останова, добавляйте списки задач и ждите, пока Дебаггер станет на паузу в «точке». После старта отладки мы можем просматривать значение функций и переменных, наводя на них курсором. Помимо этого, возможно просматривать наличие якорей, апплетов, дочерних элементов и т.д. https://fizzslotscasino.info
Также, пока отладчик Firefox стоит в «паузе» в точке останова, мы можем использовать тулбар. При помощи него можно просмотреть выполнение скрипта построчно.
Вдобавок ко всему, в Debugger возможно отслеживать изменения значений переменной, используя выражение для отслеживания. Для этого нужно всего лишь вписать нужное выражение в панели «Выражения для отслеживания». Это полезно использовать, когда вы хотите:
- пошагово выполнять код и следить за тем, как изменяется выбранное значение;
- отслеживать один «кусок» программы несколько раз, чтобы отследить общее изменение значений;
- просто понять, как так случилось, что не функционирует ваша кнопка.
Отладчик в Firefox способен отлаживать не только код JavaScript, но он также он может отладить код приложения, разработанного на React/Redux. В целом Дебаггер позволяет просматривать и отлаживать спутанный и минифицированный код программы, вызывающий ошибку. То есть типичный код молодых программистов.
Отладка JavaScript в Firefox, в частности сам Debugger, нужно изучать, чтобы иметь возможность правильно им пользоваться. Для этого команда Firefox опубликовала подробный список инструкций, как правильно запустить их отладчик на своем ПК. Все, что остается, — это найти их страницу на GitHub и изучить именно тот момент отладки, который вас интересует.
JavaScript
