Любые вопросы по решению задач задавайте в чате учебной группы.
- Перейти по ссылке VS Code.
- Выбрать версию для вашей ОС — Windows, Linux, macOS.
- Загрузить и установить VS Code. В помощь в интернете есть статья про VS Code на русском языке, и ещё вот такая статья.
Нужно сконфигурировать настройки debugger и протестировать его на веб-странице, пример кода которой дан ниже. Подробности о настройке debugger есть в документации по ссылке.
Что нужно сделать
- Создайте репозиторий и все следующие шаги выполняйте внутри него.
- Создайте файл index.html в корневом каталоге вашего репозитория и скопируйте в него код:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>- Создайте папку
.vscode. - В папке
.vscodeсоздайте файлlaunch.json. - В файл
launch.jsonдобавьте код.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch index.html", // Название конфигурации (конфигураций может быть много, сделано для удобства запуска из debug-панели в VS Code)
"type": "chrome", // Название браузера, который должен быть установлен и в котором будет открыт тестируемый файл
"request": "launch", // Команда, которую необходимо выполнить дебагеру
"file": "index.html" // Название файла, к которому применить команду из пункта "request"
}
]
}- Нажмите кнопку
F5на клавиатуре или откройте дебаг-панель VS Code, выберите конфигурацию и запустите, нажав на Play. Ссылка на пример.
- Открылся браузер Google Chrome.
- В адресной строке браузера виден путь к index.html внутри файловой системы вашего компьютера.
- На экране браузера отображается текст
hello world.
Мы с вами уже имеем высокий уровень профессионализма и можем самостоятельно разбираться с проблемами, возникающими на проектах.
Если вы не получаете ожидаемый результат — нужно это исправить:
- Доведите дебагер до рабочего состояния и убедитесь, что получаете ожидаемый результат из п. 3. Если необходимо, установите нужные расширения и проверьте правильность путей доступа к файлу, который запускается дебагером.
- В качестве результата домашнего задания пришлите ссылку на репозиторий с верной конфигурацией дебагера для VS Code.
- Прикрепите ссылку на репозиторий в форму с домашним заданием.
- Создайте новую ветку в репозитории из предыдущей задачи.
- Обновите код в вашем index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>hello world</h1>
</body>
<script>
const x = "hello world";
debugger;
console.log(x);
</script>
</html>- Когда запустите отладку с помощью кнопки F5, ваш код остановится, выполняя скрипт на строке с командой
debugger. - Сделайте скриншот с точкой останова.
Кроме явного указания debugger в коде, точки останова можно ставить прямо в VS Code.
- Нужно нажать на строку слева от номера строки.
- Появится красный кружок.
- Запустить отладку через кнопку F5.
- Выполнение остановилось на той строке, где была установлена точка останова.
- Сделайте скриншот с точкой останова.
В качестве результата домашнего задания пришлите ссылку на pull request вашей новой ветки и скриншоты, которые нужно поместить в раздел issue репозитория.