Visual studio code расширение для отладки

Обновлено: 07.07.2024

Фронтенд-разработчик, UX/UI-дизайнер Савио Мартин опубликовал в блоге на dev.to 34 расширения Visual Studio Code (VS Code) для повышения продуктивности.

1. Auto Rename Tag. Автоматически переименовывает парный тег «HTML/XML» так же, как Visual Studio IDE.

2. Better Comments. Помогает создавать в коде более понятные комментарии. Расширение позволяет разбивать аннотации на следующие категории:

  • Оповещения;
  • Запросы;
  • TODO-комментарии;
  • События.

3. Bootstrap 4, Font Awesome 4, Font Awesome 5 Free & Pro Snippets. Плагин кода Visual Studio, содержащий фрагменты кода Bootstrap 4, Font Awesome 4, Font Awesome 5 Free и Pro Snippets. Плагин работает как в стабильной, так и в инсайдерской сборке.

4. Bracket Pair Colorizer 2. Позволяет идентифицировать совпадающие скобки по цвету. Пользователь может определить, какие токены должны соответствовать и какие цвета использовать.

5. change-case. Позволяет быстро изменить регистр текущего выделенного текста или слова.

6. Code Runner. Запускает фрагмент или файл кода для нескольких языков (полный список доступен здесь ) и пользовательские команды.

7. Code Spell Checker. Цель расширения — проверка распространенных ошибок и уменьшение количества ложных срабатываний. Хорошо работает со стилем написания составных слов CamelCase (верблюжий регистр).

8. CSS Peek. Разрешает просмотр идентификаторов CSS и строк классов как определений из HTML-файлов в соответствующий CSS-файл. Позволяет просматривать и переходить к определению.

9. Debugger for Chrome. Расширение для отладки JavaScript-кода в браузере Google Chrome или других задач, поддерживающих протокол Chrome DevTools Protocol .

10. EJS language support. Подсветка синтаксиса для тегов EJS, JavaScript и HTML. Включает автозаполнение javascript.

11. ES7 React/Redux/GraphQL/React-Native snippets. Расширение для React, Redux и GraphQL в JavaScript/TypeScript с синтаксисом ES7 и функциями плагина Babel для VS Code.

12. GitHub Pull Request and Issue. Позволяет просматривать и управлять запросами на вытягивание GitHub и проблемами в Visual Studio Code.

13. GitLens — Git supercharged. Расширяет возможности Git, встроенные в VS Code. Среди функций:

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

14. Google Fonts. Расширение позволяет просматривать список шрифтов Google и вставлять их в HTML или CSS код.

15. Image Preview. Расширение для предварительного просмотр изображений при наведении курсора.

16. GraphQL. Добавляет подсветку синтаксиса, его проверку и языковые функции, такие как:

  • Переход к определению;
  • Просмотр информации о наведении и автозаполнение для проектов graphql ;
  • Работа с запросами, помеченными тегом gql .

17. vscode-styled-components. Подсветка синтаксиса и IntelliSense для стилизованных компонентов . Использует грамматику CSS, построенную на основе language-sass и language-css .

18. Prettify JSON. Расширение Prettify JSON для Visual Studio Code.

19. Import Cost. Позволяет отображать в редакторе размер импортированного пакета. Для этого расширение использует webpack и babili-webpack-plugin .

20. IntelliSense для имен классов CSS в HTML. Обеспечивает завершение имени класса CSS для атрибута HTML class на основе определений, найденных в рабочей области или внешних файлах, на которые ссылается элемент link .

21. JavaScript (ES6) code snippets. Расширение содержит фрагменты кода для JavaScript в синтаксисе ES6 для редактора VS CODE. Поддерживает как JavaScript, так и TypeScript.

22. Live Server. Запускает локальный сервер разработки с функцией перезагрузки в реальном времени для статических и динамических страниц.

23. Live Share. Расширение для совместной разработки, редактирования и отладки в режиме реального времени. Позволяет мгновенно и безопасно делиться проектами. Разработчики, которые подключаются к сеансам, получают необходимые файлы по текущему проекту и могут начать работу без необходимости клонирования репозиториев или SDK.

24. Markdown Preview Enhanced. Расширение для тех, кто знаком с Markdown Preview Plus или RStudio Markdown . Имеет множество полезных функций, среди которых:

  • Автосинхронизация скролла;
  • Поддержка языка диаграмм PlantUML,
  • Экспорт PDF,
  • Создание презентация.

25. Mongo Snippets for Node-js. Расширение для проектов Node-js. Содержит:

  • Сниппеты для подключения к документоориентированной системе управления базами данных MongoDB и запросов;
  • Команду Palette Feature для настройки кода шаблона;
  • Предложения по доработке для моделей Mongoose Models.

26. npm. Поддерживает выполнение npm-скриптов, определенных в файле package.json , и проверку установленных модулей на соответствие зависимостям, определенным в package.json .

27. npm Intellisense. Плагин Visual Studio Code, который автоматически заполняет модули nmp в операторах импорта.

28. Placeholder Images. Расширение позволяет создавать и вставлять так называемые изображения-заполнители в HTML-код в VS Code с помощью сторонних сервисов, таких как Unsplash, placehold.it и LoremFlickr.

29. Polacode. Позволяет делать скриншоты кода с пользовательскими шрифтами и темами.

30. Prettier — Code formatter. Средство для форматирования кода. Нацелено на использование жестко заданных правил по оформлению программ. Обеспечивает согласованный стиль, анализируя код и повторно воспроизводя его с особыми правилами, которые принимают во внимание максимальную длину строки.

31. Tabnine Autocomplete. Помощник на основе искусственного интеллекта (ИИ). Помогает кодировать быстрее и уменьшить количество ошибок. Изучает общедоступный код и использует алгоритмы глубокого обучения ИИ.

32. Tailwind CSS IntelliSense. Расширяет возможности разработки Tailwind, предоставляя пользователям VS Code больше функций, например, автозаполнение, выделение синтаксиса и линтинг (процесс проверки исходного кода на программные и стилистические ошибки).

33. Luna Paint. Позволяет редактировать растровые изображения из VS Code.

34. Quokka.js. Инструмент повышения производительности разработчика для быстрого прототипирования JavaScript/TypeScript. Значения времени выполнения обновляются и отображаются в IDE-среде рядом с кодом по мере его ввода.

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

Расширение Microsoft Office надстройки для Visual Studio Code позволяет отладить Office надстройку Microsoft Edge с исходным временем работы webView (EdgeHTML). Инструкции по отладки Microsoft Edge WebView2 (Chromium основе) см. в этой статье

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

Office Расширение надстройки Debugger Extension, отладка раздела Excel надстроек.

Необходимые компоненты

    (необходимо запускать от имени администратора)
  • Windows 10, 11

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

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

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

Если у вас уже есть проект, пропустить шаг 1 и перейти на шаг 2.

Параметры командной подсказки, в том числе "запуск в качестве администратора" в Windows 10 и 11.

Откройте командную подсказку в качестве администратора.

Перейдите к каталогу проектов.

Запустите следующую команду, чтобы открыть проект в Visual Studio Code в качестве администратора.

После открытия Visual Studio Code перейдите вручную в папку проекта.

Чтобы открыть Visual Studio Code администратора, выберите запуск в качестве параметра администратора при открытии Visual Studio Code после поиска Windows.

Находясь в коде VS, нажмите клавиши CTRL+SHIFT+X, чтобы открыть меню расширений. Поиск расширения "Microsoft Office надстройки Debugger" и установка его.

В папке проекта . vscode проекта откройте файл launch.json. Добавьте в раздел следующий configurations код.

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

Вернись Visual Studio Code и выберите просмотр > отлаговка или введите Ctrl+Shift+D, чтобы перейти на отключаемую точку зрения.

Из параметров отлаговки выберите Attach to Office надстроек. Выберите F5 или > запустить отладку из меню, чтобы начать отладку.

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

Красный круг отображается на строке кода в Visual Studio Code.

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

Перевод статьи «How to set up the debugger for Chrome extension in Visual Studio Code».

Debugger for Chrome

Отладка веб-приложений с помощью Visual Studio Code повышает эффективность вашей работы. Она помогает сэкономить много времени и поддерживать чистоту кода. А все потому, что вам не приходится писать целую кучу console.log и вы можете просматривать выполнение вашего кода построчно. Но раз вы уже здесь, вы, вероятно, и так знаете о преимуществах отладки веб-приложений. Итак, начнем…

Разбираемся в настройках

Для начала вам нужно установить расширение Debugger for Chrome. (Для этого откройте VS Code, нажмите Ctrl+P, вставьте в открывшейся строке команду ext install msjsdiag.debugger-for-chrome и нажмите enter). После установки отладчик можно начинать использовать практически сразу.

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

Далее вам нужно создать файл запуска для Visual Studio Code Debugger. Этот файл будет содержать различные настройки отладчика для выбранного проекта.

Для создания файла запуска нужно перейти в раздел отладки в панели действий (Activity Bar ) и кликнуть на значок шестеренки.

Значок шестеренки

Значок шестеренки

Вам будет предложен список вариантов, из которых нужно выбрать «Chrome».

Выбор нужного варианта

Вот так.

После этого в папке вашего проекта появится директория .vscode с файлом launch.json. Этот файл также откроется в вашем VS Code; в нем мы и будем указывать настройки конфигурации.

Конфигурация

Есть два вида конфигурации отладчика: launch и attach. Устанавливаются они в опции request. Выбирать нужный вид можно для каждого отдельного объекта конфигурации.

Launch

Конфигурация Launch предполагает запуск отдельного экземпляра Chrome, в котором выполняется указанный файл или URL.

Если вы указываете URL, вам нужно указать директорию, файлы которой обслуживаются, в опции webRoot. Это можно сделать путем указания абсолютного пути или с использованием преобразователя $ (он указывает на папку, открытую в вашем рабочем пространстве Visual Studio Code).

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

В примере вы можете видеть два варианта конфигурации launch: один предполагает запуск локального сервера, а другой – отдельного файла.

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

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

Attach

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

Windows

Есть два способа запустить Chrome с удаленной отладкой в Windows. Самый простой – кликнуть правой кнопкой мыши по ярлыку Google Chrome. Затем нужно выбрать нужную опцию в свойствах и добавить следующую команду в поле target.

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

Другой способ – открыть командную строку и выполнить в ней следующую команду (заменив при этом <chrome_path> на настоящее местоположение установки вашего Chrome):

macOS

Откройте терминал и выполните следующую команду:

Linux

Откройте терминал и выполните следующую команду:

Указанные команды (во всех трех вариантах) открывают Chrome с дополнительной опцией, которая указывает порт для удаленной отладки – 9222. Узнать больше по этой теме можно здесь.

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

Вот пример конфигурации attach:

Примечание: если вы не установите опцию «url», вам будет предложен список из ваших открытых вкладок.

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

Заключение

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

В 2016-м году компания Microsoft представила миру свой новый редактор программного кода. В отличие от старшей сестры — полноценной IDE Visual Studio — VS Code получился куда более компактным и легковесным решением. Он разработан как кроссплатформенное ПО и может быть успешно установлен в системах Windows, Linux и macOS.

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

И хоть, за годы своего существования, VSCode зарекомендовал себя, в основном, как продукт для веб-разработки, в 2018 году появилось расширение " Python ", которое дало программистам многочисленные возможности для редактирования, отладки и тестирования кода на нашем любимом языке.

Установка VSCode

Поистине смешные системные требования Visual Studio Code обязательно порадуют владельцев старых машин.

Для полноценной работы редактору требуется всего лишь 1 ГБ оперативной памяти и процессор с частотой от 1.6 ГГц.

Такое сочетание лёгкости и функциональности действительно подкупает, а отсутствие в VS Code каких-либо "лагов" и "фризов" делают разработку ещё более приятным и увлекательным занятием.

Установка редактора никуда не отходит от данной парадигмы и тоже является весьма простым и понятным процессом.

Windows

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

Linux

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

Установить VSCode можно несколькими способами:

Способ №1 : Самый простой способ — воспользоваться менеджером установки "Ubuntu Software".

Откройте "Ubuntu Software" -> введите в поиск "VSCode" -> выберите первую строку и нажмите "Install"

sudo apt install ./<file>.deb

О других способах установки читайте на странице официальной документации в разделе " Setup ";

macOS

Алгоритм установки редактора внутри яблочной операционной системы также не представляет собой ничего сложного:

  1. Сначала нужно скачать Visual Studio Code с официального сайта.
  2. Затем открыть список загрузок браузера и найти там VSCode-Darwin-Stable.zip .
  3. Нажмите на иконку увеличительного стекла, чтобы открыть архив.
  4. Перетащите Visual Studio Code.app в папку приложений, сделав ее доступной на панели запуска.
  5. Щёлкните правой кнопкой мыши по значку и выберете команду " Оставить в Dock ".

Настройка под Python

Установка расширения "Python"

Для начала работы с Python, нужно перейти на вкладку Extensions , что находится на панели слева, либо нажать Ctrl + Shift + X . Сделав это, набираем в строке поиска " Python ".

Для начала работы с Python, установите расширение от Microsoft — "Python".

VS Code поддерживает, как вторую, так и третью версию языка, однако python интерпретатор на свою машину вам придётся поставить самостоятельно.

Если вы новичок и только начинаете работу с Python или же не имеете каких-то особых указаний на этот счёт, то лучшим выбором станет именно актуальная третья версия.

Вот краткий список основных возможностей расширения "Python":

  • Автодополнение кода.
  • Отладка.
  • Поддержка сниппетов.
  • Написание и проведение тестов.
  • Использование менеджера пакетов Conda.
  • Возможность создания виртуальных сред.
  • Поддержка интерактивных вычисления на Jupyter Notebooks.

Выбор версии интерпретатора Python

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

  1. Откройте командную строку VSCode (Command Palette) комбинацией Ctrl + Shift + P .
  2. Начинайте печатать " Python: Select Interpreter ";
  3. После, выберите нужную версию интерпретатора.

Также выбрать версию можно в панели активности в левом нижнем углу:

Выбор версии Python-интерпретатора в панели активности VS Code

Если вы хотите использовать pipenv в своем проекте:

  1. Установите pipenv командой pip install pipenv (или pip3 install pipenv );
  2. Выполните команду pipenv install ;
  3. Откройте " Command Palette ", напечатайте " Python: Select Interpreter " и из списка выберите нужную версию интерпретатор.

Pipenv - современный менеджер зависимостей для Python-проектов

Работа в VS Code

Запуск редактора

Как и другие современные редакторы и среды разработки, VS Code фиксирует состояние на момент закрытия программы. При следующем запуске, он открывается в том же самом виде, в котором существовал до завершения работы.

Так как VSCode, в первую очередь — редактор, а не полновесная среда разработки, здесь нет особой привязки к проекту. Вы можете сходу создавать, открывать и редактировать нужные вам файлы. Достаточно, после запуска, нажать Open File или New File и можно начинать работу.

Интерфейс

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

Весь UI VSCode разделился, таким образом, на шесть областей:

  1. Область редактора — основная область для написания и редактирования вашего кода.
  2. Боковая панель — здесь содержатся различные представления (например проводник).
  3. Строка состояния — визуализирует рабочую информацию об открытом в данный момент файле.
  4. Командная панель — классическая главная панель с вкладками file, edit, go, run и так далее.
  5. Панель активности — область в крайнем левом углу, где находятся важные вспомогательные вкладки, вроде контроля версий, дебаггера и магазина расширений.
  6. Мультипанель — панель на которой располагается вывод отладку, информация об ошибках и предупреждениях, а также встроенный в VS Code терминал.

Запуск Python-кода (run)

Выполнить код можно несколькими способами. Самый простой — комбинацией Ctrl + Alt + N .

Для запуска python-кода выполните комбинацию "Ctrl + Alt + N"

Также можно вызвать скрипт контекстным меню, выбрав строку " Run Python File in Terminal ".

Или нажав иконку " Run " в правом верхнем углу.

Иконка "Run" в правом верхнем углу запустит Python-код на выполнение

Отладка (debugger)

Возможность полноценной отладки — сильная сторона редактора. Чтобы перейти в режим отладки, нужно установить точку останова и нажать F5 .

Для перехода в режим отладки, установите breakpoint и нажмите "F5"

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

Слева откроется панель дебаггера с информацией о состоянии переменных (Variables), отслеживаемых переменных (Watch) и стеке вызова (Call stack).

Сверху расположена панель инструментов дебаггера.

Рассмотрим команды (слева направо):

  1. continue ( F5) — перемещает между breakpoint-ами;
  2. step over ( F10) — построчное (пошаговое) перемещение;
  3. step into ( F11) — построчное (пошаговое) перемещение c заходом в каждую вызываемую функцию;
  4. step out ( Shift + F11) — работает противоположно step into — выходит из вызванной функции, если в данный момент вы находитесь внутри неё. Далее работает как continue .
  5. restart ( Ctrl + Shift + F5) — начинаем отладку с начала.
  6. stop ( Shift + F5) — остановка и выход из режима отладки.
Чаще всего для отладки используются continue ( F5 ) и step over ( F10 ).

С отладкой разобрались 👌.

Тестирование (testing)

С поддержкой тестов у VS Code тоже всё в порядке, однако, по умолчанию тестирование отключено. Для его активации нужна небольшая настройка.

Сначала следует нажать комбинацию клавиш Ctrl + Shift + P и в так называемой палитре команд выбрать Python: Configure Tests .

Для выбора фреймворка для тестов, выполните комбинацию "Ctrl + Shift + P" и наберите "Python: Configure Tests"

Редактор предложит вам определить фреймворк (мы выбрали "pytest") и папку, содержащую тесты (мы выбрали ". Root directory").

Создадим новый файл с тестами ( test_app.py ) и запустим его, кликнув правой кнопкой мыши на этом файле и выбрав пункт " Run Current Test File ".

Также тесты можно запускать по нажатию на кнопку Run Tests в нижней строке состояния
Запуск тестов в VSCode с использованием фреймворка pytest.

Чтобы увидеть результаты, необходимо открыть вкладку Output на панели, и в выпадающем меню выбрать пункт PythonTestLog .

Как мы видим, первый тест прошел успешно, а второй провалился.

Для удобства работы с тестами, установим расширение " Python Test Explorer for Visual Studio Code ".

Расширение для VSCode "Python Test Explorer for Visual Studio Code"

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

Вкладка "test" (иконка с колбой в панели слева) откроет удобный проводник для запуска тестов и просмотра их состояния.

Для начала работы с системами контроля версий обратимся к вкладке Source Control , что находится на панели активности слева (или Ctrl + Shift + G ).

По умолчанию VS Code дружит с Git и GitHub

Поддержку других систем возможно настроить самостоятельно, установив соответствующие расширения.

Чтобы связать проект с github (или gitlab), сперва необходимо скачать на ваш ПК git (если ещё не скачан). VSCode автоматически определит его местоположение, и затем у вас появится возможность синхронизации.

Для работы с git, зайдите в меню слева "Source Control"

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

Все необходимые команды для работы в git находятся в меню панели "Source Control" (3 точки)

А для удобного просмотра изменений в git, советую установить расширение " Git Graph ". После его установки, на панели " Source Control " появится новая кнопка, которая отобразит граф состояния (git log).

Расширение предназначено для отладки 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 уже запущен, все изменения сразу отражаются в окне браузера, а если потребовалась отладка — присоединяемся к уже открытому окну.

Читайте также: