Launch json visual studio code как настроить
Обновлено: 29.06.2024
Каждое приложение достигает отметки, когда становится необходимо разбираться в ошибках, от больших до малых. В этом рецепте мы исследуем несколько возможностей для пользователей VS Code, кто хочет отлаживать приложения в браузере.
Этот рецепт покажет как отлаживать приложения Vue CLI в паре с VS Code при их запуске в браузере.
Примечание: Этот рецепт охватывает Chrome и Firefox. Если знаете как настроить отладку VS Code с другими браузерами, поделитесь своими знаниями (см. в конце страницы).
Подготовка
Убедитесь что у вас установлен VS Code и выбранный браузер, а также установлена последняя версия соответствующего расширения отладчика:
Установите и создайте проект с помощью vue-cli, следуя инструкциям по установке в руководстве Vue CLI. Перейдите в каталог новосозданного приложения и откройте VS Code.
Отображение исходного кода в браузере
Перед тем, как вы сможете отлаживать ваши компоненты Vue из VS Code, вам необходимо обновить сгенерированную конфигурацию Webpack для генерации sourcemaps. Мы делаем это, чтобы отладчик имел возможность сопоставлять код в сжатых файлов со строками в оригинальных. Это гарантирует, что вы можете отлаживать приложения даже после того, как все ваши ресурсы были оптимизированы с помощью Webpack.
Если вы используете Vue CLI 2, установите или обновите свойство devtool в файле config/index.js :
Если вы используете Vue CLI 3, установите или обновите свойство devtool в файле vue.config.js :
Запуск приложение из VS Code
Мы предполагаем, что приложение работает на порту 8080 . Если это не так (например, если порт 8080 был уже занят и поэтому Vue CLI автоматически выбирает другой порт), не забудьте изменить соответствующим образом конфигурацию.
Нажмите на значок отладки в панели действий (узкая боковая панель слева) чтобы открыть представление «Отладка», затем нажмите на значок шестерёнки, чтобы настроить файл launch.json, выберите Chrome/Firefox: Launch в качестве окружения. Замените содержимое сгенерированного launch.json указанной ниже конфигурацией:
Установка точки останова
Установите точку останова в файле src/components/HelloWorld.vue на строке 90 где функция data возвращает строку.
Откройте свою любимую консоль в корневом каталоге приложения и запустите его с помощью Vue CLI:
Перейдите в режим отладки, выберите конфигурацию ‘vuejs: chrome/firefox’, затем нажмите F5 или зелёную кнопку для старта.
Альтернативные варианты
Vue devtools
Существуют и другие методы отладки, различающиеся по сложности. Самый популярный и простой из них — использовать Vue.js devtools для Chrome и для Firefox. Главное из преимуществ работы с инструментами разработки (devtools) состоит в том, что они позволяют вам в реальном времени менять свойства данных и сразу видеть изменения на странице. Другим важным преимуществом является возможность отладки во времени (time travel debugging) для Vuex.
Обратите внимание, если на странице используется production/минифицированная сборка Vue.js (как например, стандартная ссылка на CDN), то проверка инструментов разработки по умолчанию отключена и поэтому панель Vue не будет отображаться в инструментах разработчика. Если вы переключитесь на не минифицированную версию, вам может потребоваться обновить страницу, чтобы увидеть изменения.
Использование выражения Debugger
Примеры выше предоставляют отличные рабочие варианты для отладки. Однако, есть и альтернативный вариант, когда вы просто можете использовать нативное выражение debugger прямо в вашем коде. Если вы выберите этот путь, важно не забыть удалить эти выражения после окончания отладки.
Благодарности
Этот рецепт был основан на примере Kenneth Auchenberg, который доступен здесь.
Расширение предназначено для отладки js-кода в редакторе VS Code с использованием Chrome DevTools протокола. Это альтернатива тому, чтобы отлаживать js-код в панели разработчика браузера Chrome. Для начала работы нужно установить это расширение в разделе плагинов.
Давайте создадим директорию project , а внутри нее еще две директории — src и dist . В директории src будут исходники, а в директории dist — готовая сборка. И откроем проект в VS Code — нужно кликнуть по директории project правой кнопкой мыши и выбрать в контекстном меню «Открыть с помощью VS Code».
Для работы отладчика нужно создать файл конфикурации launch.json в директории project/.vscode . Но вручную его создавать не нужно, при первом запуске отладчика файл будет создан автоматически. Для этого нужно кликнуть по иконке «Запуск и отладка», потом по ссылке «создать файл launch.json».
Расширение Debugger for Chrome может работать в двух режимах — либо самостоятельно запускать экземпляр Chrome ( launch ), либо присоедениться к уже работающему экземпляру Chrome ( attach ). Вообще говоря, можно запустить отладку даже без веб-сервера, но удобнее все-таки иметь работающий веб-сервер, например LiveServer . Как установить и настроить расширение Live Server для VS Code — можно прочитать здесь.
Подготовка к отладке
Давайте в директории project/dist создадим файл index.html , который подключает js-файл script.js . И создадим файл script.js , в котором добавим точку останова, чтобы проверить работу отладчика.
Режим launch (запуск)
1. Запуск отладки в режиме launch без сервера
Для начала запустим отладку без использования веб-сервера. Редактируем файл конфигурации отладчика launch.json :
Конфигураций для запуска отладчика может быть несколько, выбрать нужную можно в выпадающем списке слева сверху, после чего нажать F5 для запуска отладки.
Будет запущен браузер Chrome, в котором будет открыт файл project/dist/index.html . Поскольку в этом html-файле подключается js-файл project/dist/script.js — выполнение остановится в точке останова.
2. Запуск отладки в режиме launch с LiveServer
Теперь добавим вторую конфигурацию запуска отладки — уже с использованием веб-сервера LiveServer.
У меня LiveServer работает на порту 5555 (по умолчанию 5500), корень веб-сервера — project/dist . Разумеется, перед запуском отладки надо запустить веб-сервер — кнопка запуска LiveServer находится в правом нижнем углу. Но LiveServer не должен сам запускать браузер, поэтому добавляем опцию liveServer.settings.NoBrowser в файл конфигурации settings.json редактора VS Code.
Режим attach (присоединение)
3. Запуск отладки в режиме attach без сервера
Для начала запустим отладку в режиме attach без использования веб-сервера. Для этого добавляем третью конфигурацию запуска отладчика:
Давайте убедимся в том, что браузер был запущен с опцией remote-debugging-port , для этого открываем еще одну вкладку, набираем в адресной строке chrome://version и проверяем значение «Командная строка».
Теперь надо открыть в браузере файл project/dist/index.html , это можно сделать с помощью сочетания клавиш Ctrl+O. Нужно убедиться, что отладчик браузера Chrome в панели разработчика остановился на точке останова, если это не так — перезагрузить страницу с помощью F5.
И наконец, присоединяемся к этому экземпляру Chrome из редактора VS Code — как обычно, жмем F5 для запуска отладчика.
Если открыта только одна вкладка браузера, не возникает вопроса — к какой вкладке присоединяться. Но если вкладок две или три, нужно сообщить расширению «Debugger for Chrome» — к какой из них нужно присоединиться. Это можно сделать с помощью опции url , в которой надо указать содержимое адресной строки нужной вкладки.
4. Запуск отладки в режиме attach с LiveServer
Теперь запустим отладку в режиме attach с использования сервера LiveServer. Для этого добавляем четвертую конфигурацию запуска отладчика:
Запускать браузер LiveServer должен с опцией remote-debugging-port — поэтому открываем файл настроек VS Code settings.json и добавляем еще одну настройку. Все экземпляры Chrome должны быть закрыты перед тем, как LiveServer запустит новый экземпляр.
Перед запуском отладки надо запустить веб-сервер — кнопка запуска LiveServer находится в правом нижнем углу. Теперь все готово — как обычно, жмем F5 для запуска отладчика.
Глобальные настройки отладчика
Все настройки для отдельного проекта launch.json можно перенести в файл настроек settings.json редактора VS Code — тогда они будут использоваться для всех проектов.
Профиль Chrome для отладки
Расширения Chrome, которые используются для повседневного использования и для веб-разработки часто конфликтуют. Было бы удобно иметь возможность запускать два разных экземпляра Chrome с разными профилями. Один — для повседневного использования при просмотре сайтов, другой — исключительно для веб-разработки.
Давайте создадим еще один ярлык запуска Chrome и изменим строку запуска в свойствах этого ярлыка:
Теперь запустим Chrome с использованием этого ярлыка, чтобы создать новый профиль Developer :
Путь к новому профилю можно посмотреть, если набрать в адресной строке браузера chrome://version :
Можно настроить внешний вид, чтобы он отличался от дефолтного — сразу видно, какой профиль используется:
Теперь можно установить все расширения, которые нужны для веб-разработки. А из профиля Default для повседневного использования — эти расширения удалить.
Используем новый профиль
1. Отладка в режиме launch без сервера и с профилем Developer
Давайте скажем отладчику, чтобы он запускал Chrome с использованием профиля Developer .
Опция userDataDir указывает на директорию для хранения профилей, по умолчанию имеет значение временной директории. При запуске отладчика создается временный профиль Default , с которым и будет запущен браузер.
Но нам нужно запустить браузер с нашим профилем Developer , который расположен совсем в другом месте, поэтому используем значание false и указываем название профиля, который нужно использовать.
Опция может принимать значение true — использовать временный профиль, false — не использовать временный профиль, путь — использовать указанный путь к директории с профилями.
2. Отладка в режиме launch с LiveServer и c профилем Developer
Давайте скажем веб-серверу, чтобы он сам не запускал браузер — это будет делать отладчик:
И скажем отладчику, чтобы он запускал браузер с использованием профиля Developer :
3. Отладка в режиме attach без сервера и с профилем Developer
4. Отладка в режиме attach с LiveServer и с профилем Developer
Давайте скажем веб-серверу, чтобы запускал браузер с использованием профиля Developer и с доп.опцией remote-debugging-port .
Вместо заключения
Получилось несколько многословно, но это из-за того, что мы рассмотрели все возможные варианты запуска отладчика. В реальности запускать отладчик чаще всего удобнее в режиме attach с использованием веб-сервера. LiveServer уже запущен, все изменения сразу отражаются в окне браузера, а если потребовалась отладка — присоединяемся к уже открытому окну.
Редактор Visual Studio Code предлагает огромное количество встроенных функций. Кроме того, он предоставляет поддержку приложений по отладке кода. В этом руководстве мы расскажем, как настроить VS Code для отладки кода Node.js. Для этого мы загрузим расширение Debugger для Chrome, затем создадим и запустим конфигурацию отладки, а также установим точки останова.
Требования
- Локальная установка Node.js (чтобы найти инструкции по установке, выберите соответствующую систему: mac OS, Debian, CentOS, Ubuntu).
- Последняя версия Visual Studio Code.
- Расширение Debugger, установленное в Visual Studio Code.
В данном мануале мы выполним отладку кода приложения по имени Quick Chat. Конечно, описанные здесь инструкции вы можете протестировать на любом своем проекте JavaScript, который можно запустить на сервере Node.
Если у вас нет такого проекта, создайте простой тестовый проект.
1: Создание тестового приложения (опционально)
Разумеется, чтобы выполнить примеры из этого мануала, вам нужно подготовить проект. Как сказано выше, здесь мы используем в этих целях приложение Quick Chat.
С помощью Git клонируйте репозиторий приложения Design-and-Build-a-Chat-Application-with-Socket.io. Помимо этого, вы можете скачать zip-файл и распаковать его.
В этом руководстве мы будем использовать код из 8 части проекта. Прежде всего найдите минутку, чтобы ознакомиться с тем, как в идеале должно работать приложение.
Перейдите в каталог проекта, а затем в каталог part-8:
cd Design-and-Build-a-Chat-Application-with-Socket.io
cd part-8
Далее установите пакеты npm для данного проекта:
Наконец, запустите сервер:
Если вы откроете адрес 127.0.0.1:3000 в Chrome, браузер запросит имя пользователя. Введите имя и нажмите кнопку Chat!, после чего вы будете перенаправлены в приложение и увидите следующее:
User joined the chat.
2: Создание точки останова
Далее мы создадим в приложении точку останова – такие точки позволяют приостановить выполнение кода и проверить его.
Quick Chat – это приложение Node/Express, которое использует Socket.io, чтобы пользователи могли общаться друг с другом в режиме реального времени. Давайте добавим точку останова при подключении клиента к серверу.
Чтобы создать такую точку в VS Code, кликните на пустое пространство слева от номеров строк.
Создайте точку останова внутри функции, которая вызывается при каждом подключении пользователя, это 15 по счету строка. При этом слева от номера строки появится красный кружок.
// .
io.on('connection', socket => console.log('a user connected');
// .
>);
Даже если вы отлаживаете другое приложение, создайте в нем свою точку останова, которую будет легко запустить: например, при запуске приложения, вызове маршрута и т.д.
3: Панель отладки VS Code
Обратите внимание на боковую панель редактора (по умолчанию она находится слева). Чтобы открыть панель отладки, найдите в этой панели кнопку с перечеркнутым жуком и нажмите ее. Здесь вы увидите четыре разных раздела: variables, watch, call stack и breakpoints.
В верхней части панели вы увидите зеленую кнопку воспроизведения и выпадающий список – на нем будет надпись No Configurations, если вы еще не создали конфигурацию отладки. Соответственно, если ранее вы создали конфигурацию, вы увидите ее в этом списке.
VS Code хранит конфигурации отладки в файле launch.json внутри папки .vscode. VS Code помогает создать не только эту папку и файл, но в том числе и предопределенные конфигурации. Давайте попробуем создать нашу первую конфигурацию.
Итак, чтобы создать исходный файл launch.json, кликните на выпадающий список No Configurations и выберите Add Configuration. На экране появится всплывающее окно, которое можно проигнорировать. Приступим же к созданию нашей первой конфигурации.
Ключевыми компонентами конфигурации отладки являются:
Кроме того, VS Code поможет определить другие свойства через IntelliSense.
4: Отладка с помощью программы запуска
Первая конфигурация запустит приложение Node в режиме отладки. Запуск в этом режиме позволяет VS Code подключаться к приложению через определенный порт. Кроме того, нам нужно определить файл программы, которая будет запускаться. В итоге конфигурация выглядит так:
Чтобы запустить эту конфигурацию, выберите ее в выпадающем списке и нажмите зеленую кнопку воспроизведения. В правом верхнем углу появится панель действий отладки с кнопками step, continue, restart и stop.
В дальнейшем используйте флаг –inspect, чтобы запустить приложение Node в режиме отладки.
5: Отладка по идентификатору процесса
node --inspect app.js
Теперь, когда сервер запущен, вы можете запустить конфигурацию отладки. При появлении запроса выберите процесс Node, соответствующий команде, которую вы только что выполнили для запуска сервера.
После этого соединение будет установлено успешно.
6: Отладка через подключение к порту
Третий пример конфигурации – подключение к существующему приложению Node, работающему по заданному порту.
"type": "node",
"request": "attach",
"name": "Attach to Port",
"port": 9229
>,
Мы уже запустили наш сервер с помощью предыдущей конфигурации, поэтому мы можем продолжить работу. Выберите конфигурацию Attach to Port в списке и нажмите кнопку воспроизведения.
Если вы указываете port, localRoot и remoteRoot, вы можете также выполнить отладку, подключившись через сетевое соединение к удаленному компьютеру.
7: Отладка через подключение к порту и Nodemon
Это наш последний пример конфигурации. Здесь мы настроим предыдущую конфигурацию для поддержки автоматической перезагрузки с помощью Nodemon. Nodemon – это пакет, который автоматически перезагружает ваш сервер Node и при этом сохраняет все файлы. Обычно он устанавливается глобально через npm. Этот пакет значительно упрощает параллельное внесение изменений и тестирование.
"type": "node",
"request": "attach",
"name": "Nodemon Debug",
"port": 9229,
"restart": true
>,
Примечание: Современные версии VS Code поддерживают параметр runtimeExecutable, который можно использовать для другой конфигурации Node.js+Nodemon.
Чтобы установить Nodemon, используйте следующую команду:
npm install -g nodemon
Пакет Nodemon автоматически перезапускает сервер, поэтому мы установили значение true для свойства restart в конфигурации отладки. Таким образом, при перезапуске сервера отладчик подключится повторно. Чтобы проверить, как это работает, запустите свой сервер с помощью этой команды (заменив node на nodemon):
nodemon --inspect app.js
Затем запустите вашу конфигурацию.
Здесь мы используем Nodemon, значит, наш сервер будет автоматически перезагружен, если мы внесем изменения в файл и сохраним его.
Итак, мы определили конфигурацию отладки для обработки этого сценария и повторного подключения. Внесите небольшие изменения в свой файл, сохраните его и убедитесь, что при перезапуске сервера ваш отладчик смог подключиться повторно.
Поскольку мне всё равно пришлось ставить Visual Studio Community для того, чтобы установить Windows Kits для работы с WinAPI, то я решил не использовать MingW, а доустановить C++ build tools и использовать их для компиляции. В этом случае придётся переделать задачи (tasks) и настройки VSCode.
Хорошее описание нашёл здесь, его и буду использовать в данной заметке.
Нам потребуется
1. Естественно нам потребуется сама программа VSCode.
2. В Visual Studio Community должен быть установлен компонент Desktop development with C++ :
Чтобы проверить успешную установку, достаточно вызвать Developer Command Prompt for VS 2019 (файл VsDevCmd.bat ) из Пуска. Там нужно запустить файл cl.exe . Вывод консоли должен быть без ошибок:
3. Для VSCode должно быть установлено дополнение (расширение) Microsoft C/C++
Настройка
4. В Проводнике открываем рабочую папку проекта и, удерживая Shift , нажимаем правую кнопку мыши, после чего выбираем Open PowerShell window here
5. В открывшемся окошке PowerShell запускаем VSCode, для этого нужно набрать code . и нажать Enter :
9. Открываем палитру команд с помощью комбинации клавиш Ctrl + Shift + P
10. Список большой, поэтому проще ввести часть слова и выбрать нужную команду Edit Configurations UI из списка:
11. В конфигурации необходимо проверить, а, при необходимости, установить путь для компилятора:
12. Внесём изменения в файл settings.json :
13. Ранее я уже создавал файл Задач tasks.json, поэтому сейчас я добавлю к нему новые строчки:
14. Чтобы у нас была возможность запустить проект на отладку, можно использовать файл launch.json . Но я не хочу создавать такой файл для каждого проекта каждый раз, поэтому сделаю глобальную конфигурацию. Для этого я добавлю строчки в файл settings.json :
Благодаря этому, при нажатии F5 , проект будет откомпилирован, а потом запущен сразу после этого. Просто запустить, без отладки, можно комбинацией Ctrl + F5
Читайте также: