Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/levvolkov/setting-up-the-debugger
1. «Использование JS в браузере. Тестирование, дебагинг»
https://github.com/levvolkov/setting-up-the-debugger
automated-testing-of-web-interfaces debugging testing
Last synced: 19 days ago
JSON representation
1. «Использование JS в браузере. Тестирование, дебагинг»
- Host: GitHub
- URL: https://github.com/levvolkov/setting-up-the-debugger
- Owner: levvolkov
- Created: 2024-06-29T17:38:29.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2024-06-29T18:03:50.000Z (7 months ago)
- Last Synced: 2024-11-10T12:28:29.832Z (3 months ago)
- Topics: automated-testing-of-web-interfaces, debugging, testing
- Language: HTML
- Homepage:
- Size: 2.93 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Домашнее задание к занятию «1. Использование JS в браузере. Тестирование, дебагинг»
Любые вопросы по решению задач задавайте в чате учебной группы.
---
## Задание 1. Установка Visual Studio Сode (VS Code) и настройка debugger
### Шаг 1. Установка VS Code
1. Перейти по ссылке [VS Code](https://code.visualstudio.com/download).
2. Выбрать версию для вашей ОС — Windows, Linux, macOS.
3. Загрузить и установить VS Code. В помощь в интернете есть [статья](https://habr.com/ru/post/490754/) про VS Code на русском языке, и ещё вот такая [статья](https://learnjs.ru/journal/nastroyka-vs-code/).
### Шаг 2. Настройка debugger
Нужно сконфигурировать настройки debugger и протестировать его на веб-странице, пример кода которой дан ниже. Подробности о настройке debugger есть в документации по [ссылке](https://code.visualstudio.com/docs/editor/debugging).
**Что нужно сделать**
1. Создайте репозиторий и все следующие шаги выполняйте внутри него.
2. Создайте файл index.html в корневом каталоге вашего репозитория и скопируйте в него код:
```html
Document
hello world
```
3. Создайте папку `.vscode`.
4. В папке `.vscode` создайте файл `launch.json`.
5. В файл `launch.json` добавьте код.
```javascript
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch index.html", // Название конфигурации (конфигураций может быть много, сделано для удобства запуска из debug-панели в VS Code)
"type": "chrome", // Название браузера, который должен быть установлен и в котором будет открыт тестируемый файл
"request": "launch", // Команда, которую необходимо выполнить дебагеру
"file": "index.html" // Название файла, к которому применить команду из пункта "request"
}
]
}
```
6. Нажмите кнопку `F5` на клавиатуре или откройте дебаг-панель VS Code, выберите конфигурацию и запустите, нажав на Play.
[Ссылка](https://code.visualstudio.com/assets/docs/editor/debugging/debugging_hero.png) на пример.
### Шаг 3. Ожидаемый результат
1. Открылся браузер Google Chrome.
2. В адресной строке браузера виден путь к index.html внутри файловой системы вашего компьютера.
3. На экране браузера отображается текст `hello world`.
### Шаг 4. Отправка работы на проверку
Мы с вами уже имеем высокий уровень профессионализма и можем самостоятельно разбираться с проблемами, возникающими на проектах.
Если вы не получаете ожидаемый результат — нужно это исправить:
1. Доведите дебагер до рабочего состояния и убедитесь, что получаете ожидаемый результат из п. 3. Если необходимо, установите нужные расширения и проверьте правильность путей доступа к файлу, который запускается дебагером.
2. В качестве результата домашнего задания пришлите ссылку на репозиторий с верной конфигурацией дебагера для VS Code.
3. Прикрепите ссылку на репозиторий в форму с домашним заданием.
## Задание 2. Точки останова в VS Code
### Шаг 1. Подготовка репозитория
1. Создайте новую ветку в репозитории из предыдущей задачи.
2. Обновите код в вашем index.html.
```html
Document
hello world
const x = "hello world";
debugger;
console.log(x);
```
### Шаг 2. Остановка на явно прописанном `debugger`
1. Когда запустите отладку с помощью кнопки F5, ваш код остановится, выполняя скрипт на строке с командой `debugger`.
2. Сделайте скриншот с точкой останова.
Кроме явного указания `debugger` в коде, точки останова можно ставить прямо в VS Code.
### Шаг 3. Остановка на точке, установленной в VS Code
1. Нужно нажать на строку слева от номера строки.
2. Появится красный кружок.
3. Запустить отладку через кнопку F5.
4. Выполнение остановилось на той строке, где была установлена точка останова.
5. Сделайте скриншот с точкой останова.
### Шаг 4. Отправка работы на проверку
В качестве результата домашнего задания пришлите ссылку на pull request вашей новой ветки и скриншоты, которые нужно поместить в раздел issue репозитория.