Javascript отладка: Отладка в браузере Chrome

Пункт является опциональным при изучении руководства: Отладка JavaScript в PhpStorm.

Контрольные вопросы

Источники и дополнительные материалы

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

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

Отладка Express

В Express используется внутренний модуль debug для регистрации информации о сопоставлениях маршрутов, используемых функциях промежуточной обработки, режиме приложения и выполнении цикла “запрос-ответ”.

debug можно сравнить с расширенной версией console.log, но, в отличие от console.log, в рабочем коде не нужно добавлять символы комментария к протоколам debug. Ведение протокола по умолчанию выключено, но его можно условно активировать с помощью среды переменной DEBUG.

Для просмотра всех внутренних протоколов, используемых в Express, при запуске приложения задайте для переменной среды DEBUG значение express:*.

$ DEBUG=express:* node index.js

В Windows используется соответствующая команда.

> set DEBUG=express:* & node index.js

При запуске этой команды в стандартном приложении, созданном с помощью генератора приложений Express, будет получен следующий вывод:

$ DEBUG=express:* node ./bin/www
  express:router:route new / +0ms
  express:router:layer new / +1ms
  express:router:route get / +1ms
  express:router:layer new / +0ms
  express:router:route new / +1ms
  express:router:layer new / +0ms
  express:router:route get / +0ms
  express:router:layer new / +0ms
  express:application compile etag weak +1ms
  express:application compile query parser extended +0ms
  express:application compile trust proxy false +0ms
  express:application booting in development mode +1ms
  express:router use / query +0ms
  express:router:layer new / +0ms
  express:router use / expressInit +0ms
  express:router:layer new / +0ms
  express:router use / favicon +1ms
  express:router:layer new / +0ms
  express:router use / logger +0ms
  express:router:layer new / +0ms
  express:router use / jsonParser +0ms
  express:router:layer new / +1ms
  express:router use / urlencodedParser +0ms
  express:router:layer new / +0ms
  express:router use / cookieParser +0ms
  express:router:layer new / +0ms
  express:router use / stylus +90ms
  express:router:layer new / +0ms
  express:router use / serveStatic +0ms
  express:router:layer new / +0ms
  express:router use / router +0ms
  express:router:layer new / +1ms
  express:router use /users router +0ms
  express:router:layer new /users +0ms
  express:router use / <anonymous> +0ms
  express:router:layer new / +0ms
  express:router use / <anonymous> +0ms
  express:router:layer new / +0ms
  express:router use / <anonymous> +0ms
  express:router:layer new / +0ms

При последующем запросе, адресованном приложению, вы увидите протоколы, заданные в коде Express:

  express:router dispatching GET / +4h
  express:router query  : / +2ms
  express:router expressInit  : / +0ms
  express:router favicon  : / +0ms
  express:router logger  : / +1ms
  express:router jsonParser  : / +0ms
  express:router urlencodedParser  : / +1ms
  express:router cookieParser  : / +0ms
  express:router stylus  : / +0ms
  express:router serveStatic  : / +2ms
  express:router router  : / +2ms
  express:router dispatching GET / +1ms
  express:view lookup "index.pug" +338ms
  express:view stat "/projects/example/views/index.pug" +0ms
  express:view render "/projects/example/views/index.pug" +1ms

Для просмотра протоколов только из реализации маршрутизатора, задайте для переменной DEBUG значение express:router. Аналгичным образом, для просмотра протоколов только из реализации приложения, задайте для переменной DEBUG значение express:application и т.д.

Приложения, генерируемые с помощью команды

Приложение, генерируемое с помощью команды express, также использует модуль debug, и область действия пространства имен отладки определяется именем приложения.

Например, если приложение сгенерировано с помощью команды $ express sample-app, операторы отладки (операторы debug) можно активировать с помощью следующей команды:

$ DEBUG=sample-app:* node ./bin/www

Можно указать несколько пространств имен для отладки, путем ввода списка имен через запятую:

$ DEBUG=http,mail,express:* node index.js

Дополнительная информация о модуле debug приведена на странице debug.

Отладка JavaScript — разработчики Chrome

Из этого руководства вы узнаете, как отладить любую проблему с JavaScript в DevTools. Прочтите или посмотрите видеоверсию этого руководства ниже.

Шаг 1. Воспроизведение ошибки #

Поиск серии действий, которые последовательно воспроизводят ошибку, всегда является первым шагом к отладке.

1. Щелкните Открыть демонстрацию . Демо откроется в новой вкладке.

   Open Demo

2. Введите 5 в текстовое поле Number 1 .

3. Введите 1 в текстовое поле Номер 2 .

4. Щелкните Добавить номер 1 и номер 2 . Метка под кнопкой гласит: 5 + 1 = 51 . Результат должен быть 6 . Это ошибка, которую вы собираетесь исправить.

   Рисунок 1 . Результат 5 + 1 — 51. Должно быть 6.

Шаг 2. Ознакомьтесь с пользовательским интерфейсом панели «Источники» #

DevTools предоставляет множество различных инструментов для различных задач, таких как изменение CSS, загрузка страницы профилирования. производительность и мониторинг сетевых запросов.Панель Sources — это то место, где вы отлаживаете JavaScript.

1. Откройте DevTools, нажав Command + Option + I (Mac) или Control + Shift + I (Windows, Linux). Этот ярлык открывает панель консоли .

   Рисунок 2 . Консоль Панель

2. Щелкните вкладку Источники .

   Рисунок 3 . Панель Sources

Пользовательский интерфейс панели Sources состоит из 3 частей:

Рисунок 4 .3 части панели Sources UI

1. Панель File Navigator . Здесь перечислены все файлы, запрашиваемые страницей.
2. Панель редактора кода . После выбора файла на панели File Navigator содержимое этого файла отображается здесь.
3. Панель Отладка JavaScript . Различные инструменты для проверки JavaScript страницы. Если ваше окно DevTools широкое, эта панель отображается справа от панели редактора кода .

Шаг 3. Приостановите выполнение кода с помощью точки останова #

Распространенный метод отладки подобной проблемы — вставить в код множество операторов console.log () , чтобы проверить значения в качестве сценария. выполняет. Например:

  function updateLabel () {
 var addend1 = getNumber1 (); 
 console.log ('добавление1:', добавление1); 
 var addend2 = getNumber2 (); 
 console.log ('добавление2:', добавление2); 
 var sum = addend1 + addend2; 
 консоль.журнал ('сумма:', сумма); 
 label.textContent = addend1 + '+' + addend2 + '=' + сумма; 
}  

Метод console.log () может выполнить работу, но точки останова , могут выполнить ее быстрее. Точка останова позволяет вам приостановить ваш код в середине его выполнения и проверить все значения в этот момент времени. Точки останова имеют несколько преимуществ по сравнению с методом console.log () :

• При использовании console.log () вам нужно вручную открыть исходный код, найти соответствующий код, вставить консоль .log () , а затем перезагрузите страницу, чтобы увидеть сообщения в консоли. С помощью точек останова вы можете приостановить выполнение соответствующего кода, даже не зная, как он структурирован.
• В операторах console.log () вам необходимо явно указать каждое значение, которое вы хотите проверить. С помощью точек останова DevTools показывает вам значения всех переменных на данный момент времени. Иногда на ваш код влияют переменные, о которых вы даже не подозреваете.

Короче говоря, точки останова могут помочь вам находить и исправлять ошибки быстрее, чем консоль .log () метод.

Если вы сделаете шаг назад и подумаете о том, как работает приложение, вы сможете сделать обоснованное предположение, что неверная сумма ( 5 + 1 = 51 ) вычисляется в прослушивателе событий click , который связан с Add Номер 1 и номер 2 кнопки. Следовательно, вы, вероятно, захотите приостановить код примерно в то время, когда click выполняет прослушиватель. Точки останова прослушивателя событий позволяют сделать именно это:

1. На панели Отладка JavaScript щелкните Точки останова прослушивателя событий , чтобы развернуть раздел.DevTools показывает список расширяемых категорий событий, таких как Animation и Clipboard .

2. Рядом с категорией событий Мышь щелкните Развернуть . DevTools показывает список событий мыши, таких как click и mousedown . Рядом с каждым событием есть флажок.

3. Установите флажок щелкните . DevTools теперь настроен на автоматическую паузу при выполнении любого щелчка прослушивателя событий.

   Рисунок 5 . Флажок щелкните включен

4. Вернувшись к демонстрации, снова щелкните Добавить номер 1 и номер 2 . DevTools приостанавливает демонстрацию и выделяет строку кода на панели Sources . DevTools следует приостановить на этой строке кода:

     function onClick () { 

   Если вы остановились на другой строке кода, нажимайте Возобновить выполнение сценария , пока не остановитесь на правильной строке.

   Примечание : Если вы остановились на другой строке, у вас есть расширение браузера, которое регистрирует прослушиватель событий click на каждой странице, которую вы посещаете. Вы были приостановлены в прослушивателе click расширения. Если вы используете режим инкогнито для приватного просмотра, который отключает все расширения, вы можете видеть, что каждый раз останавливаетесь на правильной строке кода.

Точки останова прослушивателя событий — это лишь один из многих типов точек останова, доступных в DevTools.Стоит запомнить все различные типы, потому что каждый тип в конечном итоге помогает вам как можно быстрее отлаживать разные сценарии. См. Раздел Приостановка кода с помощью точек останова, чтобы узнать, когда и как использовать каждый тип.

Шаг 4. Выполните код #

Одна из частых причин ошибок — выполнение сценария в неправильном порядке. Пошаговое выполнение кода позволяет вам пройти через выполнение кода, по одной строке за раз, и точно определить, где он выполняется, в другом порядке, чем вы ожидали.Попробуйте прямо сейчас:

1. На панели «Источники » DevTools щелкните Перейти к следующему вызову функции для пошагового выполнения функции onClick () , по одной строке за раз. DevTools выделяет следующую строку кода:

     if (inputsAreEmpty ()) { 

2. Щелкните Перейти к следующему вызову функции . DevTools выполняет inputsAreEmpty () , не заходя в него. Обратите внимание, как DevTools пропускает несколько строк кода.Это связано с тем, что inputsAreEmpty () имеет значение false, поэтому блок кода оператора if не был выполнен.

Это основная идея пошагового выполнения кода. Если вы посмотрите на код в get-start.js , вы увидите, что ошибка, вероятно, находится где-то в функции updateLabel () . Вместо того, чтобы проходить каждую строку кода, вы можете использовать другой тип точки останова, чтобы приостановить код ближе к вероятному месту ошибки.

Шаг 5: Установите точку останова по строке кода #

Точки останова по строке кода являются наиболее распространенным типом точки останова. Когда у вас есть конкретная строка кода, которую вы хотите приостановить, используйте точку останова на строку кода:

1. Посмотрите на последнюю строку кода в updateLabel () :

     label.textContent = addend1 + '+' + addend2 + '=' + сумма;  

2. Слева от кода вы можете увидеть номер строки этой конкретной строки кода, то есть 32 .Щелкните 32 . DevTools помещает синий значок поверх 32 . Это означает, что на этой строке есть точка останова на строке кода. DevTools теперь всегда приостанавливается перед выполнением этой строки кода.

3. Щелкните Возобновить выполнение сценария . Сценарий продолжает выполнение, пока не достигнет строки 32. В строках 29, 30 и 31 DevTools распечатывает значения addend1 , addend2 и sum справа от точки с запятой в каждой строке.

   Рисунок 6 . DevTools делает паузу на точке останова на строке кода в строке 32

Шаг 6. Проверка значений переменных #

Значения addend1 , addend2 и сумма выглядят подозрительно. Они заключены в кавычки, что означает, что это строки. Это хорошая гипотеза для объяснения причины ошибки. Пришло время собрать больше информации. DevTools предоставляет множество инструментов для проверки значений переменных.

Метод 1. Панель «Область действия» #

Когда вы останавливаетесь на строке кода, панель Область действия показывает, какие локальные и глобальные переменные определены в настоящее время, а также значение каждой переменной.Он также показывает закрывающие переменные, если применимо. Дважды щелкните значение переменной, чтобы отредактировать его. Когда вы не остановились на строке кода, панель Scope пуста.

Рисунок 7 . Область Область

Метод 2: Наблюдать за выражениями #

Вкладка Наблюдать за выражениями позволяет отслеживать значения переменных во времени. Как следует из названия, Watch Expressions не ограничиваются только переменными. Вы можете сохранить любое допустимое выражение JavaScript в выражении Watch Expression.Попробуйте прямо сейчас:

1. Щелкните вкладку Watch .

2. Щелкните Добавить выражение .

3. Тип Тип суммы .

4. Нажмите Enter. DevTools показывает сумму типа : "строка" . Значение справа от двоеточия является результатом вашего Watch Expression.

   Рисунок 8 . Панель Watch Expression (внизу справа) после создания суммы типа Watch Expression.Если ваше окно DevTools большое, панель Watch Expression находится справа, над панелью Точки останова прослушивателя событий .

Как и предполагалось, сумма оценивается как строка, тогда как она должна быть числом. Теперь вы подтвердили, что это причина ошибки.

Метод 3: Консоль #

Помимо просмотра сообщений console.log () , вы также можете использовать консоль для оценки произвольных операторов JavaScript. Что касается отладки, вы можете использовать консоль для проверки возможных исправлений ошибок.Попробуйте сейчас:

1. Если у вас не открыт ящик консоли, нажмите Escape, чтобы открыть его. Он открывается в нижней части окна DevTools.

2. В консоли введите parseInt (addend1) + parseInt (addend2) . Этот оператор работает, потому что вы приостановлены на строке кода, в области действия которой находятся addend1 и addend2 .

3. Нажмите Enter. DevTools оценивает оператор и распечатывает 6 , что и является результатом, который вы ожидаете от демонстрации.

   Рисунок 9 . Панель консоли после оценки parseInt (addend1) + parseInt (addend2) .

Шаг 7. Примените исправление #

Вы нашли исправление для ошибки. Осталось только опробовать исправление, отредактировав код и повторно запустив демонстрацию. Вам не нужно покидать DevTools, чтобы применить исправление. Вы можете редактировать код JavaScript прямо в пользовательском интерфейсе DevTools. Попробуйте сейчас:

1. Щелкните Возобновить выполнение сценария .
2. В редакторе кода замените строку 31, var sum = addend1 + addend2 , на var sum = parseInt (addend1) + parseInt (addend2) .
3. Нажмите Command + S (Mac) или Control + S (Windows, Linux), чтобы сохранить изменения.
4. Щелкните Деактивировать точки останова . Он изменится на синий, чтобы указать, что он активен. Пока это установлено, DevTools игнорирует любые установленные вами точки останова.
5. Попробуйте демо с другими значениями. Демо теперь рассчитывает правильно.

Внимание: Этот рабочий процесс применяет исправление только к коду, который выполняется в вашем браузере. Это не исправит код для всех пользователей, посещающих вашу страницу.Для этого вам нужно исправить код, который находится на ваших серверах.

Следующие шаги #

Поздравляем! Теперь вы знаете, как максимально эффективно использовать Chrome DevTools при отладке JavaScript. Инструменты и методы, которые вы изучили в этом руководстве, могут сэкономить вам бесчисленное количество часов.

В этом руководстве показаны только два способа установки точек останова. DevTools предлагает множество других способов, в том числе:

• Условные точки останова, которые срабатывают только тогда, когда указанное вами условие истинно.
• Точки останова для пойманных или неперехваченных исключений.
• Точки останова XHR, которые срабатывают, когда запрошенный URL совпадает с предоставленной вами подстрокой.

См. «Приостановите код с точками останова», чтобы узнать, когда и как использовать каждый тип.

Есть несколько элементов управления пошаговым выполнением кода, которые не были объяснены в этом руководстве. Дополнительные сведения см. В разделе «Переход через строку кода».

Как отлаживать JavaScript как профессионал

Мой процесс отладки действительно прост.Это всего лишь два шага, которые повторяются последовательно.

1. Определите последний рабочий фрагмент кода. Если в окне консоли обнаружена ошибка, он сообщит вам номер строки кода, в котором возникла ошибка. Начни там. Если нет, перейдите к самому первому запускаемому фрагменту кода в вашем скрипте.
2. Используйте console.log () для регистрации всей своей работы в окне консоли. Если вы используете захват элемента в DOM с помощью querySelector, зарегистрируйте его и убедитесь, что вы действительно получаете элемент.Продолжайте работать с кодом, пока не найдете то, что ведет себя не так, как вы ожидали.

Я был очень рад, когда на этой неделе Стив Гриффит выпустил видео об отладке за пределами console.log () .

В будущем я напишу описание советов в его видео, а пока посмотрите его потрясающее видео, если вы хотите узнать, как отлаживать более эффективно. Я узнал тонну!

🚀 Последний шанс присоединиться! Новая сессия Vanilla JS Academy только началась, но еще не поздно присоединиться.Зарегистрируйтесь сегодня и сэкономьте 25%. Щелкните здесь, чтобы присоединиться.

Понравилось? Я отправляю короткие электронные письма каждый будний день с фрагментами кода, инструментами, методами и интересными вещами со всего Интернета. Присоединяйтесь к 12 100+ ежедневным подписчикам.

Сделано с ❤️ в Массачусетсе. Если не указано иное, весь код можно использовать бесплатно в соответствии с Лицензией MIT. Я также очень нерегулярно делюсь мыслями, не связанными с кодированием.

VS Code получает новый отладчик JavaScript — ADTmag

Новости

VS Code получает новый отладчик JavaScript

Ежемесячное обновление Microsoft для своего чрезвычайно популярного кроссплатформенного редактора кода Visual Studio с открытым исходным кодом содержит новый отладчик JavaScript.

Работая с Node.js и Chrome, отладчик, который работал в течение нескольких месяцев, теперь является опцией по умолчанию в обновлении за июнь 2020 года или VS Code 1.47.

Функции и возможности отладчика, перечисленные на его сайте GitHub, включают:

• Отладка дочернего процесса и рабочих
• Отладка процессов Node.js в терминале
• Опора профилирования
• Простая отладка скриптов npm
• Автоматическая отладка браузера
• Контрольные точки для КИП
• Лучшее автозаполнение в консоли отладки
• Перехват возвращаемого значения
• Ожидание верхнего уровня
• Минифицированные источники с красивым шрифтом
• Поддержка Microsoft Edge и WebView2
• Лучшее поведение карты источников и точки останова
• Копировать значения в стеке вызовов

Кроме того, сообщение на этой неделе, объявляющее VS Code 1.47 списков:

• Отладка одного файла: Это обеспечивает функциональность, присутствующую в других расширениях отладки, с новыми значками в области заголовка, указывающими, что отладку можно запустить нажатием кнопки.
[Щелкните изображение, чтобы увеличить.] Если один или оба этих значка отображаются в левой части области заголовка редактора, то запуск или отладка файла в редакторе выполняется одним щелчком мыши. (источник: Microsoft).
• Менее загроможденный вид CALL STACK: Это достигается за счет сокрытия узлов сеанса отладки, которые существуют по техническим причинам, но не представляют большой ценности для пользователей.
• Новый псевдоним команды Set Next Statement для Jump to Cursor: Чтобы сделать команду Jump to Cursor более доступной для пользователей из Visual Studio, команда разработчиков добавила псевдоним команды Set Next Statement.
• Путь к точке останова при наведении: В представлении BREAKPOINTS при наведении курсора на исходную точку останова отображается ее абсолютный путь.

Помимо всего этого совершенства отладки JavaScript, выпуск VS Code за июнь 2020 года включает:

Все вышеперечисленное и многое другое более подробно представлено в анонсе.

Об авторе

Дэвид Рамел — редактор и писатель Converge360.

Отладка JavaScript с помощью настоящего отладчика, о котором вы уже не знали — Smashing Magazine

Об авторе

Дастин Драйвер — опытный и солидный журналист и технический писатель, который набрал зубы в газетном бизнесе и в играх по веб-дизайну и разработке .В настоящее время он… Больше о Дастин Драйвер ↬

JavaScript необходим для любого продвинутого веб-приложения, поэтому надежный отладчик является ключевой частью набора инструментов. В этой статье вы узнаете, как новый отладчик Firefox JavaScript может помочь вам писать быстрый код без ошибок.

console.log может многое рассказать о вашем приложении, но не может по-настоящему отладить ваш код. Для этого вам понадобится полноценный отладчик JavaScript. Новый отладчик JavaScript в Firefox поможет вам писать быстрый код без ошибок.Вот как это работает.

В этом примере мы откроем очень простое приложение для выполнения с помощью отладчика. Вот приложение, основанное на базовых фреймворках JavaScript с открытым исходным кодом. Откройте его в последней версии Firefox Developer Edition, а затем запустите debugger.html , нажав Option + Cmd + S на Mac или Shift + Ctrl + S в Windows. Отладчик разделен на три панели: панель списка источников, панель источников и панель инструментов.

 
 1 
 
 console.log («Наконец-то я здесь» + переменная); 
 

 
 4 
 
 "start": "node cli.js ", 
 
 5 
 
" start: debug ":" ndb node cli.js ", 
 
 7 
 
" test: debug ":" ndb jest "