Отладка JavaScript с помощью VS Code и Chrome

Отладка JavaScript с помощью VS Code и Chrome

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

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

В этой статье мы обсудим, как мы можем отлаживать JavaScript, используя простые и эффективные инструменты в Visual Studio Code и Google Chrome.

Методы отладки для JavaScript

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

Точка останова — это место, где строка кода заставляет отладчик приостановить выполнение JavaScript. Мы можем проверять текущие переменные и запускать команды в консоли, пока код приостановлен. Другими словами, мы можем отладить его. Список точек останова всегда доступен на правой панели Chrome DevTools. Это полезно, когда у нас много точек останова в разных файлах.

Ключевое слово отладчика

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

function writefunction() 
{
  console.log("Stop Executing write function!");
  debugger; // <-- the debugger stops here
}
helloWorld();

Возвращение

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

1. Определите вызывающих абонентов каждой функции.
2. Определите, возникли ли там какие-либо проблемы, связанные с этой функцией.

• Если нет, вы возвращаетесь к вызывающей стороне этой функции. Если не получается, отступаешь и пытаешься снова.

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

Строгий режим

Использование строгого режима JavaScript упрощает написание стандартизированных и удобочитаемых программ JavaScript. Мы можем поставить программу под строгую рабочую перспективу, используя строгий режим. Этот строгий контекст запрещает определенные действия и создает исключения. Это помогает уменьшить количество ошибок и сохранить код чистым. Например, JavaScript выдаст ошибку в строгом режиме, если мы присвоим значения необъявленным переменным. Оператор use strict включает строгий режим.

Отладка JavaScript в VS Code

VS Code предоставляет простые и понятные решения для отладки. Отладчики кода Visual Studio поддерживают множество языков и платформ, которые либо встроены, либо доступны через расширения. Давайте поработаем над отладкой VS Code с помощью примера кода JavaScript.

const hotels = [];
export function addHotel(hotel, stars) 
{
    const id = ++hotels.length;
    let numType = 'odd';
    if (id % 2) 
    {
        numType = 'even';
    }
    hotels.push({ id, hotel, stars, numType, });
}

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

addHotel('Kingsburry', '5');
addHotel('Hilton', '5');
addHotel('Cinnamon Grand', '5');

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

Мы обсудили точки останова. Как вы можете видеть в предыдущем коде, красные точки в левой части редактора кода VS — это точки останова. Вы можете добавить их, нажав на панель слева от номеров строк. Затем на панели действий щелкните значок отладки.

Взгляните на верхнюю часть. Вы заметите значок шестеренки. Нажмите на нее. Будет запрошен файл конфигурации отладки с именем launch.json. Обновите конфигурацию со ссылкой на следующий код, чтобы включить отладчик VS Code в App.js.

"configurations": [
   {
      "type": "node",
      "request": "launch",
      "name": "Launch App",
      "program": "${workspaceFolder}\\debugapp\\src\\App.js"
   }
]

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

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

• Переменные: отображает локальные и глобальные переменные текущей области действия (в момент выполнения).
• Наблюдение: вы можете вручную ввести выражения для переменных, которые хотите отслеживать.
• Call Stack: отображает стек вызовов выделенного кода.
• Точки останова: показывает список файлов с точками останова и их номерами строк.

Отладка с помощью часов

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

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

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

Стек вызовов

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

Еще один инструмент в вашем наборе инструментов VS Code для отладки — использование консоли отладки. Хотя иногда это может быть чрезмерным, это часто экономит ваше время при поиске ошибок.

Отладка JavaScript с помощью Google Chrome

Большинство IDE и почти все современные браузеры включают средства отладки, что значительно упрощает отладку. Браузеры также позволяют выполнять пошаговую трассировку кода, чтобы определить точную причину ошибки. Google Chrome, который используют многие разработчики, предоставляет нам решения для отладки JavaScript. Кроме того, Chrome предоставляет расширения отладчика для VS Code и Chrome DevTools. Chrome DevTools встроен в браузер Google Chrome.

Отладчик Chrome для VS Code

Отладчик Chrome помогает отлаживать код JavaScript на стороне клиента, который запускается в Google Chrome прямо из VS Code. Отладчик Chrome — это расширение, которое необходимо установить в VS Code.

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

Из-за включения отладчика JavaScript в Visual Studio Code это расширение там больше не поддерживается (устарело). Отладчик JavaScript исправляет проблемы с Node.js, Chrome, Edge, WebView2, расширениями VS Code и другими программами. Вы можете без риска удалить расширение отладчика Chrome и по-прежнему иметь доступ к необходимым возможностям.

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

Лучший инструмент отладки уже включен в ваш браузер Chrome, независимо от того, работаете ли вы с приложениями Angular, React или Vue. Браузер Google Chrome включает инструменты разработчика (также известные как DevTools), которые позволяют разработчикам редактировать код непосредственно в браузере, добавлять точки останова для обнаружения проблем и быстрее отлаживать свой код.

Чтобы открыть панель DevTools Elements, нажмите Command + Option + C на Mac или CTRL + SHIFT + C на любой другой операционной системе.

Давайте рассмотрим некоторые практические стратегии более эффективной отладки кода с помощью DevTools.

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

1. Перейдите на вкладку Источники в DevTools.
2. На панели навигации слева выберите файл .js. Код выбранного файла .js будет отображаться на средней панели.
3. Щелкните правой кнопкой мыши строку, в которую вы хотите добавить точку останова. Затем в раскрывающемся списке выберите Добавить точку останова.

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

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

Вместо console.log(something) и перезагрузки страниц сделайте паузу и проверьте код. Это более продуктивный способ отладки. Когда все появится в порядке, нажмите кнопку возобновления на странице, чтобы продолжить выполнение. DevTools позволяет добавлять различные точки останова. На следующем изображении представлены все доступные типы точек останова.

Создание/сохранение/запуск сниппетов

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

Чтобы добавить фрагмент:

1. Выберите Фрагменты на левой панели.

2. Нажмите Новый фрагмент на левой панели и напишите свой код на средней панели.

3. Сохраните фрагмент с помощью клавиатурных команд (CTRL+C в Windows).

4. Чтобы запустить этот код, щелкните правой кнопкой мыши фрагмент и выберите Выполнить.

Стек вызовов DevTools

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

Изменения в переменных

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

1. Добавьте точку останова.
2. Перейдите к соответствующей панели.
3. Разверните Область, чтобы увидеть значение переменной.

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

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

Блэкбоксинг

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

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

Преимущества наличия инструмента отладчика

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

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

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

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

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

Заворачивать

В этой статье мы рассмотрели различные методы отладки кода JavaScript и инструменты, используемые в VS Code и Google Chrome.

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

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

Essential JS 2 от Syncfusion — единственный пакет, который вам понадобится для создания приложения. Он содержит более 65 высокопроизводительных, легких, модульных и адаптивных компонентов пользовательского интерфейса в одном пакете. Загрузите бесплатную пробную версию, чтобы оценить ее сегодня.

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

Связанные блоги

• Что такое федерация модулей Webpack и почему это важно?
• Представляем индикатор загрузки скелета в Syncfusion Essential JS 2 DataGrid
• Методы манипулирования строками JavaScript, которые должен знать каждый разработчик
• Методы имитации JavaScript API
• Оптимизируйте пакет приложений Next.js и улучшите его производительность

Первоначально опубликовано на https://www.syncfusion.com 10 ноября 2022 г.