Отладка приложения Node.js в Visual Studio Code очень проста. Редактор кода VS имеет встроенные возможности отладки для любого приложения, предназначенного для среды выполнения Node.js. Это означает, что вы можете отлаживать JavaScript или любой другой скомпилированный язык (например, TypeScript).
Эта статья шаг за шагом проведет вас через отладку приложения Node.js в VS Code. Вы узнаете, как начать сеанс отладки, вставить точки останова, подключить внешний процесс и отладить код TypeScript с помощью исходных карт.
Подготовить
Перед запуском установите Node.js и VS Code на локальный компьютер. Последняя версия Node.js доступна на официальном сайте. Точно так же для Visual Studio Code загрузите последнюю версию из Интернета VS Code. Вы можете обратиться к статье Как установить Visual Studio Code в Windows 10 на сайте TipsMake.com.com.
Вам также нужен проект Node.js. Вы можете создать простое приложение Node.js с нуля или использовать уже существующее.
Отладка в VS Code
Начать отладку в редакторе VS Code довольно просто. Откройте файл с VS Code и щелкните значок «Выполнить и отладить» на боковой панели (или нажмите Ctrl + Shift + D на клавиатуре). Затем нажмите кнопку «Выполнить и отладить», чтобы начать процесс.
Debugging C Program with Visual Studio Code (VSCode)
По умолчанию Node.js попытается определить среду отладки проекта. Однако, если автоматическое обнаружение не удается, вам будет предложено выбрать подходящую среду. В этом руководстве используется среда Node.js.
После выбора среды VS Code активирует отладчик и прикрепляет его к процессу. Вы можете увидеть результаты в DEBUG CONSOLE. Используя панель инструментов отладки вверху, вы можете зациклить код, приостановить выполнение или завершить сеанс.
У вас также есть возможность создать файл конфигурации. Файл launch.json позволяет настраивать и задавать детали отладки. Если сценарию нужен аргумент, укажите эти аргументы в файле launch.json. Для каждого профиля можно установить несколько параметров:
Вы также увидите 5 панелей в левой части редактора, в том числе: ПЕРЕМЕННЫЕ, НАБЛЮДЕНИЕ, СТЕК ВЫЗОВОВ, ЗАГРУЖЕННЫЕ СКРИПТЫ и ТОЧКИ РАЗВЯЗКИ:
Когда настройка завершена, выберите и запустите программу через меню конфигурации.
Прикрепить внешний процесс
Другой способ настроить сеанс отладки Node.js — подключить внешний процесс. Запустите программу следующей командой:
узел —inspect index.js
Вставьте флаг -brk после —inspect, если вы хотите прикрепить его до того, как эта программа запустится.
VS Code — Debugging
Затем откройте и выберите этот процесс в VS Code. Здесь перечислены все процессы, доступные в среде Node.js. Чтобы открыть селектор, нажмите Ctrl+Shift+P и найдите команду Debug: Attach to Node.js.
Нажмите эту команду и сделайте соответствующий выбор, чтобы начать процесс отладки.
Создание точек останова
Если вы хотите сделать паузу в определенных точках программы для проверки кода, установите там точку останова. Вы можете установить точки останова практически в любом месте вашего кода. Сюда входят объявления переменных, выражения и комментарии. Но вы не можете установить точку останова в объявлении функции.
Создать точку останова довольно просто. При перемещении мыши влево от номеров строк на каждой строке появляется красный кружок. Укажите количество строк в коде, куда вы хотите вставить точку останова. Затем нажмите на эту строку, чтобы добавить точку останова:
В BREAKPOINTS вы найдете все точки останова, включенные в проекте. Здесь вы будете управлять, редактировать и отключать точки останова. Вы также можете приостановить код при запуске необработанного исключения или исключения. Это позволяет проверить наличие проблем перед выходом из процесса.
Взгляните на точки останова в действии. Щелкните значок запуска, чтобы начать сеанс отладки. Эта программа остановится на первой точке останова и выведет значение для проверки:
Вы можете щелкнуть значок «Продолжить» (или нажать F5), чтобы переместить эту программу на следующую точку останова. Это будет продолжаться до тех пор, пока вы не дойдете до конца программы.
Отладка TypeScript с исходными картами
Поскольку Typescript становится все более и более популярным, количество проектов Node.js, написанных на TypeScript, несомненно, будет увеличиваться. К счастью, вы также можете отлаживать проекты на основе TypeScript с помощью VS Code.
Сначала создайте файл tsconfig.json в корневом каталоге проекта и включите сопоставление источников:
Затем подключите среду выполнения и установите точку останова в файле TypeScript. Visual Studio Code найдет исходные карты и использует их.
Вы можете явно указать VS Code, где находится исходная карта. Для этого добавьте свойство outFiles в файл конфигурации запуска и укажите точное расположение исходной карты:
Если вы используете ts-node для запуска проекта без прохождения этапа сборки, используйте это вместо файла конфигурации выше:
Поскольку атрибута программы нет, среда выполнения args регистрирует ts-node в качестве обработчика файла TypeScript. Первый аргумент args — это входной файл для этой программы. Теперь вы можете начать сеанс отладки. Если вы программируете на ванильном JavaScript или интерфейсной платформе, вы также можете отлаживать код JavaScript в браузере.
Выше описано, как отлаживать приложение Node.js в Visual Studio Code. Надеюсь, статья будет вам полезна.
Источник: snaptik.ru
Отладка 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. Понимая, как работают эти инструменты, вы сможете выбрать рабочий процесс, который лучше всего подойдет для решения вашей проблемы.
Чтобы выйти на следующий этап, необходимо воспользоваться экосистемой инструментов, предназначенных для вашего языка программирования. Отладка – одна из тех тем, для освоения которых требуется время и усилия, но в конечном итоге преимущества этих навыков всегда окупают потраченные силы.
Источник: www.8host.com
Отладка 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-приложений. Надеемся, эта простая методика поможет сэкономить немного времени, если раньше вам приходилось постоянно переключаться между редактором, браузером и терминалом.
Уважаемые читатели! Пользуетесь ли вы какими-нибудь полезными мелочами, которые повышают производительность труда при разработке веб-приложений?
- Блог компании RUVDS.com
- Разработка веб-сайтов
- JavaScript
- Visual Studio
- Отладка
Источник: habr.com