Перестаньте использовать console.log

В этом примере мы используем debugger.html для пошаговой отладки приложения и нахождения значения переменной.

Мы можем использовать debugger.html для проверки исходного кода приложения, просто добавляя точки останова. Эти точки предписывают отладчику остановить выполнение программы на указанной строке. В этом примере мы добавим точки останова в строку 13 файла app.js.

Теперь добавьте действие в список. Код остановится на функции addTodo, и мы сможем ввести исходный код, чтобы увидеть вставленное значение и многое другое. Наведите указатель мыши на переменную, чтобы увидеть ее значение и другие свойства. Вы сможете увидеть свойства якорей, апплетов, дочерних элементов и т.д.

Асинхронная отладка JavaScript с помощью Chrome DevTools

Вы также можете увидеть всю эту информацию на панели «Области».

Теперь, когда сценарий приостановлен, вы можете прокручивать его с помощью кнопок на панели инструментов. Назначение кнопки «Возобновить / Пауза» очевидно. Go To Go к текущей строке кода, Go To Go к вызываемой функции и Exit выполняет сценарий до тех пор, пока вы не выйдете из текущей функции.

Вы также можете использовать выражения отслеживания для отслеживания значения переменной. Введите выражение в поле «Выражения для проверки», и отладчик будет отслеживать его по мере выполнения кода. В приведенном выше примере вы можете добавить выражения «title» и «to-do», и отладчик отобразит их значения, когда они будут доступны. Это особенно полезно в следующих случаях:

• Когда вы просматриваете код и наблюдаете, как меняются значения;
• Отлаживайте один и тот же фрагмент исходного кода несколько раз и хотите оценить одни и те же выражения;

Вы также можете использовать debugger.html для отладки приложений React / Redux. Вот как это работает:

• Найдите компонент, который нужно отлаживать.
• Посмотрите на общий вид компонента (функции в классе).
• Добавьте точки останова в соответствующие функции.
• Остановите работу и посмотрите на состояние и свойства компонента.
• Стек вызовов был упрощен, поэтому вы можете видеть, как код приложения чередуется с кодом фреймворка.

Debugger.html также позволяет увидеть скрытый или сжатый код, который может вызывать ошибки. Это полезно при работе с популярными фреймворками, такими как React / Redux. Отладчик знает компоненты, на которых вы остановили свой код, и покажет вам упрощенный стек вызовов, компонент и свойства.

Internet Explorer

• Откройте ваш браузер.
• Выберите в меню Инструменты.
• В меню «Инструменты» выберите «Инструменты разработчика.
• Наконец, выберите свою консоль.

Chrome

• Откройте ваш браузер.
• В меню «выберите» Дополнительные инструменты».
• В разделе «Инструменты» выберите «Инструменты разработчика».
• Наконец, выберите «Консоль».

Основные инструменты отладки браузеров

Обычно вы включаете отладку в своем браузере с помощью F12 и выбираете «Консоль» в меню отладчика.

В противном случае выполните следующие действия:

Точки остановки (Break Points)

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

Чтобы вставить точку останова в определенную строку, просто щелкните IDEA слева от этой строки. Пример:

В результате строка будет отмечена точкой останова, и Intellij IDEA выделит ее красным цветом:

Второй щелчок мышью на левой панели кода удалит установленную точку останова.

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

Отладчики JavaScript

Отладка сложна. К счастью, все современные браузеры имеют встроенный отладчик JavaScript.

Встроенные отладчики можно включать и выключать, заставляя пользователя сообщать об ошибках.

С помощью отладчика вы также можете устанавливать точки останова (места, где выполнение кода может остановиться) и проверять переменные во время выполнения кода.

Если нет, обычно следуйте инструкциям внизу этой страницы, активируйте отладку в своем браузере с помощью клавиши F12 и выберите «Консоль» в меню отладчика.

Команда Debugger

Выполнение кода также можно приостановить с помощью команды отладчика непосредственно из самого кода:

функция привет (имя) {let предложение = `Привет, $ {имя}!`; отладчик; // <- здесь прерывается выполнение say (предложение); }

Этот метод удобен тем, что вы можете продолжить работу в редакторе кода, не заходя в браузер для установки точки останова.

Установка точек останова

В окне отладчика вы можете установить точки останова в коде JavaScript.

В каждой точке останова JavaScript прекращает выполнение и позволяет вам проверить значения JavaScript.

После просмотра значений вы можете возобновить выполнение кода (обычно с помощью кнопки воспроизведения).

Safari

• Перейдите в Safari, Настройки, Дополнительно в главном меню
• Установите флажок «Включить отображение меню дизайна в строке меню».
• Когда в папке»:
  выберите «Показать консоль ошибок».

Opera

• Откройте ваш браузер.
• Перейдите на веб-страницу:
  http://dev.Opera.com
• Следуйте инструкциям, чтобы:
  Добавьте кнопку консоли разработчика на панель инструментов.

Остановимся и оглядимся

В нашем примере функция hello () вызывается во время загрузки страницы, поэтому самый простой способ начать отладку (после установки точек останова) — перезагрузить ее. Нажмите F5 (Windows, Linux) или Cmd + R (Mac).

Выполнение остановится на четвертой строке:

Чтобы понять, что происходит в коде, нажмите на стрелки справа:

1. Watch показывает текущие значения выражений.

   Щелкните + и введите выражение. Во время выполнения отладчик автоматически пересчитывает и возвращает свое значение.

2. Стек вызовов показывает последовательность вызовов функций.

   В нашем примере отладчик работает с функцией hello (), вызываемой сценарием из файла index.html (там нет функции, поэтому вызов является «анонимным»).

   Когда вы щелкаете элемент в списке (например, «анонимный»), отладчик переходит к соответствующему коду, и нам предоставляется возможность его проанализировать.

3. Область показывает текущие переменные.

   Local отображает локальные переменные функций, и их значения выделены в исходном коде.

   Global перечисляет глобальные переменные (то есть те, которые объявлены вне функций).

   Пока не обращайте внимания на это ключевое слово — мы его изучим чуть позже.

Console

Если нажать Esc, внизу откроется консоль. Мы можем ввести там команды и нажать Enter, чтобы выполнить их.

После выполнения инструкции ее результат показан ниже.

Например, здесь 1 + 2 возвращает 3, а hello («отладчик») ничего не возвращает, поэтому результат не определен:

Прерывание хода выполнения скрипта

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

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

Работаем с точками прерывания

Чтобы установить точку останова, перейдите на вкладку «Сценарии» и выберите нужный сценарий из списка. Теперь ищем строку, в которой нужно остановить выполнение скрипта и щелкнуть по полю с номером строки для активации — появится визуальный индикатор. Теперь перезагружаем страницу, и выполнение кода остановится в указанной точке:

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

Затем вы можете продолжить выполнение кода, используя соответствующие кнопки, расположенные в верхней части боковой панели:

• 
  «Продолжить»: продолжить выполнение кода до следующей точки останова.

• 
  «Step Over»: выполняет следующую строку кода. Если код вызывает другую функцию, отладчик не будет «нырять» в ее код.

• 
  «Шаг с заходом»: аналогично «Шагу через», за исключением того, что при вызове функции отладчик переходит к первой строке в коде функции.

• 
  «Выход»: если вы ввели код функции с помощью кнопки «Выход», нажатие кнопки «Выход» выполнит код функции до конца и перейдет к родительской функции.

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

Условные точки прерывания

В процессе отладки кода иногда необходимо останавливать выполнение кода только при выполнении определенных условий. Например, если в вашем скрипте есть цикл, каждая итерация которого занимает 50 миллисекунд, будет очень неудобно запускать процесс выполнения после остановки на каждом шаге, когда нам нужно всего 300 итераций. Для таких случаев есть условные перерывы.

В примере на рисунке выполнение кода не будет прервано до тех пор, пока значение переменной total_photos_diff не станет больше 200.

Чтобы активировать условный разрыв, щелкните правой кнопкой мыши точку останова и выберите пункт «Изменить точку останова», чтобы отобразить диалоговое окно для редактирования условий точки останова.

Установка точки прерывания в коде

Не всегда удобно устанавливать точки останова с помощью интерфейса инструмента разработчика в браузере. Иногда проще запустить отладчик из кода специальной командой. В следующем примере показано, как остановить выполнение кода при выполнении определенных условий:

если (total_photos_diff> 300) {отладчик; // запускаем отладчик и останавливаем выполнение кода }

Группировка вызовов метода .log()

Использование различных методов для отправки информации на консоль позволяет просматривать данные. Представление информации можно улучшить, объединив ее в блоки. Используется метод console.group() :

// Первая группа console.group («Расчет фото»); console.info («Общая разница сейчас» + total_photos_diff); console.log (total_photos_diff); console.groupEnd (); // Вторая группа console.group («Добавочная переменная»); console.log («Всего фото сейчас:» + t); console.log («Сумма предыдущих фото теперь:» + p); console.groupEnd();

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

В предыдущих примерах представлен небольшой список методов, доступных из консольного API. Есть много других полезных методов, которые описаны на официальной странице Firebug.

Firefox Firebug

• Откройте ваш браузер.
• Перейдите на веб-страницу:
  http://www.getfirebug.com
• Следуйте инструкциям, чтобы:
  установить Firebug

Edge

• Откройте ваш браузер.
• В меню «выберите» Инструменты разработчика».
• Наконец, выберите «Консоль».

Пошаговое выполнение скрипта

Теперь пройдемся по нашему коду.

В правой части панели есть несколько кнопок. Давайте их рассмотрим.

— продолжить выполнение. Сочетание клавиш — F8.

Выполнение кода возобновляется. Если точек останова больше нет, отладчик останавливается и позволяет приложению продолжить работу.

Вот что мы увидим, щелкнув по нему:

Выполнение кода возобновилось, была достигнута другая точка останова в say (), и отладчик снова приостановил выполнение. Обратите внимание на запись «Стек вызовов» справа: в списке появился другой вызов. Теперь мы внутри функции say().

— сделать шаг (выполнить следующую команду) без входа в функцию. Горячая клавиша — F10.

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

— сделай шаг. Сочетание клавиш — F11.

В отличие от предыдущего примера, здесь мы «вводим» вложенные функции и шаг за шагом выполняем сценарий.

— продолжить выполнение до конца текущей функции. Сочетание клавиш — Shift + F11.

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

— активировать / деактивировать все точки останова.

Эта кнопка не влияет на выполнение кода, она только позволяет вам массово включать / отключать точки останова.

— разрешить / запретить остановку выполнения в случае ошибки.

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

Если вы щелкните правой кнопкой мыши строку кода, вы можете выбрать «Продолжить здесь» из контекстного меню»).

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

Tracing the execution

Пришло время нарисовать сценарий.

Для этого есть кнопки в верхней части правой панели. Давайте их подключим.

— «Возобновить»: продолжение выполнения, горячая клавиша F8.

Казнь возобновляется. Если дополнительных точек останова нет, выполнение продолжается, и отладчик теряет управление.

Вот что мы видим, щелкнув по нему:

Выполнение возобновилось, достигла другой точки останова внутри say () и остановилась на этом. Взгляните на «Стек вызовов» справа. Он увеличился еще одним звонком. Мы сейчас говорим.

— «Шаг»: выполнить следующую команду, горячая клавиша F9.

Выполните следующую инструкцию. Если мы щелкнем по нему сейчас, будет показано предупреждение.

Повторное нажатие на нее приведет к последовательному выполнению всех шагов сценария.

— «Пропустить»: выполняет следующую команду, но не вводит функцию, сочетание клавиш F10.

Подобна предыдущей команде «Step», но ведет себя иначе, если следующая инструкция является вызовом функции. То есть: не встроенное предупреждение, как предупреждение, а наша функция.

Команда «Step» переходит в него и приостанавливает выполнение на своей первой строке, в то время как «Step over» невидимо выполняет вызов вложенной функции, пропуская внутренние компоненты функции.

Затем выполнение приостанавливается сразу после этой функции.

Ничего страшного, если нас не интересует, что происходит внутри вызова функции.

— «Ввод», горячая клавиша F11.

он похож на «Step», но ведет себя иначе для асинхронных вызовов функций. Если вы только начинаете изучать JavaScript, вы можете игнорировать разницу, поскольку у нас еще нет асинхронных вызовов.

На будущее обратите внимание, что команда «Step» игнорирует асинхронные действия, такие как setTimeout (запланированный вызов функции), которые выполняются впоследствии. «Шаг в» вводит свой код, ожидая их при необходимости. Подробнее см. Руководство DevTools.

— «Выход»: продолжить выполнение до конца текущей функции, горячая клавиша Shift + F11.

Продолжить выполнение и остановиться на последней строке текущей функции. Это полезно, когда мы случайно ввели вложенный вызов using, но нам все равно, и мы хотим продолжить до конца как можно скорее.

— включить / отключить все точки останова.

Эта кнопка не перемещает выполнение. Только одна масса вкл / выкл для точек останова.

— включить / выключить автоматическую паузу в случае ошибки.

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

Щелчок правой кнопкой мыши по строке кода открывает контекстное меню с отличной опцией «Продолжить здесь”.

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

Выделение сообщений

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

console.info (): выводит значок «информация» и раскрашивает отображаемую информацию. Этот метод полезен для оповещения о различных событиях.

console.warn (): выводит значок предупреждения и раскрашивает информацию, которую он представляет. Удобно использовать для получения информации о параметрах, выходящих за пределы.

console.error (): выводит значок «ошибки» и раскрашивает информацию, которую он представляет. Удобно использовать для сообщения об ошибках и критических состояниях.

Примечание. Инструмент разработчика Chrome не позволяет по-другому отображать информацию в консоли.

Ключевое слово debugger

Ключевое слово debugger останавливает выполнение JavaScript и вызывает (если есть) функции отладки.

Это та же функция, что и установка точки останова в отладчике.

Если отладка недоступна, инструкция отладчика не действует.

Если отладчик включен, этот код перестанет работать до выполнения третьей строки.

Пример

переменная x = 15 * 5;
отладчик;
document.getElementById («демонстрация») innerHTML = x; Попробуй сам »

Logging

Чтобы отправить что-то в консоль из нашего кода, есть функция console.log.

Например, это возвращает на консоль значения от 0 до 4:

// открываем консоль, чтобы увидеть (let i = 0; i <5; i ++) {console.log («value», i); }

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

Если у нас есть достаточный доступ к нашему коду, мы можем видеть, что происходит, из записей без отладчика.

Pause and look around

В нашем примере hello () вызывается во время загрузки страницы, поэтому самый простой способ запустить отладчик (после установки точек останова) — это перезагрузить страницу. Затем нажимаем F5 (Windows, Linux) или Cmd + R (Mac).

Когда установлена ​​точка останова, выполнение останавливается на 4-й строке:

Откройте информационные раскрывающиеся меню справа (помечены стрелками). Они позволяют вам проверить статус текущего кода:

1. Смотреть: показывает текущие значения для любого выражения.

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

1. Стек вызовов — показывает вложенную цепочку вызовов.

В настоящий момент отладчик находится внутри вызова hello (), вызываемого сценарием в index.html (там нет функции, поэтому он называется «анонимный”).

Если вы щелкните элемент стека (например, «анонимный»), отладчик переключится на соответствующий код, и все его переменные также могут быть проверены.

1. Область действия — текущие переменные.

Local показывает переменные локальной функции. Вы также можете увидеть их значения, выделенные прямо над источником.

Global имеет глобальные переменные (от всех функций).

Есть еще это ключевое слово, которое мы еще не изучили, но скоро изучим.

Другие способы прервать выполнение кода

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

Остановка при изменении DOM

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

На панели кода HTML, щелкнув правой кнопкой мыши нужный элемент, вы можете выбрать условия остановки кода (изменение атрибутов, добавление / удаление потомков, удаление элемента) при изменении DOM. Перезагрузите код, и когда элементы изменятся, выполнение кода остановится.

Остановка при появлении всех или необрабатываемых исключений

Большинство инструментов разработчика позволяют останавливать выполнение скрипта при возникновении исключения. В Chrome эту функцию можно включить с помощью значка «Пауза» в нижней строке интерфейса.

Вы можете выбрать, для каких исключений выполнение кода будет остановлено. В следующем примере показаны необработанное и обработанное исключение (блок try | catch:

var t = 3, p = 1; функция calcPhotos (total_photos, prev_total_photos) {var total_photos_diff = total_photos — prev_total_photos; // Первая группа console.info («Общая разница сейчас» + total_photos_diff); // Обновляем значения t = t + 5; р = р + 1; // Необработанное исключение if (total_photos_diff> 300) {throw 0; } // Обработанное исключение if (total_photos_diff> 200) {try {$$ (‘# элемент не существует’). Hide (); } catch (e) {console.error (e); }}} setInterval (функция () {calcPhotos (t, p);}, 50);

Данные выводим в консоль

Консоль не может просто отображать ошибки в коде скрипта. Используя консольный API и API командной строки, вы можете управлять выводом данных на консоль. Самая известная и полезная команда .log().

При разработке кода модуля очень полезно знать значения переменных, чтобы убедиться, что код работает правильно. Обычной практикой является использование функции alert () для визуального контроля. Однако использование этого метода предотвращает выполнение остальной части кода до тех пор, пока вы не нажмете кнопку в диалоговом окне.

Современное решение — использовать метод console.log, который выводит значения переменных на панель консоли:

console.log («Капитанский журнал»); // выводим «Журнал капитана» на консольную панель

Метод может использоваться для отображения рассчитанных значений:

функция calcPhotos () {total_photos_diff = total_photos — prev_total_photos; // Выводим значения переменных в консоль console.log (total_photos_diff); }

Преимущество этого подхода перед диалоговым методом alert () заключается в том, что выполнение кода не прерывается, и разработчик может возвращать значения переменных несколько раз для отслеживания изменений данных в реальном времени.

var t = 3, p = 1; функция calcPhotos (total_photos, prev_total_photos) {var total_photos_diff = total_photos — prev_total_photos; // Выводим значения в консоль console.log (total_photos_diff); // Обновляем значения t = t * 1.3; р = р * 1,1; } setInterval (функция () {calcPhotos (t, p);}, 100);

Точки останова (breakpoints)

Давайте посмотрим, как работает код на нашей тестовой странице. В файле hello.js щелкните строку номер 4. Да, щелкните сам номер, а не код.

Ура! Вы установили точку останова. Теперь нажмите на цифру 8 в восьмом ряду. Номер строки будет окрашен в синий цвет.

Точка останова — это часть кода, в которой отладчик автоматически приостанавливает выполнение JavaScript.

Пока выполнение поставлено на паузу, мы можем видеть текущие значения переменных, выполнять команды в консоли, словом, мы отлаживаем код.

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

• Чтобы быстро перейти к любой точке останова в коде, вам нужно щелкнуть точку в правой части экрана.
• Временно отключить точку: в общем списке снимите флажок рядом с точкой, которая в данный момент не нужна.
• Удалить точку: щелкните ее правой кнопкой мыши и выберите Удалить).
• …так далее.

Условные точки останова

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

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

Логирование

Если вам нужно отправить что-то на консоль из кода, используйте функцию console.log.

Например, выводим на консоль значения от нуля до четырех:

// чтобы увидеть результат, сначала откройте консоль для (let i = 0; i <5; i ++) {console.log («value,», i); }

Обычный пользователь сайта не увидит этот вывод, так как он отображается в консоли. Помните, что консоль можно открыть с помощью инструментов разработчика — выберите вкладку «Консоль» или нажмите Esc, находясь на другой вкладке — консоль откроется в нижней части интерфейса.

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

Метод Console log ()

Если ваш браузер поддерживает отладку, вы можете использовать консоль для просмотра значений JavaScript в окне отладчика ствола дерева ():

My First Web Page

Запуск программы в режиме отладки (дебага)

Если у вас есть хотя бы одна точка останова в вашей программе, вы можете запустить программу в режиме отладки (Shift + F9 или «значок ошибки»).

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

В верхней половине скриншота вы видите программный код с двумя точками останова. Программа вылетела в строке 5, отмеченной синей линией. Строка 5 еще не выполнена: на консоль еще ничего не отправлено.

В нижней половине экрана отображаются панели режима отладки: панель отладчика, панель консоли (вывод на экран) и ряд кнопок для режима отладки.

Вы можете повторно активировать программу (продолжить ее выполнение), нажав кнопку «Возобновить программу» в нижней левой панели (или нажав клавишу F9).

Если вы нажмете эту кнопку (или F9), программа продолжит работу, пока не встретит следующую точку останова или не завершится. Вот что мы видим после нажатия такой кнопки:

Программа остановилась на второй точке останова, и в консоли появятся слова Hello и AND, что означает, что были выполнены только две из трех строк вывода на экране.

Средства отладки основных обозревателей

Обычно вы включаете отладку в браузере с помощью F12 и выбираете «Консоль» в меню отладчика.