VS Code — очень мощный инструмент для написания кода, но большинство разработчиков, которых я видел, для отладки обычно используют инструменты разработчика браузера. VS Code имеет очень настраиваемый и универсальный опыт отладки. Я собираюсь подробно рассказать о том, как успешно использовать и настраивать отладчик, чтобы он работал для ваших front-end проектов.
Меню отладки можно вызвать с помощью пункта меню Run and Debug в графическом интерфейсе или, если вам нравятся горячие клавиши, вы можете использовать ⇧⌘D. Это меню дает вам несколько опций графического интерфейса, но самая впечатляющая часть — это использование JSON для настройки отладки. Щелкните на кнопке создания файла JSON, который используется для отладки. В правой нижней части окна появится кнопка добавления конфигураций, которая поможет вам заполнить JSON.
В массиве конфигураций есть определенные свойства, которые вы хотите добавить. Имя key — это то, что вы тестируете, и это может быть любое имя, которое вы хотите дать, но помните, будьте добры к своему будущему «я» и будьте описательны. Следующим ключом будет тип, для большинства фронт-эндовых тестов вы зададите ему chrome. Затем вы зададите свойство request to launch, и это приведет к запуску проекта. Следующей парой ключ/значение будет url и адрес вашего локально запущенного живого сервера. Наконец, вы добавите webRoot с ключом ${workspaceFolder}, это позволит VS Code знать, где вы работаете. Все отправленное и сделанное будет выглядеть следующим образом:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debugging",
"type": "chrome",
"request": "launch",
"url": "http://127.0.0.1:5500/index.html",
"webRoot": "${workspaceFolder}"
}
]
}
Теперь у вас будет доступ к конфигурации в выпадающем меню в отладчике. Когда вы запустите этот экземпляр отладчика, он откроет новый экземпляр Chrome с вашим проектом. Теперь слева от отдельных строк кода вы можете добавить точки останова, которые остановят выполнение кода на той строке, где вы добавили точку останова. Когда точка останова активирована, вы можете использовать правые верхние кнопки для навигации по коду. У вас есть кнопки Продолжить/Пауза, Шаг за, Шаг в, Шаг из, Перезапуск и Стоп.
После этого вы можете сделать еще несколько интересных вещей. Если навести курсор на переменную, можно увидеть ее значение, также можно добавить переменные на вкладку watch, чтобы отслеживать их значение по мере выполнения кода. На вкладке переменных вы можете увидеть, какие переменные доступны в соответствующей области видимости. Вкладка call stack даст вам представление о том, как выглядит ваш текущий стек вызовов.
Надеюсь, теперь, когда вы получили небольшое представление о том, на что способен отладчик VS Code, вы захотите глубже погрузиться в него и по-настоящему понять его возможности. Для получения дополнительной информации я рекомендую обратиться к официальной документации Microsoft по отладчику и понять, какие конфигурации можно добавить в файл launch.json.