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

Для разработчика поиск и исправление ошибок в коде порой бывает крайне затруднительным. Инструментом, который значительно облегчает решение ошибок, является Chrome Developer Tools (также называемый Chrome DevTools).

Chrome DevTools — это комплексный набор инструментов разработчика, включающий различные средства создания и отладки веб-страниц. Он встроен непосредственно в браузер Chrome и дает разработчикам более глубокое понимание своих приложений.

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

Что означает отладка?

Отладка — это процесс поиска и устранения ошибок в программном обеспечении. В программировании и разработке программного обеспечения слово «баг» является синонимом слова «ошибка». Баг относится к дефектам или ошибкам, которые заставляют компьютерное программное обеспечение (или программы) выдавать неправильные или неожиданные результаты.

Давайте рассмотрим некоторые ошибки, с которыми вы, скорее всего, столкнетесь в своей программе.

• Синтаксическая ошибка: В каждом языке программирования существуют определенные правила написания кода. Синтаксические ошибки возникают, когда вы нарушаете одно или несколько из этих правил. Например, в JavaScript, consol.log('your result') вызовет синтаксическую ошибку, потому что console написано неправильно.
• Семантическая (логическая) ошибка: Это приводит к тому, что программа компилируется и выполняется правильно. Однако она не выдает желаемого или ожидаемого результата.
• Ошибка времени выполнения: Синтаксически программа верна, но в ней есть ошибка, которая может быть обнаружена только во время ее выполнения.

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

Что такое Chrome Developer Tools

Chrome Developer Tools — это набор инструментов для веб-разработчиков, встроенный непосредственно в браузер Google Chrome. Он помогает разработчикам редактировать веб-страницы, выявлять и устранять ошибки, позволяя им создавать сайты и приложения намного быстрее и эффективнее.

Интерфейс Chrome DevTools состоит из девяти панелей.

Ниже приводится краткая информация о том, что делает каждая панель:

• Элементы: Изменяйте элементы DOM в режиме реального времени и наблюдайте за последствиями изменений на странице.
• Консоль: Предоставляет информацию об интерактивных элементах на веб-странице.
• Источники: Просмотр и редактирование файлов программы, отладка кода JavaScript и настройка рабочих пространств (чтобы изменения, сделанные в DevTools, сохранялись в коде в вашей файловой системе).
• Сеть: Отображает все ресурсы или файлы, загруженные на сайте.
• Производительность: Анализирует скорость и оптимизацию веб-приложений.
• Память: Предоставляет информацию о том, как страница использует память.
• Приложение: Отображает содержимое из хранилища браузера. например, localStorage, sessionStorage, cookies, IndexDB и т.д.
• Безопасность: Предоставляет основную информацию о безопасности, позволяя вам просмотреть сертификат HTTPS сайта и статус TLS.
• Lighthouse (Маяк): Аудит качества, производительности, доступности и SEO приложений.

В этой статье мы рассмотрим главным образом панель Sources, где мы отлаживаем код JavaScript.

Панель Sources

Чтобы начать работу с панелью Sources и всеми ее компонентами, давайте сначала рассмотрим, как открыть Chrome DevTools в браузере.

Открытие Chrome DevTools

Вот несколько способов открыть Chrome DevTools в браузере.

• С помощью сочетаний клавиш:
  • Command + Opt + I (macOs)
  • Управление + Shift + I (Windows или Linux)
• Щелкните правой кнопкой мыши в любом месте страницы браузера и выберите опцию «Inspect».
• С помощью главного меню Chrome:
  1. Нажмите кнопку меню Chrome
  2. Выберите Дополнительные инструменты
  3. Выберите Инструменты разработчика

Вот что вы увидите, когда откроете Chrome Developer Tools:

По умолчанию Chrome DevTools открывается на панели Элементы.

Изучение панели Sources

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

• Откройте страницу примера в Chrome.
• Откройте инструменты разработчика Chrome.
• Выберите вкладку «Источники».

Вот что вы увидите, если откроете панель Sources в первый раз:

Нажмите кнопку переключения и выберите файл main.js в древовидном представлении. Вот что появится:

Как видно, панель Sources состоит из трех частей:

• Страница навигатора файлов [1]: Отображает все файлы, которые загружает страница, такие как HTML, JavaScript, CSS и другие файлы.
• Редактор кода [2]: Нажмите на файл в панели навигатора файлов, чтобы просмотреть или отредактировать его содержимое в редакторе кода.
• Панель отладки JavaScript [3]: Содержит все необходимые инструменты для отладки кода JavaScript.

Пример проекта страницы

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

Однако на этой странице есть несколько ошибок, которые вы исправите, если будете следовать этому руководству.

Метод Console.log

Самый простой способ устранения ошибки на демонстрационной странице примера — вставить в код функцию console.log() для одновременной проверки значений переменных.

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

Хотя функцияconsole.log() может быть хорошим вариантом для устранения ошибок, Chrome DevTools делает более эффективную работу.

Поэтому вместо того, чтобы использовать функцию console.log() для определения того, где в вашем коде происходят ошибки, вам следует использовать Chrome DevTools.

Как отлаживать JavaScript с помощью DevTools

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

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

Шаг 1: Воспроизвести ошибку

Воспроизведение ошибки — это первый шаг к отладке. «Воспроизвести ошибку» означает найти ряд действий, которые последовательно вызывают появление ошибки.

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

• Откройте страницу демонстрационного примера в новой вкладке.
• На странице введите 23 для первого поля ввода.
• Для другого поля ввода введите 4.
• Нажмите кнопку «Добавить числа».

Упс! Смотрим на результаты, выведенные под кнопкой. Там написано 23 + 4 = 234, что неверно. Результат должен быть скорее 27. Это и есть ошибка, которую вам предстоит исправить.

Шаг 2: Добавьте точку останова

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

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

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

Существует множество типов точек останова, которые можно установить в коде. Давайте рассмотрим некоторые из них:

Как добавить точки останова

Здесь мы собираемся установить точку останова в строке кода. Для этого:

• Откройте Chrome DevTools и перейдите на панель Sources.
• Перейдите к панели навигатора файлов и выберите main.js, чтобы открыть его содержимое в редакторе кода.
• В редакторе кода щелкните на строке с номером 21, прямо на цифре номера, а не на коде.

Это должно выглядеть следующим образом:

После установки точки останова самый простой способ активировать отладчик — заполнить поля ввода на демонстрационной странице и нажать кнопку «Добавить цифры». DevTools приостановит выполнение и выделит 21-ю строку (где была установлена точка останова).

Поздравляем! Вы установили точку останова.

Шаг 4: Пройдитесь по коду

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

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

• Resume: С помощью этой кнопки DevTools выполняет ваш сценарий до следующей точки останова. Если же точек останова больше нет, отладчик теряет контроль над программой.
• «Шаг»: Эта кнопка используется для выполнения следующего оператора javaScript.
• Шаг над следующим вызовом функции: Позволяет отладчику выполнить следующий блок кода. Однако, если блок кода включает вызов функции, отладчик «перешагивает» (пропускает) его.
• Шаг в следующий вызов функции: Заставляет отладчик выполнить следующую функцию для ее дальнейшего анализа. Если есть вызов функции, он переходит в нее, и вы можете видеть, как функция выполняется строка за строкой до возврата.
• Выход из текущей функции: Если вы вошли в функцию, но не хотите видеть, как выполняется остальная часть функции, вы можете пропустить ее с помощью этой кнопки.

В этом и заключается основная идея шага по коду. Если посмотреть на код в main.js, то очевидно, что ошибка, вероятно, находится где-то в функции onClick() (где складываются два числа).

💡 ВАЖНО
При отладке большой базы кода, много кода может быть не связано с проблемой, которую вы отлаживаете.

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

Щелкните правой кнопкой мыши на интересующей вас строке кода, а затем выберите «Continue to here». DevTools выполнит весь код до этой точки, а затем остановится на этой строке.

Шаг 5: Проверьте значения переменных

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

• Watch: В окне Watch вы можете указать переменную (или выражение), которую хотите отслеживать. Вы можете добавить выражение или переменную, нажав на знак плюс +.

• Call Stack (Стек вызовов): В окне Call Stack отображается набор функций и методов, вызываемых во время выполнения вашего кода.

• Область видимости: Используйте окно scope для просмотра и редактирования значений свойств и переменных в clossure, local и global scope.

«Наблюдая» за переменнымиfirstNumber и secondNumber, мы видим, что их значения выглядят подозрительно. Они заключены в кавычки, что означает, что это строковые значения. Чтобы подтвердить это, давайте посмотрим тип данных этих переменных, добавив в список наблюдения следующие выражения:

• typeof secondNumber

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

Шаг 5: Применение исправления

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

• Если вы находитесь в режиме отладки, нажмите кнопку Возобновить выполнение сценария, чтобы выйти из него.
• Теперь в редакторе кода замените код в строке 21 на let sum = parseInt(firstNumber) + parseInt(secondNumber).
• Нажмите . Команда+S (Mac) или Control +S (Windows, Linux), чтобы сохранить изменения.
• Нажмите Деактивировать точки останова, чтобы игнорировать все установленные точки останова.

Теперь опробуйте демо-версию с разными значениями.

Теперь демонстрация работает так, как ожидалось.

Завершение работы

Поздравляем! Вы успешно отладили код примера демонстрационной страницы с помощью Chrome DevTools. С помощью Chrome DevTools можно сделать очень многое. Это мощный инструмент, и если потратить время на его освоение, вы станете более эффективным отладчиком.

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

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

Будьте здоровы!

💡 Хотите узнать больше?
Ознакомьтесь с документацией Google по отладке JavaScript с помощью Chrome DevTools.