Полное руководство по отладке JavaScript

Отладка - один из тех навыков, которые лежат в основе деятельности программиста.

Иногда мы делаем все, что в наших силах, но программа работает некорректно, например дает сбой, работает медленно или выводит неверную информацию.

Что вы делаете, если написанная вами программа ведет себя не так, как вы ожидаете?

Вы начинаете его отлаживать.

Выяснение, где могла быть ошибка

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

Все это ключевая информация, чтобы начать двигаться в правильном направлении при выяснении проблемы.

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

Прочтите код

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

Часто я обнаруживал проблемы таким образом.

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

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

В коде внешнего интерфейса JavaScript вы часто будете использоватьalert()иconsole.log(и его крутые друзья).

Рассмотрим эту строку:

const a = calculateA()
const b = calculateB()
const result = a + b

Как-то неправильно рассчитывается результат, поэтому можно начать с добавленияalert(a)иalert(b)перед вычислением результата, и браузер откроет две панели предупреждений при выполнении кода.

const a = calculateA()
const b = calculateB()
alert(a)
alert(b)
const result = a + b

Это отлично работает, если вы переходите кalert()это строка или число. Как только у вас есть массив или объект, все становится слишком сложно дляalert(), и вы можете использоватьКонсольный API. Начиная сconsole.log():

const a = calculateA()
const b = calculateB()
console.log(a)
console.log(b)
const result = a + b

Значение печатается в консоли JavaScript инструментов разработчика браузера. Для удобства я объясняю здесь отладку в Chrome DevTools, но общие концепции применимы ко всем браузерам с некоторыми различиями в плане поддерживаемых функций.

Увидетьподробный обзор Chrome DevTools

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

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

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

вКонсольный APIpost вы можете увидеть все варианты и подробности работы с ним, поэтому я не буду здесь объяснять все подробности.

Отладчик

Отладчик - самый мощный инструмент в инструментах разработчика браузера, и его можно найти вИсточникипанель:

В верхней части экрана отображается навигатор по файлам.

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

Нижняя часть - это собственно отладчик.

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

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

На этом этапе выполнение останавливается, и вы можете все проверить свою запущенную программу.

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

Но сначала, что такое точка останова? В своей простой форме точка останова - этоbreakpointинструкция вставьте в свой код. Когда браузер встречает это, он останавливается.

Это хороший вариант при разработке. Другой вариант - открыть файл на панели «Источники» и щелкнуть число в строке, в которой вы хотите добавить точку останова:

Повторный щелчок по точке останова удалит ее.

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

Когда вы добавляете точку останова, вы можете видеть вКонтрольные точкипанель, котораяform.jsонлайн7имеет точку останова. Вы можете увидеть все свои точки останова и временно отключить их.

Есть и другие типы точек останова:

• Точки останова XHR / выборки: срабатывает при отправке любого сетевого запроса
• Точки останова DOM: срабатывает при изменении элемента DOM
• Точки останова прослушивателя событий: срабатывает, когда происходит какое-то событие, например, щелчок мышью

Объем

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

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

Следите за переменными и выражениями

Право наОбъемпанель естьСмотретьпанель.

Оно имеет+кнопку, которую вы можете использовать для добавления любого выражения. Например, добавивnameнапечатаетnameзначение переменной, в примереFlavio. Можете добавитьname.toUpperCase()и он напечатаетFLAVIO:

Возобновить выполнение

Теперь все сценарии остановлены, так как точка останова остановила выполнение.

Над баннером «Приостановлено на точке останова» есть набор кнопок, которые позволяют изменять это состояние.

Первый - синим. Щелчок по нему возобновляет нормальное выполнение скрипта.

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

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

Выйтинаоборот: возвращается к внешней функции, вызывающей эту.

Это основные способы управления потоком во время отладки.

Редактировать скрипты

На этом экране инструментов разработчика вы можете редактировать любой сценарий, даже когда выполнение сценария остановлено. Просто отредактируйте файл и нажмите cmd-S на Mac или ctrl-S в Windows / Linux.

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

Проверьте стек вызовов

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

Скрипты черного ящика

Часто вы работаете с библиотеками, в которые вы не хотите «вмешиваться», вы доверяете им и, например, не хотите видеть их код в стеке вызовов. Как и в предыдущем случае дляvalidator.min.js, который я использую для проверки электронной почты.

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

Используйте инструменты разработчика браузера для отладки Node.js

Поскольку Node.js построен на том же движке Chrome,v8, вы можете связать 2 и использовать Chrome DevTools для проверки выполнения приложений Node.js.

Открыть свойТерминали беги

node --inspect

Затем в Chrome введите этот URL:about://inspect.

Щелкните ссылку Открыть выделенный DevTools для узла рядом с целью узла, и вы получите доступ к Node.js в браузере DevTools:

Убедитесь, что вы щелкнули по нему, а не по ссылке внизу, так как инструмент автоматически переподключается к экземпляру Node.js, когда мы его перезапускаем - очень удобно!

Больше руководств по js:

• Чего следует избегать в JavaScript (плохие части)
• Отсрочки и обещания в JavaScript (+ пример Ember.js)
• Как загрузить файлы на сервер с помощью JavaScript
• Стиль кодирования JavaScript
• Введение в массивы JavaScript
• Введение в язык программирования JavaScript
• Полное руководство по ECMAScript 2015-2019
• Понимание обещаний JavaScript
• Лексическая структура JavaScript
• Типы JavaScript
• Переменные JavaScript
• Список примеров идей веб-приложений
• Введение в функциональное программирование с помощью JavaScript
• Современный асинхронный JavaScript с Async и Await
• Циклы и область действия JavaScript
• Структура данных JavaScript карты
• Заданная структура данных JavaScript
• Руководство по шаблонным литералам JavaScript
• Дорожная карта для изучения JavaScript
• Выражения JavaScript
• Откройте для себя таймеры JavaScript
• Объяснение событий JavaScript
• Циклы JavaScript
• Пишите циклы JavaScript, используя map, filter, reduce и find
• Цикл событий JavaScript
• Функции JavaScript
• Глоссарий JavaScript
• Замыкания JavaScript объяснены
• Учебник по функциям стрелок в JavaScript
• Руководство по регулярным выражениям JavaScript
• Как проверить, содержит ли строка подстроку в JavaScript
• Как удалить элемент из массива в JavaScript
• Как глубоко клонировать объект JavaScript
• Introduction to Unicode and UTF-8
• Юникод в JavaScript
• Как ввести первую букву строки в верхний регистр в JavaScript
• Как отформатировать число как денежное значение в JavaScript
• Как преобразовать строку в число в JavaScript
• это в JavaScript
• Как получить текущую метку времени в JavaScript
• Строгий режим JavaScript
• Выражения функции немедленного вызова JavaScript (IIFE)
• Как перенаправить на другую веб-страницу с помощью JavaScript
• Как удалить свойство из объекта JavaScript
• Как добавить элемент в массив в JavaScript
• Как проверить, не определено ли свойство объекта JavaScript
• Введение в модули ES
• Введение в CommonJS
• Асинхронное программирование и обратные вызовы JavaScript
• Как заменить все вхождения строки в JavaScript
• Краткое справочное руководство по современному синтаксису JavaScript
• Как обрезать ведущий ноль в числе в JavaScript
• Как проверить объект JavaScript
• Полное руководство по датам JavaScript
• Учебник Moment.js
• Точка с запятой в JavaScript
• Арифметические операторы JavaScript
• Объект JavaScript Math
• Создавайте случайные и уникальные строки в JavaScript
• Как заставить ваши функции JavaScript спать
• Прототипное наследование JavaScript
• Исключения JavaScript
• Как использовать классы JavaScript
• Поваренная книга JavaScript
• Цитаты в JavaScript
• Как проверить адрес электронной почты в JavaScript
• Как получить уникальные свойства набора объектов в массиве JavaScript
• Как проверить, начинается ли строка с другой в JavaScript
• Как создать многострочную строку в JavaScript
• Руководство по ES6
• Как получить текущий URL в JavaScript
• Руководство ES2016
• Как инициализировать новый массив значениями в JavaScript
• Руководство ES2017
• Руководство ES2018
• Как использовать Async и Await с Array.prototype.map ()
• Асинхронный и синхронный код
• Как сгенерировать случайное число между двумя числами в JavaScript
• Учебное пособие по HTML Canvas API
• Как получить индекс итерации в цикле for-of в JavaScript
• Что такое одностраничное приложение?
• Введение в WebAssembly
• Введение в JSON
• Руководство по JSONP
• Should you use or learn jQuery in 2020?
• Как скрыть элемент DOM с помощью простого JavaScript
• Как объединить два объекта в JavaScript
• Как очистить массив JavaScript
• Как закодировать URL-адрес с помощью JavaScript
• Как установить значения параметров по умолчанию в JavaScript
• Как отсортировать массив объектов по значению свойства в JavaScript
• Как подсчитать количество свойств в объекте JavaScript
• call () и apply () в JavaScript
• Введение в PeerJS, библиотеку WebRTC
• Работа с объектами и массивами с помощью Rest и Spread
• Разрушение объектов и массивов в JavaScript
• Полное руководство по отладке JavaScript
• Руководство по TypeScript
• Динамически выбирать метод объекта в JavaScript
• Передача undefined в JavaScript с немедленным вызовом функциональных выражений
• Свободно типизированные языки против строго типизированных языков
• Как стилизовать элементы DOM с помощью JavaScript
• Трансляция в JavaScript
• Руководство по генераторам JavaScript
• Размер папки node_modules не является проблемой. Это привилегия
• Как решить непредвиденную ошибку идентификатора при импорте модулей в JavaScript
• Как перечислить все методы объекта в JavaScript
• Метод String replace ()
• Метод String search ()
• Как я запускаю небольшие фрагменты кода JavaScript
• Руководство ES2019
• Метод String charAt ()
• Метод String charCodeAt ()
• Метод String codePointAt ()
• Метод String concat ()
• Метод String EndWith ()
• Метод String includes ()
• Метод String indexOf ()
• Метод String lastIndexOf ()
• Метод String localeCompare ()
• Метод String match ()
• Метод String normalize ()
• Метод String padEnd ()
• Метод String padStart ()
• Метод String repeat ()
• Метод String slice ()
• Метод String split ()
• Метод String startWith ()
• Метод String substring ()
• Метод String toLocaleLowerCase ()
• Метод String toLocaleUpperCase ()
• Метод String toLowerCase ()
• Метод String toString ()
• Метод String toUpperCase ()
• Метод String trim ()
• Метод String trimEnd ()
• Метод String trimStart ()
• Мемоизация в JavaScript
• Метод String valueOf ()
• Ссылка на JavaScript: Строка
• Метод Number isInteger ()
• Метод Number isNaN ()
• Метод Number isSafeInteger ()
• Метод Number parseFloat ()
• Метод Number parseInt ()
• Метод Number toString ()
• Метод Number valueOf ()
• Метод Number toPrecision ()
• Метод Number toExponential ()
• Метод Number toLocaleString ()
• Метод Number toFixed ()
• Метод Number isFinite ()
• Ссылка на JavaScript: номер
• Дескрипторы свойств JavaScript
• Метод Object assign ()
• Метод Object create ()
• Метод Object defineProperties ()
• Метод Object defineProperty ()
• Метод записи объекта ()
• Метод Object freeze ()
• Метод Object getOwnPropertyDescriptor ()
• Метод Object getOwnPropertyDescriptors ()
• Метод Object getOwnPropertyNames ()
• Метод Object getOwnPropertySymbols ()
• Метод Object getPrototypeOf ()
• Метод Object is ()
• Метод Object isExtensible ()
• Метод Object isFrozen ()
• Метод Object isSealed ()
• Метод Object keys ()
• Метод Object preventExtensions ()
• Метод Object seal ()
• Метод Object setPrototypeOf ()
• Метод значений объекта ()
• Метод Object hasOwnProperty ()
• Метод Object isPrototypeOf ()
• Метод Object propertyIsEnumerable ()
• Метод Object toLocaleString ()
• Метод Object toString ()
• Метод Object valueOf ()
• Справка по JavaScript: объект
• Оператор присваивания JavaScript
• Интернационализация JavaScript
• Оператор типа JavaScript
• Новый оператор JavaScript
• Операторы сравнения JavaScript
• Правила приоритета операторов JavaScript
• Оператор instanceof в JavaScript
• Заявления JavaScript
• Область действия JavaScript
• Преобразования типов JavaScript (приведение)
• Операторы равенства JavaScript
• Условное выражение if / else в JavaScript
• Условное переключение JavaScript
• Оператор удаления JavaScript
• Параметры функции JavaScript
• Оператор распространения JavaScript
• Возвращаемые значения JavaScript
• Логические операторы JavaScript
• Тернарный оператор JavaScript
• Рекурсия JavaScript
• Свойства объекта JavaScript
• Объекты ошибок JavaScript
• Глобальный объект JavaScript
• Функция JavaScript filter ()
• Функция JavaScript map ()
• Функция JavaScript reduce ()
• Оператор `in` в JavaScript
• Операторы JavaScript
• Как получить значение свойства CSS в JavaScript
• Как добавить прослушиватель событий к нескольким элементам в JavaScript
• Поля частного класса JavaScript
• Как отсортировать массив по значению даты в JavaScript
• Поля открытого класса JavaScript
• Символы JavaScript
• Как использовать библиотеку JavaScript bcrypt
• Как переименовывать поля при деструктуризации объекта
• Как проверять типы в JavaScript без использования TypeScript
• Как проверить, содержит ли массив JavaScript определенное значение
• При чем тут оператор двойного отрицания !! делать в JavaScript?
• Какой оператор равенства следует использовать при сравнении JavaScript? == против ===
• Стоит ли изучать JavaScript?
• Как вернуть результат асинхронной функции в JavaScript
• Как проверить, пустой ли объект в JavaScript
• Как выйти из цикла for в JavaScript
• Как добавить элемент в массив по определенному индексу в JavaScript
• Почему не следует изменять прототип объекта JavaScript
• В чем разница между использованием let и var в JavaScript?
• Ссылки, используемые для активации функций JavaScript
• Как соединить две строки в JavaScript
• Как соединить два массива в JavaScript
• Как проверить, является ли значение JavaScript массивом?
• Как получить последний элемент массива в JavaScript?
• Как отправить urlencoded данные с помощью Axios
• Как получить дату завтрашнего дня с помощью JavaScript
• Как получить вчерашнюю дату с помощью JavaScript
• Как получить название месяца из даты JavaScript
• Как проверить, совпадают ли две даты в один и тот же день в JavaScript
• Как проверить, относится ли дата к дню в прошлом в JavaScript
• Операторы с пометкой JavaScript
• Как дождаться выполнения 2 или более обещаний в JavaScript
• Как получить дни между двумя датами в JavaScript
• Как загрузить файл с помощью Fetch
• Как отформатировать дату в JavaScript
• Как перебирать свойства объекта в JavaScript
• Как рассчитать количество дней между двумя датами в JavaScript
• Как использовать ожидание верхнего уровня в модулях ES
• Динамический импорт JavaScript
• Необязательная цепочка JavaScript
• Как заменить пробел внутри строки в JavaScript
• Нулевое объединение JavaScript
• Как сгладить массив в JavaScript
• Это десятилетие в JavaScript
• Как отправить заголовок авторизации с помощью Axios
• Список ключевых слов и зарезервированных слов в JavaScript
• Как преобразовать массив в строку в JavaScript
• Как удалить все содержимое папок node_modules
• Как удалить дубликаты из массива JavaScript
• Let vs Const в JavaScript
• Один и тот же вызов POST API в различных библиотеках JavaScript.
• Как получить первые n элементов массива в JS
• Как разделить массив на несколько равных частей в JS
• Как замедлить цикл в JavaScript
• Как загрузить изображение на холст HTML
• Как разрезать строку на слова в JavaScript
• Как разделить массив пополам в JavaScript
• Как написать текст на холсте HTML
• Как удалить последний символ строки в JavaScript
• Как удалить первый символ строки в JavaScript
• Как исправить ошибку TypeError: невозможно назначить только для чтения свойство «exports» объекта «# & lt; Object & gt;» ошибка
• Как создать всплывающее окно с намерением выхода
• Как проверить, является ли элемент потомком другого
• Как принудительно вводить учетные данные для каждого запроса Axios
• Как устранить ошибку "не функция" в JavaScript
• Гэтсби, как изменить фавикон
• Загрузка внешнего файла JS с помощью Gatsby
• Как определить темный режим с помощью JavaScript
• Посылка, как исправить ошибку `регенераторВремя выполнения не определено`
• Как определить, используется ли блокировщик рекламы с JavaScript
• Деструктуризация объектов с типами в TypeScript
• Справочник Deno: краткое введение в Deno 🦕
• Как получить последний сегмент пути или URL-адреса с помощью JavaScript
• Как перемешать элементы в массиве JavaScript
• Как проверить, существует ли ключ в объекте JavaScript
• Возбуждение событий и захват событий
• event.stopPropagation против event.preventDefault () против return false в событиях DOM
• Примитивные типы и объекты в JavaScript
• Как узнать, к какому типу относится значение в JavaScript?
• Как вернуть несколько значений из функции в JavaScript
• Стрелочные функции и обычные функции в JavaScript
• Как мы можем получить доступ к значению свойства объекта?
• В чем разница между null и undefined в JavaScript?
• В чем разница между методом и функцией?
• Как мы можем выйти из цикла в JavaScript?
• Цикл for..of в JavaScript
• Что такое деструктуризация объектов в JavaScript?
• Что такое подъем в JavaScript?
• Как заменить запятые на точки с помощью JavaScript
• Важность тайминга при работе с DOM
• Как перевернуть массив JavaScript
• Как проверить, является ли значение числом в JavaScript
• Как принять неограниченное количество параметров в функции JavaScript
• Объекты прокси JavaScript
• Делегирование событий в браузере с использованием ванильного JavaScript
• Ключевое слово JavaScript super
• Введение в XState
• Значения передаются по ссылке или по значению в JavaScript?
• Пользовательские события в JavaScript
• Пользовательские ошибки в JavaScript
• Пространства имен в JavaScript
• Любопытное использование запятых в JavaScript
• Цепочка вызовов методов в JavaScript
• Как справиться с отклонением обещаний
• Как поменять местами два элемента массива в JavaScript
• Как я исправил ошибку "cb.apply is not a function" при использовании Gitbook
• Как добавить элемент в начало массива в JavaScript
• Гэтсби, исправьте ошибку "не удается найти модуль gatsby-cli / lib / reporter"
• Как получить индекс элемента в массиве JavaScript
• Как проверить пустой объект в JavaScript
• Как деструктурировать объект до существующих переменных в JavaScript
• Структура данных JavaScript в виде массива
• Структура данных Stack JavaScript
• Структуры данных JavaScript: очередь
• Структуры данных JavaScript: Установить
• Структуры данных JavaScript: словари
• Структуры данных JavaScript: связанные списки
• JavaScript, как экспортировать функцию
• JavaScript, как экспортировать несколько функций
• JavaScript, как выйти из функции
• JavaScript, как найти символ в строке
• JavaScript, как фильтровать массив
• JavaScript, как расширить класс
• JavaScript, как найти дубликаты в массиве
• JavaScript, как заменить элемент массива
• Алгоритмы JavaScript: линейный поиск
• Алгоритмы JavaScript: двоичный поиск
• Алгоритмы JavaScript: сортировка выбора
• Алгоритмы JavaScript: быстрая сортировка
• Алгоритмы JavaScript: сортировка слиянием
• Алгоритмы JavaScript: пузырьковая сортировка