Как запустить сеанс отладки в vs code

Отладка JavaScript в Google Chrome и Visual Studio Code

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

К сожалению, отладка может показаться не столь очевидной при работе с JavaScript за пределами полноценной среды IDE. По крайней мере — на первый взгляд.

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

Примечание переводчика: перейдя по этой ссылке, можно ознакомиться с видеоверсией данной статьи Debugging JavaScript in Google Chrome and Visual Studio Code на английском языке.

Предустановки

В этой статье процесс отладки будет рассмотрен на примере тестового приложения под названием «Quick Chat»:

У вас есть два способа работы с этим приложением. Вы можете самостоятельно создать его, воспользовавшись этой серией видеоуроков. Или же вы можете использовать исходный код уже готового приложения «Quick Chat»:

Какой бы вариант вы не выбрали, вам потребуется локально запустить приложение «Quick Chat».

Вы можете запустить приложение из-под Node.js (как это делаю я). Или воспользоваться плагином под Visual Studio Code под названием Live Server.

Если вы новичок в работе с этим плагином, то можете научиться работать с ним при помощи этого видео — Live Server Extension in Visual Studio Code.

Примечание переводчика: видео на английском языке.

В процессе создания данной статьи я добавил в приложении «Quick Chat» небольшую намеренную ошибку, которая не позволяет зарегистрировать пользователя после его входа в систему.

С технической точки зрения я неправильно получаю имя пользователя, используя для этого usernameInput.text вместо правильного варианта usernameInput.value . Если бы я допустил такую ошибку в реальной жизни, моей первой мыслью было бы воспользоваться инструментом console.log() .

Но это не совсем тот случай, который мог бы мне помочь, как вы можете увидеть на изображении ниже. Если же использование console.log() было также вашей первой мыслью — вы попали по адресу и правильно делаете, что читаете эту статью!

Основы отладки

Начнем с основ. Идея отладки заключается в том, что внутри программного кода можно устанавливать так называемые точки останова (breakpoints) для того, чтобы остановить выполнение программы в определенном месте.

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

После установки точки останова (breakpoint) в коде, как правило, есть несколько вариантов дальнейших действий:

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

У вас также будет доступ к просмотру стека вызовов (call stack). Другими словами, поскольку в программе функции могут вызывать на исполнение другие функции, то можно просмотреть историю вызовов этих функций.

Отладка в Google Chrome

Чтобы начать отладку приложения в браузере ​​Google Chrome, добавьте в обработчике события кнопки clickBtn оператор debugger , как показано ниже:

Когда выполнение программы дойдет до строки с оператором debugger , приложение будет приостановлено и автоматически активируются инструменты отладки браузера Google Chrome.

Обратите внимание, что приложение в окне браузера закрашено серым цветом, чтобы показать, что оно приостановлено. Также обратите внимание, что вкладка Sources в Chrome Dev Tools открылась автоматически:

Давайте разберемся, что мы видим на вкладке Sources .

Вкладка Sources

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

Вы также можете заметить, что строка кода с оператором debugger подсвечена синим цветом, чтобы сообщить нам, что выполнение приложения остановлено на данном участке кода:

Браузер Google Chrome предоставляет нам возможность просматривать исходный код приложения. Имея перед собой исходный код, можно установить в нем точки останова.

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

Точка останова — преднамеренная остановка или приостановка выполнения программы

Чтобы добавить точку останова, нужно выполнить клик мыши на gutter — поле слева от нумерации строк кода. Как только вы выполните это действие, то заметите, что браузер Google Chrome автоматически добавил эту точку останова в список «Breakpoints»:

Вкладка Scope

На вкладке «Scope» вы можете отслеживать переменные в своем приложении. Обратите внимание, что на этой вкладке есть три раздела: локальная область видимости (Local), глобальная область видимости (Global) и раздел сценариев (Script).

В разделе сценариев вы можете отслеживать переменные в области видимости текущего скрипта:

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

Вкладка Watch

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

Добавляя переменную на вкладке «Watch», каждый раз, когда вы устанавливаете точку останова, вы можете быстро проверить значение этой переменной (которая может иметь значение undefined в зависимости от того, где вы находитесь в коде).

Нажмите значок плюса и введите имя переменной, которую необходимо отслеживать, в нашем случае это usernameInput :

Пошаговое выполнение, стек вызовов и список точек останова

Раздел вкладки «Sources», расположенный в левом нижнем углу окна отладчика, позволяет просмотреть список точек останова, стек вызовов (call stack) и т. д.

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

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

Наконец, существуют различные типы точек останова, которые могут быть заданы. Давайте рассмотрим пример создания условной точки останова (conditional breakpoint), которая будет срабатывать только при выполнении определенного условия.

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

Мы можем сделать это, щелкнув правой кнопкой мыши на поле gutter и создав точку останова со следующим условием — usernameInput.text === '' :

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

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

Отладка в Visual Studio Code

Инструмент Chrome Developer Tools является одним из лучших в своем роде. Как вы уже видели, он предлагает отличные возможности и функционал для отладки приложения.

Однако командой разработчиков Visual Studio Code была проделана большая работа для того, чтобы сделать процесс отладки в этом редакторе ещё более совершенным.

Мне очень нравится Visual Studio Code и я провожу в нем больше времени, чем в каком-либо другом редакторе кода. Этот процесс включает в себя и отладку.

Чтобы начать отладку кода в VS Code, вам нужно будет установить плагин Debugger for Chrome :

Давайте познакомимся с вкладкой Debug . По умолчанию она расположена на боковой панели редактора. Откройте эту вкладку, нажав на значок, который выглядит как жучок (bug).

Открыв эту панель, вы увидите инструменты, очень похожие на те, что мы видели в браузере Google Chrome — переменные, стек вызовов, точки останова:

Большинство функциональных возможностей, с которыми мы имели дело в Chrome Dev Tools, также доступны в VS Code.

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

VS Code хранит конфигурацию отладки в файле launch.json внутри папки .vscode . Чтобы VS Code создал этот файл для нас, в меню редактора откройте выпадающий список «Нет конфигураций» («No Configurations») и выберите «Добавить конфигурацию» («Add Configuration»).

VS Code хранит конфигурацию отладки в файле с именем launch.json внутри папки .vscode

Затем из этого списка выберите пункт «Chrome»:

Из раскрывающегося списка выберите конфигурацию «Chrome: Launch»:

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

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

Чтобы это сработало, что приложение уже должно быть запущено локально на определенном порту:

Когда конфигурация настроена, можно начать сеанс отладки, нажав зеленую кнопку «Run Code». Приложение должно открыться в окне браузера Google Chrome, как показано ниже.

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

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

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

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

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

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

Если вы хотите изучить переменные, перейдите на вкладку переменных и исследуйте их!

Вывод

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

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

Моя рекомендация — потратить некоторое время на изучение отладки как в браузере Google Chrome, так и в редакторе Visual Studio Code и посмотреть, что вам больше нравится. Если у вас есть какие-либо вопросы или комментарии, найдите меня в Twitter.

Отладка JavaScript с помощью Visual Studio Code и DevTools от Google Chrome

Отладка и устранение неполадок – важный навык, поскольку он позволяет разработчику эффективно и вовремя исправлять ошибки. При отладке JavaScript вне интегрированной среды (IDE) даже опытным разработчикам не всегда очевидно, какие инструменты нужно использовать.

В этом мануале мы рассмотрим отладку JavaScript с помощью Google Chrome DevTools, а также с помощью популярного текстового редактора Visual Studio Code (VS Code).

Требования

• ​​Последняя версия Google Chrome на вашем компьютере.
• Последняя версия Visual Studio Code на вашем компьютере.
• Локальная установка Node.js (у нас есть мануалы для macOS, CentOS 8, Ubuntu 20.04, Debian 10).

Примеры, которые мы рассмотрим в этом мануале, вы можете выполнить на одном из ваших проектов JavaScript, которые можно запустить на сервере Node. Если у вас нет такого проекта, создайте тестовое приложение.

1: Создание тестового приложения (опционально)

Если у вас нет проекта JavaScript, с которым вы могли бы работать в ходе выполнения этого мануала, вы можете создать тестовый проект Quick Chat.

С помощью Git клонируйте этот репозиторий. Также можно загрузить zip-файл и разархивировать его содержимое.

Примечание: Если вам нужно установить Git, читайте мануал Разработка проектов с открытым исходным кодом: начало работы с Git.

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

Перейдите в каталог проекта, а затем в каталог part-8:

cd Design-and-Build-a-Chat-Application-with-Socket.io
cd part-8

Установите пакеты npm для этого проекта:

Если вы зайдете в Chrome и посетите 127.0.0.1:3000, вы увидите запрос имени пользователя. Когда вы введете имя и нажмете кнопку «Chat!», вы будете перенаправлены в приложение чата и увидите следующее сообщение:

User joined the chat.

Если ввести текст в поле ввода внизу окна и нажать кнопку «Send», ваши сообщения отобразятся в окне чата.

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

Внесение ошибки в код

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

Откройте part-8/public/app.js в текстовом редакторе и найдите строку 96:

//set the username and create logged in message
username = usernameInput.value;

Замените ее следующей строкой:

//set the username and create logged in message
username = usernameInput.text; // added bug

Обновите вкладку браузера. Войдите в чат, после чего вы увидите:

undefined joined the chat.

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

2: Основы отладки

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

После срабатывания точки останова обычно есть следующие варианты:

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

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

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

3: Отладка в Google Chrome

Чтобы начать отладку в Chrome, добавьте в приложение оператор debugger.

Если вы работаете с тестовым приложением, которое мы создали в разделе 1, вы можете добавить оператор в обработчик события клика loginBtn:

loginBtn.addEventListener(‘click’, e => <
debugger; // added debugger
e.preventDefault();
if (!usernameInput.value) <
return console.log(‘Must supply a username’);
>
//set the username and create logged in message
username = usernameInput.text; // added bug
sendMessage(< author: username, type: messageTypes.LOGIN >);
//show chat window and hide login
loginWindow.classList.add(‘hidden’);
chatWindow.classList.remove(‘hidden’);
>);

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

Давайте теперь подробно разберемся с тем, что мы видим на экране.

Вкладка Sources

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

Chrome дает вам возможность просматривать этот код не просто так: теперь вы можете устанавливать в нем точки останова. Точка останова – это преднамеренная остановка или пауза в программе.

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

Вкладка Scope

Во вкладке Scope у вас есть возможность проверить переменные в приложении. Здесь вы найдете раздел Local (локальная область действия функции, в которой находится точка останова), раздел Global (глобальная область) и Script (в нем вы можете просмотреть переменные в рамках текущего скрипта).

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

Вкладка Watch

В дополнение к просмотру переменных во вкладке Scope вы также можете определить конкретные переменные, которые вы хотите изучить. Добавляя переменную во вкладку Watch, при каждом попадании в точку останова вы можете быстро найти ее значение (которое может быть undefined в зависимости от того, в какой части кода вы находитесь).

Используйте кнопку + и введите имя переменной, которую вы хотите отслеживать.

Если вы тоже работаете с тестовым приложением, вы можете использовать:

Стек вызовов и список точек останова

Последние разделы позволят вам просмотреть список точек останова, стек вызовов и т.д.

Если вы работаете с тестовым приложением, стек вызовов будет содержать функцию обработчика событий для кнопки входа (loginBtn.addEventListener.e). Она указана, потому что это единственная вызываемая на данный момент функция. По мере вызова других функций эта цепочка будет обновляться соответствующим образом.

Также обратите внимание на кнопки со стрелками в верхней части отладчика.

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

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

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

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

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

4: Отладка в VS Code

Как вы уже видели, Chrome DevTools предлагает отличные возможности и большое количество функций для отладки приложения. Однако Visual Studio Code предоставляет аналогичные функции отладки, но более плавно интегрированные в вашу среду.

Чтобы начать отладку в VS Code, установите расширение Debugger for Chrome.

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

Открыв эту панель, вы увидите инструменты, аналогичные тем, что мы уже видели в Chrome: переменные, Watch, стек вызовов и точки останова.

Большинство функций, которые вы получаете в Chrome DevTools, доступны и здесь, в VS Code.

Теперь, когда вы увидели вкладку Debug, создайте конфигурацию запуска, которая сообщит VS Code, как отлаживать ваше приложение. VS Code хранит конфигурации отладки в файле launch.json в папке .vscode.

Чтобы VS Code создал этот файл, вы можете нажать на ссылку, указанную в панели, в сообщении To customize Run and Debug create a launch.json file. Вы также можете сделать это через меню: выберите Run → Add Configuration… → Chrome .

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

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

Если вы работаете с тестовым приложением, вам следует изменить порт с 8080 на 3000.

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

Для отладки тестового приложения файл launch.json должен иметь такой вид:

<
«version»: «0.2.0»,
«configurations»: [
<
«type»: «chrome»,
«request»: «launch»,
«name»: «Launch Chrome»,
«url»: «http://localhost:3000»,
«webRoot»: «$/public»
>
] >

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

Определив конфигурацию, вы можете начать сеанс отладки, нажав зеленую кнопку воспроизведения в верхней части панели. Вы также можете использовать меню ( Run → Start Debugging ) и горячие клавиши.

Ваше приложение появится в окне Chrome.

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

Подключив отладку, вы можете установить точку останова в коде, как делали это в Chrome. Кликните на пустое место рядом с номером строки.

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

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

Далее вся функциональность, которую мы обсуждали в разделе, посвященном Chrome, полностью отображается в VS Code. Если вы хотите добавить условную точку останова, щелкните правой кнопкой мыши на пустое пространство и выберите Add Conditional Breakpoint… и укажите условие. Если вы хотите отслеживать переменную, нужно добавить новую переменную и ввести имя переменной, которую нужно отслеживать. Если вы хотите изучить переменные, перейдите во вкладку Variables.

Заключение

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

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

Отладка React-приложений в VS Code

Прошли те дни, когда мне, в процессе разработки, приходилось тратить время, переключаясь между терминалом, браузером и редактором. Теперь всё делается иначе — быстрее и удобнее. Сегодня я расскажу об оптимизации повседневных дел React-разработчика. А именно, речь пойдёт о том, как связать Visual Studio Code и Google Chrome. Это даст возможность отлаживать браузерный код в редакторе.

Средства отладки VS Code и jest от Facebook

Настройка тестового проекта

Прежде чем мы начнём осваивать отладку React в VS Code, создадим учебное приложение, с которым будем экспериментировать. Я часто пользуюсь create-react-app, так как очень не люблю вручную создавать пустые проекты. Поэтому предлагаю задействовать его и в этом руководстве. Как вариант, если у вас уже есть приложение, вы можете воспользоваться им.

Итак, создадим тестовый проект. Для этого надо сделать следующее:

• Установите create-react-app глобально, выполнив команду npm i -g create-react-app .
• После установки создайте проект командой create-react-app vscode-tutorial .

Настройка VS Code

Теперь установим расширение VS Code, которое позволит редактору взаимодействовать с Chrome. VS Code подключается к Chome с использованием протокола удалённой отладки. Это — тот же протокол, который используют инструменты разработчика Chrome. Но, благодаря такому подходу, вместо того, чтобы работать со стандартными инструментами Chrome, вы можете использовать для отладки браузерного кода VS Code.

Установка расширения Debugger for Chrome

Итак, для того, чтобы наладить взаимодействие VS Code и Chrome, нужно установить расширение, которое называется Debugger for Chrome . Для его установки надо перейти на панель расширений и выполнить поиск по названию расширения. В результате должно получиться примерно следующее:

Поиск расширения Debugger for Chrome

Подключение VS Code к Chrome

Далее, нужно настроить VS Code на подключение к Chrome. Делается это так:

• Щёлкните по значку отладки.
• Откройте выпадающее меню (около кнопки Play ) и выберите пункт Add Configuration… .
• В выпадающем списке Select Environment выберите Chrome .

Настройка связи VS Code и Chrome

В корень проекта будет автоматически добавлена папка .vscode . В ней будет находиться файл launch.json , который используется для настройки отладчика VS Code для текущего проекта. Каждый раз, когда вы создаёте новый проект, вам нужно выполнять ту же последовательность действий для настройки удалённой отладки (ещё можно просто скопировать папку .vscode из одного проекта в другой).

Модифицируйте в этом файле свойство url для того, чтобы оно указывало на сервер, использующийся при разработке. Для create-react-app это http://localhost:3000 . В результате ваш launch.json должен выглядеть так (благодарю Кеннета Аухенберга из команды VS Code за совет по работе с этим файлом):

Полный список конфигурационных опций можно найти здесь.

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

Теперь почти всё готово к работе. Следующий шаг заключается в использовании тестового проекта для того, чтобы проверить отладчик.

Запуск отладчика

Запустить отладчик можно, выполнив одно из следующих действий:

• Нажать F5 .
• Щёлкнуть по зелёной кнопке Play на панели отладки.
• Выбрать команду меню Debug → Start Debugger .

Панель инструментов, которая появляется при включении отладчика

Установка точки останова

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

Установим точку останова в тестовом приложении. Откроем файл src/App.js и щёлкнем мышью по полю левее строки 11 . Тут должна появиться красная точка, которая указывает на то, что точка останова была добавлена. Вот, чтобы было понятно, анимированная версия этой инструкции:

Установка точки останова

Запуск сервера разработки

И наконец, для того, чтобы посмотреть как всё это работает, нужно запустить сервер разработки, выполнив команду npm start в терминале. Эта команда запустит новый сервер, доступный по адресу http://localhost:3000/ .

Запуск сервера

Перейдите по адресу http://localhost:3000/ и вы увидите, как страница «застынет». Это происходит из-за того, что сработала точка останова. Если перейти в VS Code, можно заметить, что строка 11 будет выделена, а на панели отладки появятся сведения о стеке вызовов.

Сработавшая точка останова

Если у вас всё заработало — примите поздравления! Вы только что узнали о том, как настроить удалённую отладку в VS Code. Если вы хотите узнать подробности о самом процессе отладки в VS Code — почитайте это.

Непрерывное тестирование с помощью jest

Мне удобно, чтобы в процессе работы над кодом выполнялись модульные тесты. А именно, чтобы они вызывались всякий раз, когда я вношу изменения в программу. Благодаря create-react-app всё, что нужно для реализации такого сценария, настраивается автоматически. Для того, чтобы запустить jest , достаточно ввести в терминале команду npm test . Благодаря этому система будет наблюдать за файлами и автоматически запускать тесты при их сохранении. Выглядит это примерно так:

Непрерывное тестирование в VS Code

Итоги

В этом материале мы рассказали о том, как настроить взаимодействие VS Code и Chrome для организации удалённой отладки React-приложений. Надеемся, эта простая методика поможет сэкономить немного времени, если раньше вам приходилось постоянно переключаться между редактором, браузером и терминалом.

Уважаемые читатели! Пользуетесь ли вы какими-нибудь полезными мелочами, которые повышают производительность труда при разработке веб-приложений?

Как использовать отладчик в VS Code

VS (или Virtual Studio) Code — это бесплатный редактор кода, поддерживающий все основные языки программирования. Это позволяет программистам быстро и легко просматривать код и редактировать его при необходимости. Он работает как IDE для людей, пишущих код. но это не предотвращает ошибки. К счастью, в VSCode встроен отличный инструмент отладки.

В этой статье мы покажем Как использовать отладчик в коде VS.

Что такое отладчик?

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

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

Отладчик поддерживает JavaScript, TypeScript и все другие языки, использующие компиляторы Java. Для других языков, таких как Python или Ruby, потребуются установленные расширения.

Для этого выполните следующие действия:

1. В верхнем меню выберите “Установить дополнительные отладчики”
   
2. Выберите, какие языки программирования вы хотите использовать.
3. Язык будет загружен и введен в вашу базу данных. Теперь вы можете запустить отладчик, используя нужный язык.

Далее мы рассмотрим, как использовать отладчик в VSCode.

Создание базы данных Node.js

Node.js — это платформа, на которой по умолчанию работает отладчик VSCode. Он нужен вам для отслеживания всего, что происходит с вашим кодом. Это облегчает выявление проблемы. Кроме того, в отладчике VSCode есть некоторые функции, которые работают только с JavaScript. Вам нужно будет создать простую программу, знаменитую программу “Hello, World” программа. После выполнения этого шага отладчик будет работать плавно и быстро.

Чтобы создать Node.js, выполните следующие действия:

1. Перед тем как начать, убедитесь, что Node.js загружен и установлен на вашем компьютере.
2. Чтобы узнать, установлен ли Node.js, создайте новый терминал и введите “узел—версия” в терминале. Должна появиться установленная вами версия Node.js.
   
3. Создайте пустую папку на рабочем столе и назовите ее “hello”
   
4. Откройте VSCode и в командной строке введите следующий код:
   mkdir hello
   cd hello
   code.
   
5. Найдите панель инструментов Проводника. Ваш файл должен отображаться под названием “Hello” Щелкните значок “Новый файл” справа от имени файла.
   
6. Назовите новый файл “app.js”
   
7. В консольной команде введите следующий код:
   var msg = 'Hello World';
   console.log(msg);
   
8. Сохраните файл, нажав “Ctrl +S” на клавиатуре.
   
9. В терминале введите node app.js . В выводе будет указано «Привет, мир». вы написали свою первую программу и теперь готовы запустить отладчик VSCode.

Run View

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

Чтобы получить доступ к Run View, выполните следующие действия:

1. На боковой панели VSCode выберите «Выполнить». значок. Вы также можете быстро получить к нему доступ, нажав “Ctrl+Shift+D” на клавиатуре.
   
2. Появится меню с тремя вариантами. Для целей данного руководства выберите “создать файл launch.js” option.
   

Создание программы Launch.js

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

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

Вот как это сделать :

1. В “Просмотре выполнения” меню выберите “создать файл launch.js”
   
2. VSCode автоматически выберет среду отладки, но если он ничего не обнаружит, выберите «Node.js». >
3. Вернитесь в Проводник, нажав “Ctrl+Shift+E.”
   
4. Проверьте папку “hello” Должна быть вкладка с названием “.vscode” и файл launch.json должен быть на этой вкладке.
   
5. Чтобы проверить атрибуты отладчика, нажмите “Ctrl+Space”.
   

Запуск отладчика

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

1. В представлении «Выполнение» VSCode найдите раскрывающийся список «Конфигурация». «> Выберите «Запустить программу». Выбрав его, нажмите F5, чтобы запустить отладчик.
   
2. Вы также можете получить доступ к меню отладчика, сначала открыв палитру команд, нажав “Ctrl+Shift+P”
   
   
3. Введите “.debug” и выберите конфигурацию.
   

Добавление новой конфигурации

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

1. В разделе “Выполнить” выберите “Добавить конфигурацию”
   
2. Откройте IntelliSense (Shift+Пробел), чтобы вызвать меню, затем выберите “Добавить конфигурацию”
   

Конфигурации запуска и подключения

VSCode имеет два режима отладка – «запустить» и «прикрепить». У каждого режима есть свои плюсы и минусы, и каждый подходит для определенного типа кодировщика. Вот краткое описание методологии для каждого режима.

Во-первых, давайте обсудим “запуск” конфигурации. Конфигурации запуска означают, что вы, программист, пишете код или “рецепт” для сеанса отладки.

“Прикрепить” конфигурации, с другой стороны, предполагают присоединение конфигурации извне VSCode во время работы программы в VSCode. Вы не создаете ничего с нуля, а используете для отладки ранее созданный код.

Автоприсоединение

Автоприсоединение — это функция, которая автоматически прикрепляет отладчик Node к определенным файлам Node.js. процессов в терминале VSCode. Чтобы включить автоматическое вложение, выполните следующие действия:

1. Для доступа к палитре команд нажмите “Ctrl+Shift+P” на клавиатуре.
   
2. Когда появится меню, выберите “ Переключить автоматическое присоединение». Панель автоматического прикрепления должна появиться вверху.
   
3. После включения при автоматическом подключении вам потребуется перезагрузить устройство.
4. Вы также можете создать новый терминал, и автоматическое подключение будет по-прежнему включено.

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

• “Smart” – Это опция по умолчанию. Когда вы выполняете скрипт, которого нет в вашем “node_modules” папку, сценарий будет автоматически отлажен.
• «Всегда» – Любой процесс, использующий Node.js и запущенный во встроенном терминале, будет отлажен.
• “OnlyWithFlag” – Этот параметр будет отлаживать только те процессы, которые помечены флагом “- -inspect” или “- -inspect-brk” флаги на них.

Присоединить к процессу узла

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

1. Откройте палитру команд, нажав “Ctrl+Shift+P” на клавиатуре.
   
2. Выберите “Присоединить к процессу узла” из меню.
   
3. Здесь вы увидите все процессы, которые можно отлаживать с помощью Отладчик Node.js. Выберите, к какому процессу вы хотите подключить отладчик.
   

Терминал отладки JavaScript

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

1. Откройте палитру команд, нажав “Ctrl+Shift+P” на клавиатуре.
   
2. Выберите “Отладка: Создать терминал отладки JavaScript&rdquo ; из меню.
   
3. Вы также можете получить доступ к этому параметру, выбрав его в раскрывающемся меню терминала.
   
4. Отладчик подключится к вашему текущему процессу. Он будет запускаться автоматически и исправлять обнаруженные ошибки в коде.
   

Настройка “Attach” Конфигурация

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

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

1. Вам нужно будет указать, какой процесс, введя идентификатор в строку кода, которая выглядит следующим образом:
   <
   “name”: “Attach to Process”,
   “type” : “узел”,
   “запрос”: “прикрепить”,
   “processId”: “53426”
   >
   
2. Вручную вводить ID каждого процесса довольно утомительно. К счастью, вы можете открыть весь список, введя “$” в “processId” часть строки.

Многоцелевая отладка

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

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

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

Прекратить отладку

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

“Прикрепить” Конфигурации

1. Выберите “Отладка: Остановить” на панели инструментов отладки или после открытия палитры команд нажатием “Ctrl+Shift+P.”
   
2. После нажатия кнопки “Стоп” отладчик Node.js отключится и завершит работу. Однако введенный вами процесс все равно будет запущен.
   
3. Чтобы остановить запущенные процессы, перейдите на панель задач и выберите “Остановить”

“Запустить” Конфигурации

1. После выбора “Стоп” VSCode попросит вас завершить работу, отправив сигнал SIGINT.
2. Перед перехватом сигнала очистите все, а затем завершите работу.
3. Если если в этом коде выключения нет точек останова (или проблем), сеанс завершится.

Дебаггеры раскрыты

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

Используете ли вы отладчик VSCode? Какой метод вы считаете лучшим? Дайте нам знать в разделе комментариев ниже.