В прошлых статьях мы :
Сегодня мы продолжим и рассмотрим процесс отладки непосредственно из Visual Studio Code.
Запускаем VS Code - по умолчанию должен открыться наш прошлый проект.
Если этого по какой-то причине не произошло, выбираем в меню :
File -> Open Folder ... ( Ctrl + K , Ctrl + O )
и открываем папку нашего проекта.
Чтобы упростить процесс запуска и отладки давайте установим в VS Code расширение Live Server.
Установка расширения Live Server
Это расширение позволит нам запускать проект на локальном веб сервере.
Для установки расширения :
- Переключитесь в VS Code на вкладку расширений Extensions ( Ctrl + Shift + X )
- Наберите в строке поиска расширений LIve Server, в списке расширений выберите Live Server
- В центральной части экрана в области описания расширения нажмите на кнопку install
Дождитесь окончания установки расширения, затем :
- переключитесь на Eхplorer VS Code ( Ctrl + Shift + E )
- Выберите файл index.html
- Обратите внимание на статусную строку VS Code, там должна появиться кнопка Go Live, клик на которой приведет к запуску Live Server
Запуск Live Server
Проверим, нажимаем "Go Live", должен запуститься ваш браузер и открыть локальный веб сервер с вашим проектом :
При этом в статусной строке надпись "Go Live" Заменится на "Port : 5500" :
Именно на этом порту Live Server запускает наш локальный веб сервер:
Редактирование фалов проекта с запущенным Live Server
Оценим одно из важных преимуществ использования расширения - попробуем при открытом проекте отредактировать наш 'index.html'.
Добавим строку в body после h1.
В новой строке добавим параграф, для этого напечатаем 'p' и применим автодополнение - нажмем на клавишу "Tab". Должно получиться так :
Добавим в параграф какой-то текст, например "Some text" и переключимся на Chrome, где открыт наш проект :
Обратите внимание : мы не сохраняли файл 'index.html' (он сохранился автоматически, если вы настроили автосохранение, как описано в первой статье) и не обновляли страницу Chrome, изменения применились сразу же, автоматически.
Согласитесь, это удобно и экономит нам время.
Остановим теперь Live Server нажав в статусной строке на Port : 5500
В результате мы увидим такое сообщение :
Подготовим теперь все необходимо для отладки.
Настройка процесса отладки в Visual Studio Code с Live Server
Как производить отладку при помощи Chrome мы рассмотрели в этой статье.
Здесь мы поговорим о том, как настроить и использовать отладку непосредственно в Visual Studio Code при использовании расширения Live Server.
Для этого нам понадобиться произвести ряд настроек. Начнём с того, что добавим к нашему проекту папку с названием '.vscode' и создадим в ней три файла : 'launch.json' , 'settings.json' , 'tasks.json' :
Для чего нужны эти файлы :
- 'launch.json' - в этом файле мы настраиваем параметры запуска отладчика
- 'settings.json' - это файл общих настроек, в него мы пропишем необходимые нам настройки расширения Live Server
- 'tasks.json' - в этом файле мы опишем команды, которые необходимы отладчику для запуска и остановки Live Server при запуске и остановке процесса отладки
Скопируйте приведенное ниже содержимое в соответствующие файлы :
Содержимое 'launch.json'
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"port": 9222,
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}",
"preLaunchTask": "StartServer",
"postDebugTask": "StopServer"
}
]
}
Содержимое 'settings.json'
{
"liveServer.settings.ChromeDebuggingAttachment": true,
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.host": "localhost",
"liveServer.settings.NoBrowser": true
}
Содержимое 'tasks.json'
{
"version": "2.0.0",
"tasks": [
{
"label": "StartServer",
"type": "process",
"command": "${input:startServer}"
},
{
"label": "StopServer",
"type": "process",
"command": "${input:stopServer}"
}
],
"inputs": [
{
"id": "startServer",
"type": "command",
"command": "extension.liveServer.goOnline"
},
{
"id": "stopServer",
"type": "command",
"command": "extension.liveServer.goOffline"
}
]
}
Должно получиться так :
Запуск отладки
Теперь все готово для начала отладки.
Но сначала давайте установим точку останова в файле "01.js" по аналогии с тем, как мы это делали при отладке в Chrome.
Установить точку останова можно в редакторе VS Code любым из способов :
- кликнуть левой кнопкой мыши слева от номера строки
- установить курсор на нужную нам строку и нажать F9
Слева от номера строки должен появиться маркер в виде красной точки :
Теперь запускаем отладку - нажимаем F5 или выбираем в меню Run -> Start Debugging.
Должен запуститься наш Live Server и открыть Chrome с нашим проектом, при этом в Visual Studio Code должен автоматически активироваться режим отладки ( вкладка Run and Debug ( Ctrl + Shift + D ) ), выполнение должно приостановиться на нашей точке останова, о чем будет свидетельствовать соответствующий маркер в строке :
Просмотр значений переменных
При этом, если мы подведем курсор мыши к нашей переменной 'somevar' , то VS Code покажет нам её значение во всплывающей подсказке ( 'undefined' ) :
выделим двойным кликом нашу переменную somevar и откроем контекстное меню, нажав правую кнопку мыши :
Выберем пункт меню 'Add to Watch' , как показано выше, переменная будет добавлена в область просмотра значений :
Пошаговое выполнение кода в отладчике
Теперь обратим внимание на дополнительную панель отладки :
Как видно, в панели нам доступны 6 кнопок, при наведении мышкой на каждую кнопку появляется соответствующая подсказка :
- Continue ( F5 )
- Step Over ( F10 )
- Step Into ( F11 )
- Step Out ( F 12 )
- Restart ( Ctrl + Shift + F5 )
- Stop ( Shift + F5 ) / [Alt] Disconnect ( Shift + F5 )
Для того, чтобы продвинуться на один шаг в процессе отладки воспользуемся второй кнопкой - Step Over или просто нажмем F10.
Обратите внимание - в панели Watch изменилось значение переменной 'somevar' с 'undefined' на 5 , маркер текущей выполняемой строки переместился на строку 4.
Перейдём ещё на шаг дальше - снова нажмём F10 :
Обратите внимание : курсор переместился в строке 4 - так как это последняя строка нашего кода, а в области DEBUG CONSOLE мы теперь видим нашу строку, выведенную командой
console.log('01.js - Here we are !');
Итоги
- Мы установили плагин Live Server, оценили удобство внесения изменений в index.html при открытом проекте
- Настроили Visual Studio на отладку с Live Server
- Научились запускать отладку, устанавливать точки останова, просматривать значения переменных , двигаться по строкам кода в процессе отладки, отслеживать изменения переменных и консольный вывод непосредственно в Visual Studio Code
Теперь вы готовы к самостоятельному изучению JavaScript по специализированным ресурсам, описание которых я подготовлю для вас в следующей статье.
