Debugger for chrome visual studio code настройка
Отладка JavaScript не самый интересный аспект программирования на JavaScript, но это жизненно важный навык. В этой статье рассматриваются два инструмента, которые помогут вам отладить JavaScript как профессионал.
Представьте на мгновение, что функция console.log() не существует в JavaScript. Я уверен, что первый вопрос, который вы себе зададите, будет: «Как я смогу убедиться, что мой код работает правильно?»
Ответ заключается в использовании инструментов отладки. В течение долгого времени большинство разработчиков, включая меня, использовали console.log для отладки неработающего кода. Это быстрый и простой в использовании. Тем не менее, иногда вещи могут становиться привередливыми, если вы не знаете, где и что является причиной ошибки. Часто вы обнаруживаете, что расставляете ловушки console.log всему коду, чтобы увидеть, какой из них выявит виновника.
В этой статье мы рассмотрим, как использовать средства отладки, предоставляемые Visual Studio Code. Мы также рассмотрим, как использовать расширение Debugger for Chrome, которое позволяет интегрировать VS Code с Chrome Dev Tools. Когда мы закончим, вы больше никогда не захотите использовать console.log() .
Предпосылки
Для этого урока вам нужно только иметь прочную основу в современном JavaScript . Мы также посмотрим, как мы можем отладить тест, написанный с использованием Mocha и Chai . Мы будем использовать неработающий проект, пример отладки , чтобы научиться исправлять различные ошибки без использования единого console.log . Вам понадобится следующее:
Начните с клонирования проекта -примера отладки в вашу рабочую область. Откройте проект в VS Code и установите зависимости через встроенный терминал:
Теперь мы готовы научиться отлаживать проект JavaScript в VS Code.
Отладка JavaScript в VS Code
Первый файл, на который я хотел бы взглянуть, это src/places.js . Вам нужно открыть папку debug-project в VS Code ( Файл > Открыть папку ) и выбрать файл в редакторе.
Код довольно прост, и если у вас достаточно опыта в кодировании, вы можете заметить, что в нем есть пара ошибок. Если вы заметили их, пожалуйста, игнорируйте их. Если нет, отлично. Давайте добавим несколько строк внизу, чтобы вручную проверить код:
Теперь я уверен, что вам не терпится сделать console.log для вывода значения places . Но давайте не будем этого делать. Вместо этого давайте добавим точки останова . Просто добавьте их, щелкнув левой кнопкой мыши по желобу — то есть пустое пространство рядом с номерами строк:
Видите красные точки на стороне? Это точки останова. Точка останова — это просто визуальная индикация, указывающая инструменту отладчика, где приостановить выполнение. Затем на панели действий нажмите кнопку отладки (значок с надписью «Ошибки не разрешены»).
Посмотрите на верхний раздел. Вы заметите значок шестеренки с красной точкой. Просто нажмите на него. Файл конфигурации отладки, launch.json , будет создан для вас. Обновите конфигурацию следующим образом, чтобы вы могли запустить отладчик VS Code на places.js :
Примечание. В зависимости от операционной системы вам может потребоваться заменить двойную обратную косую черту ( \\ ) на одну прямую косую черту ( / ).
После сохранения файла вы увидите, что на панели отладки появился новый раскрывающийся список « Места запуска» . Чтобы запустить его, вы можете:
- нажмите зеленую кнопку Play на панели отладки
- нажмите F5
- нажмите Отладка > Начать отладку в строке меню.
Используйте любой метод, который вам нравится, и наблюдайте за процессом отладки в действии:
Ряд вещей происходит в быстрой последовательности, когда вы нажимаете кнопку отладки. Во-первых, есть панель инструментов, которая появляется в верхней части редактора. Имеет следующие элементы управления:
- Drag Dots anchor : для перемещения панели инструментов туда, где она ничего не блокирует
- Продолжить : продолжить сеанс отладки
- Шаг за шагом : выполнение кода построчно, пропуская функции
- Шаг в : выполнение кода построчно, входя в функции
- Выход : если уже внутри функции, эта команда выведет вас
- Restart : перезапускает сеанс отладки
- Стоп : останавливает сеанс отладки.
Прямо сейчас вы заметите, что сеанс отладки остановился на вашей первой точке останова. Чтобы продолжить сеанс, просто нажмите кнопку « Продолжить» , что приведет к продолжению выполнения до достижения второй точки останова и повторной паузы. Повторное нажатие кнопки Continue завершит выполнение, и сеанс отладки будет завершен.
Давайте начнем процесс отладки снова, нажав F5 . Убедитесь, что две точки останова все еще на месте. Когда вы устанавливаете точку останова, код останавливается на указанной строке. Эта строка не выполняется, если вы не нажмете « Продолжить» ( F5 ) или « Перешагните» ( F10 ). Прежде чем вы нажмете что-нибудь, давайте посмотрим на разделы, которые составляют панель отладки:
- Переменные : отображает локальные и глобальные переменные в текущей области (т. Е. В точке выполнения)
- Смотрите : вы можете вручную добавить выражения переменных, которые вы хотите отслеживать
- Стек вызовов : отображает стек вызовов выделенного кода
- Точки останова : отображает список файлов с точками останова вместе с их номерами строк.
Чтобы добавить выражение в раздел « Watch », просто нажмите знак « +» и добавьте любое допустимое выражение JavaScript — например, places.length . Когда отладчик делает паузу, если ваше выражение находится в области видимости, значение будет напечатано. Вы также можете навести курсор на переменные, которые в настоящее время находятся в области видимости. Появится всплывающее окно с отображением их значений.
В настоящее время массив places пуст. Нажмите любой элемент управления навигацией, чтобы увидеть, как работает отладка. Например, Step over перейдет к следующей строке, а Step into перейдет к функции addPlace . Потратьте немного времени, чтобы ознакомиться с элементами управления.
Как только вы сделаете шаг, наведите курсор на переменную places . Появится всплывающее окно. Расширяйте значения внутри, пока у вас не появится похожее представление:
Вы также можете проверить все переменные, находящиеся в области действия, в разделе « Переменные ».
Это довольно круто по сравнению с тем, что мы обычно делаем с console.log . Отладчик позволяет нам проверять переменные на более глубоком уровне. Возможно, вы также заметили пару проблем с выводом массива places :
- в массиве несколько пробелов, то есть places[0] и places[2] не undefined
- свойство numType отображается even для нечетных значений id .
А пока просто завершите сеанс отладки. Мы исправим их в следующем разделе.
Отладка тестов с Mocha
Откройте test/placesTest.js и просмотрите код, написанный для проверки кода в places.test . Если вы никогда раньше не использовали Mocha, вам нужно сначала установить его глобально, чтобы запустить тесты.
Вы также можете запустить npm test для выполнения тестов. Вы должны получить следующий вывод:
Все тесты не пройдены. Чтобы выяснить проблему, мы собираемся запустить тесты в режиме отладки. Для этого нам нужна новая конфигурация. Перейдите на панель отладки и щелкните раскрывающийся список, чтобы получить доступ к параметру « Add Configuration :
launch.json файл launch.json с всплывающим списком нескольких конфигураций на выбор.
Просто выберите Mocha Tests . Следующая конфигурация будет вставлена для вас:
Перевод статьи «How to set up the debugger for Chrome extension in Visual Studio Code».
Отладка веб-приложений с помощью 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 с включенной возможностью удаленной отладки. Теперь пора исследовать это расширение и углубить свои знания. Я настоятельно советую изучить репозиторий этого расширения.
Способность отладки кода является важным навыком разработчика. Важно понимать и использовать широкий спектр инструментов отладки, которые существуют для конкретного языка программирования.
К сожалению, отладка может показаться не столь очевидной при работе с 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), которая будет срабатывать только при выполнении определенного условия.
Например, предположим, что мы хотим предотвратить обработку события на кнопке входа в систему только тогда, когда пользователь пытается войти в систему без ввода имени пользователя.
В случае отладки приложения 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, как ему отлаживать наше приложение.
Расширение предназначено для отладки 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 значительно повышает эффективность работы, помогает сэкономить много времени и сохранить чистоту кода. Приступим!
Начало установки
Для начала установите расширение Debugger for Chrome. Затем создайте файл запуска для отладчика Visual Studio Code. Этот файл содержит различные конфигурации отладчика для проекта.
Создать файл запуска можно, перейдя в раздел debug в Activity Bar и щелкнув на значок шестеренки.
В списке опций будет предложено выбрать «Chrome».
После этого появится директория .vscode с файлом launch.json .
Конфигурации
Есть два типа конфигураций отладки Chrome: launch и attach . Их можно установить в опции request внутри каждого объекта конфигурации.
Launch
Конфигурация launch запускает экземпляр Chrome, на котором выполняется указанный файл или URL-адрес. При указании URL нужно установить webRoot в директорию, из которой извлекаются файлы. Можно использовать как абсолютный путь, так и путь с резолвером $ . Это папка, открытая в рабочей области Visual Studio Code.
Примечание: будьте внимательны при установке webRoot , он используется для просмотра URL-адресов файлов на компьютере.
При работе экземпляра Chrome, который запущен отладчиком, будет использоваться временный сеанс, предполагающий отсутствие расширений или открытых вкладок. Чтобы запустить экземпляр Chrome с пользователем и расширениями, нужно закрыть каждый работающий экземпляр.
Примечание: при остановке отладчика окно Chrome закрывается.
Attach
Эта конфигурация прикрепляет отладчик к работающему экземпляру Chrome. Однако для работы этой опции нужно запустить Chrome с включенной удаленной отладкой. Способ запуска экземпляра Chrome с удаленной отладкой зависит от ОС.
Windows
Примечание: Chrome с включенной удаленной отладкой будет запускаться при каждом нажатии на ярлык.
macOS
Откройте терминал и выполните следующую команду:
Linux
Запустите терминал и выполните данную команду:
Независимо от ОС откроется Chrome с флагом. В данном случае: --remote-debugging-port , который будет установлен на 9222 . Узнать об этом подробнее можно здесь.
Примечание: если у вас запущены другие экземпляры Chrome без удаленной отладки, обязательно закройте их перед запуском нового.
Пример конфигурации attach :
Примечание: при отсутствии опции «url» появится список с открытыми вкладками.
В этом расширении есть много полезных опций, которые можно использовать для настройки конфигураций проекта. Прочитать документацию можно здесь.
Заключение
Поздравляем! Мы узнали, как установить и настроить отладчик для Chrome в Visual Studio Code. Также мы узнали, как запустить Google Chrome с удаленной отладкой. Настоятельно рекомендую взглянуть на репозиторий расширения.
Читайте также: