Как отладить JavaScript в Visual Studio Code

Отредактировано 3 несколько месяцев назад от ExtremeHow Редакционная команда

Visual Studio CodeОтладкаJavaScriptРасширенияКонфигурацияИнструментыКонтрольные точкиКонсольИнтеграцияНастройкаИсходный кодРазработкаВеб-разработкаУстранение неполадокОшибкиПрограммированиеNode.jsРабочий процессЭффективностьТестирование

Отладка является важной частью процесса разработки программного обеспечения. Visual Studio Code, также известный как VS Code, предоставляет мощную поддержку для отладки JavaScript. Его инструмент отладки предлагает разработчикам ряд функций, которые упрощают выявление и исправление ошибок в их коде. В этом документе мы объясним на очень простом языке, как эффективно отладить JavaScript с помощью Visual Studio Code. Мы обсудим настройку, точки прерывания, пошаговое выполнение кода и просмотр переменных. Мы приведем примеры, чтобы вам было легче начать.

Настройка вашей среды

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

Установка необходимых расширений

Visual Studio Code активно использует расширения для дополнительной функциональности. Чтобы эффективно отлаживать JavaScript, рассмотрите возможность установки следующих расширений:

• Debugger for Chrome: Это расширение позволяет отлаживать клиентский JavaScript, выполняющийся в Google Chrome.
• Node.js Extension Pack: Этот набор расширений полезен, если вы работаете с приложениями Node.js.

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

Начало отладочной сессии

После настройки вашей среды вы можете начать отладочную сессию. Следуйте этим шагам:

1. Откройте файл JavaScript: В VS Code откройте папку, содержащую ваш проект JavaScript, и найдите файл, который хотите отладить.
2. Установите точку прерывания: Точка прерывания — это маркер, который сообщает отладчику о том, что выполнение вашего кода должно остановиться в определенной точке. Чтобы установить точку прерывания, нажмите на левое поле в редакторе рядом с номером строки, где находится ваш JavaScript код. Появится красная точка, указывающая, что точка прерывания установлена.
3. Начните отладку: Нажмите значок отладки на панели активности на стороне окна. Нажмите зеленую кнопку Воспроизведения (или нажмите F5), чтобы начать отладочную сессию. Если вас попросят выбрать среду, выберите "Node.js" или "Chrome", в зависимости от того, где вы хотите, чтобы ваш код выполнялся.

Использование точек прерывания

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

Чтобы управлять точками прерывания:

• Отключить/включить точки прерывания: Отключите или включите существующую точку прерывания, щелкнув ее правой кнопкой мыши. Отключение точки прерывания означает, что отладчик будет игнорировать ее во время выполнения.
• Удалить точку прерывания: Нажмите на красную точку в редакторе, чтобы удалить точку прерывания.
• Условная точка прерывания: Щелкните правой кнопкой мыши по точке прерывания и выберите "Добавить условную точку прерывания". Это позволяет остановить выполнение кода только при выполнении указанного условия.

Пошаговое выполнение кода

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

• Продолжить >| : Продолжает выполнение до тех пор, пока не будет достигнута следующая точка прерывания.
• Перейти через >| : Продвигается к следующей строке в текущей функции без входа в функции или методы, найденные на этой строке.
• >> Войти в: Проходит через функции или методы, используемые в строке, и останавливается на первой возможной точке внутри этой функции.
• Выйти |< : Если вы вошли в функцию и хотите завершить ее и вернуться к основной вызывающей функции, выберите этот параметр, чтобы выйти из текущей функции.

Изучение переменных

Во время отладочной сессии вам часто нужно изучать значения переменных, чтобы определить, содержат ли они ожидаемые данные. Visual Studio Code предоставляет различные способы изучения переменных:

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

Консоль и консоль отладки

Консоль отладки в Visual Studio Code действует как интерактивная консоль, позволяющая выполнять произвольный код и оценивать выражения. Это может быть особенно полезным для быстрого внесения изменений или проверки гипотез о поведении кода в реальном времени.

Стандартная консоль остается доступной для вашего регулярного использования через программирование, обычно интегрированное с операторами console.log() в JavaScript. Это еще один простой, но эффективный способ отслеживания изменений данных на протяжении всей вашей работы.

Пример

Рассмотрим простую программу, чтобы понять процесс отладки:

function add(a, b) { return a + b; } function subtract(a, b) { return a - b; } const result1 = add(10, 5); console.log('Result of addition: ', result1); const result2 = subtract(10, 5); console.log('Result of subtraction: ', result2);

Чтобы отладить эту программу на JavaScript:

• Откройте файл в Visual Studio Code.
• Установите точки прерывания в функциях add() и subtract().
• Начните отладку с помощью отладчика VS Code, нажав F5.
• Когда выполнение кода достигает вашей точки прерывания, изучите значения a и b.

Заключение

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

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

  Поделиться этой статьей

Если вы найдете что-то неправильное в содержании статьи, вы можете запросить обновление