JavaScript
отладка

Контрольные точки

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

Существует три способа создания точек останова.

1. Из кода, используя debugger; заявление.
2. В браузере используйте Инструменты разработчика.
3. Из интегрированной среды разработки (IDE).

Заявление отладчика

Вы можете разместить debugger; в любом месте вашего кода JavaScript. Как только интерпретатор JS достигнет этой строки, он прекратит выполнение сценария, позволяя вам проверять переменные и выполнять свой код.

Инструменты разработчика

Второй вариант - добавить точку останова непосредственно в код из инструментов разработчика браузера.

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

Chrome или Firefox

1. Нажмите F12, чтобы открыть Инструменты разработчика
2. Перейдите на вкладку «Источники» (Chrome) или вкладка «Отладчик» (Firefox)
3. Нажмите Ctrl + P и введите имя вашего файла JavaScript.
4. Нажмите « Ввод», чтобы открыть его.

Internet Explorer или Edge

1. Нажмите F12, чтобы открыть Инструменты разработчика
2. Перейдите на вкладку «Отладчик».
3. Используйте значок папки в верхнем левом углу окна, чтобы открыть панель выбора файлов; вы можете найти свой файл JavaScript там.

Сафари

1. Нажмите Command + Option + C, чтобы открыть Инструменты разработчика
2. Перейдите на вкладку «Ресурсы»
3. Откройте папку «Сценарии» на левой панели
4. Выберите свой файл JavaScript.

Добавление точки останова из инструментов разработчика

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

Примечание о Minified Sources: если ваш источник был уменьшен, вы можете Pretty Print it (преобразовать в удобочитаемый формат). В Chrome это делается нажатием кнопки {} в правом нижнем углу окна просмотра исходного кода.

Иды

Код Visual Studio (VSC)

VSC имеет встроенную поддержку для отладки JavaScript.

1. Нажмите кнопку «Отладка» слева или Ctrl + Shift + D
2. Если это еще не сделано, создайте файл конфигурации запуска ( launch.json ), нажав значок шестеренки.
3. Запустите код из VSC, нажав зеленую кнопку воспроизведения или нажмите F5 .

Добавление точки останова в VSC

Нажмите рядом с номером строки в исходном файле JavaScript, чтобы добавить точку останова (она будет отмечена красным цветом). Чтобы удалить точку останова, снова щелкните красный круг.

Совет. Вы также можете использовать условные точки останова в инструментах разработчика браузера. Они помогают пропустить ненужные перерывы в исполнении. Пример сценария: вы хотите проверить переменную в цикле точно на 5- ^й итерации.

Выполнение кода

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

Резюме: отменить выполнение. Shorcut: F8 (Chrome, Firefox)

Step Over: Запустите следующую строку кода. Если эта строка содержит вызов функции, запустите всю функцию и перейдите к следующей строке, а не прыгайте туда, где функция определена. Ярлык: F10 (Chrome, Firefox, IE / Edge), F6 (Safari)

Шаг В: Запустите следующую строку кода. Если эта строка содержит вызов функции, перейдите в функцию и остановитесь там. Ярлык: F11 (Chrome, Firefox, IE / Edge), F7 (Safari)

Шаг: Запустите оставшуюся часть текущей функции, вернитесь туда, откуда была вызвана функция, и остановитесь на следующем утверждении. Ярлык: Shift + F11 (Chrome, Firefox, IE / Edge), F8 (Safari)

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

Дополнительную информацию и рекомендации см. В руководстве Google «Как пройти через код» .

Ссылки на документацию по ключевым словам в браузере:

• Хром
• Fire Fox
• IE
• край
• Сафари

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

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

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

Вы также можете приостановить выполнение, когда изменен HTML-тег (узел DOM) или когда его атрибуты изменены. Для этого щелкните правой кнопкой мыши узел DOM на вкладке Elements и выберите «Break on ...».

Переменные интерактивного интерпретатора

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

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

"foo"             // "foo"
$_                // "foo"

$0 относится к элементу DOM, выбранному в настоящее время в инспекторе. Поэтому, если выделен <div id="foo"> :

$0                      // <div id="foo">
$0.getAttribute('id')   // "foo"

$1 относится к ранее выбранному элементу, $2 к выбранному до этого и т. Д. За $3 и $4 .

Чтобы получить набор элементов, соответствующих селектору CSS, используйте $$(selector) . Это, по сути, ярлык для document.querySelectorAll .

var images = $$('img');  // Returns an array or a nodelist of all matching elements

¹ _{псевдоним либо document.getElementById либо document.querySelector}

Контролер элементов

Нажмите Выберите элемент на странице, чтобы просмотреть его в верхнем левом углу вкладки «Элементы» на вкладке «Chrome» или «Inspector» в Firefox, доступной в «Инструментах разработчика», а затем нажав на элемент страницы, выделите элемент и присвойте ему значение $0 переменная .

Элемент-инспектор может использоваться различными способами, например:

1. Вы можете проверить, работает ли ваш JS с DOM так, как вы ожидаете,
2. Вы можете более легко отлаживать свой CSS, видя, какие правила влияют на элемент
   (Вкладка « Стили » в Chrome)
3. Вы можете играть с CSS и HTML без перезагрузки страницы.

Кроме того, Chrome запоминает последние 5 вариантов на вкладке «Элементы». $0 - текущий выбор, а $1 - предыдущий выбор. Вы можете подняться до $4 . Таким образом, вы можете легко отлаживать несколько узлов без постоянного переключения на них.

Вы можете прочитать больше в Google Developers .

Использование сеттеров и геттеров для поиска того, что изменило свойство

Допустим, у вас есть такой объект:

var myObject = {
    name: 'Peter'
}

Позже в вашем коде вы попытаетесь получить доступ к myObject.name и вы получите Джорджа вместо Питера . Вы начинаете задаваться вопросом, кто изменил его и где именно он был изменен. Существует способ разместить debugger (или что-то еще) на каждом наборе (каждый раз, когда кто-то делает myObject.name = 'something' ):

var myObject = {
    _name: 'Peter',
    set name(name){debugger;this._name=name},
    get name(){return this._name}
}

Обратите внимание, что мы переименовали name в _name и мы собираемся определить сеттер и getter для name .

set name - setter. Это приятное место, где вы можете разместить debugger , console.trace() или что-нибудь еще, что вам нужно для отладки. Установщик установит значение для имени в _name . Получатель (часть get name получателя) будет читать значение оттуда. Теперь у нас есть полностью функциональный объект с функциональностью отладки.

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

// First, save the name to _name, because we are going to use name for setter/getter
otherObject._name = otherObject.name;

// Create setter and getter
Object.defineProperty(otherObject, "name", {
    set: function(name) {debugger;this._name = name},
    get: function() {return this._name}
});

Узнайте больше о сеттерах и геттерах в MDN.

Поддержка браузера для сеттеров / геттеров:

Разрыв при вызове функции

Для именованных (не анонимных) функций вы можете ломаться, когда функция выполняется.

debug(functionName);

В следующий раз functionName functionName будет запущена, отладчик остановится в своей первой строке.

Использование консоли

Во многих средах вы имеете доступ к глобальному объекту console который содержит некоторые базовые методы для связи со стандартными устройствами вывода. Чаще всего это будет консоль JavaScript браузера (см. Chrome , Firefox , Safari и Edge для получения дополнительной информации).

// At its simplest, you can 'log' a string
console.log("Hello, World!");

// You can also log any number of comma-separated values
console.log("Hello", "World!");

// You can also use string substitution
console.log("%s %s", "Hello", "World!");

// You can also log any variable that exist in the same scope
var arr = [1, 2, 3];
console.log(arr.length, this);

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

Дополнительные сведения о совместимости и инструкции о том, как открыть консоль вашего браузера, см. В разделе « Консоль» .

Примечание. Если вам нужно поддерживать IE9, либо удалите console.log либо заверните его вызовы следующим образом, поскольку console не определена до тех пор, пока не откроются инструменты разработчика:

if (console) { //IE9 workaround
    console.log("test");
}