{"id":19411603,"url":"https://github.com/levvolkov/setting-up-the-debugger","last_synced_at":"2026-03-19T09:45:14.910Z","repository":{"id":246693438,"uuid":"821876110","full_name":"levvolkov/setting-up-the-debugger","owner":"levvolkov","description":"1. «Использование JS в браузере. Тестирование, дебагинг»","archived":false,"fork":false,"pushed_at":"2024-06-29T18:03:50.000Z","size":3,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-23T01:55:58.889Z","etag":null,"topics":["automated-testing-of-web-interfaces","debugging","testing"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/levvolkov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-29T17:38:29.000Z","updated_at":"2025-01-30T22:02:10.000Z","dependencies_parsed_at":"2024-06-29T18:52:32.763Z","dependency_job_id":null,"html_url":"https://github.com/levvolkov/setting-up-the-debugger","commit_stats":null,"previous_names":["levvolkov/setting-up-the-debugger"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/levvolkov/setting-up-the-debugger","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levvolkov%2Fsetting-up-the-debugger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levvolkov%2Fsetting-up-the-debugger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levvolkov%2Fsetting-up-the-debugger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levvolkov%2Fsetting-up-the-debugger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/levvolkov","download_url":"https://codeload.github.com/levvolkov/setting-up-the-debugger/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levvolkov%2Fsetting-up-the-debugger/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29260760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-09T04:11:57.159Z","status":"ssl_error","status_checked_at":"2026-02-09T04:11:56.117Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["automated-testing-of-web-interfaces","debugging","testing"],"created_at":"2024-11-10T12:22:15.026Z","updated_at":"2026-02-09T09:34:25.786Z","avatar_url":"https://github.com/levvolkov.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Домашнее задание к занятию «1. Использование JS в браузере. Тестирование, дебагинг»\n\nЛюбые вопросы по решению задач задавайте в чате учебной группы.\n\n---\n\n## Задание 1. Установка Visual Studio Сode (VS Code) и настройка debugger\n\n### Шаг 1. Установка VS Code\n\n1. Перейти по ссылке [VS Code](https://code.visualstudio.com/download).\n2. Выбрать версию для вашей ОС — Windows, Linux, macOS.\n3. Загрузить и установить VS Code. В помощь в интернете есть [статья](https://habr.com/ru/post/490754/) про VS Code на русском языке, и ещё вот такая [статья](https://learnjs.ru/journal/nastroyka-vs-code/).\n\n### Шаг 2. Настройка debugger\n\nНужно сконфигурировать настройки debugger и протестировать его на веб-странице, пример кода которой дан ниже. Подробности о настройке debugger есть в документации по [ссылке](https://code.visualstudio.com/docs/editor/debugging).\n\n**Что нужно сделать**\n1. Создайте репозиторий и все следующие шаги выполняйте внутри него.\n2. Создайте файл index.html в корневом каталоге вашего репозитория и скопируйте в него код:\n\n  ```html\n  \u003c!DOCTYPE html\u003e\n  \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n      \u003ctitle\u003eDocument\u003c/title\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n      \u003ch1\u003ehello world\u003c/h1\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n  ```\n\n  3. Создайте папку `.vscode`.\n  4. В папке `.vscode` создайте файл `launch.json`.\n  5. В файл `launch.json` добавьте код.\n\n  ```javascript\n  {\n    \"version\": \"0.2.0\",\n    \"configurations\": [\n      {\n        \"name\": \"Launch index.html\", // Название конфигурации (конфигураций может быть много, сделано для удобства запуска из debug-панели в VS Code)\n        \"type\": \"chrome\", // Название браузера, который должен быть установлен и в котором будет открыт тестируемый файл\n        \"request\": \"launch\", // Команда, которую необходимо выполнить дебагеру\n        \"file\": \"index.html\" // Название файла, к которому применить команду из пункта \"request\"\n      }\n    ]\n  }\n  ```\n\n  6. Нажмите кнопку `F5` на клавиатуре или откройте дебаг-панель VS Code, выберите конфигурацию и запустите, нажав на Play.\n    [Ссылка](https://code.visualstudio.com/assets/docs/editor/debugging/debugging_hero.png) на пример.\n\n### Шаг 3. Ожидаемый результат\n\n1. Открылся браузер Google Chrome. \n2. В адресной строке браузера виден путь к index.html внутри файловой системы вашего компьютера.\n3. На экране браузера отображается текст `hello world`.\n\n### Шаг 4. Отправка работы на проверку\n\nМы с вами уже имеем высокий уровень профессионализма и можем самостоятельно разбираться с проблемами, возникающими на проектах.\n\nЕсли вы не получаете ожидаемый результат — нужно это исправить:\n\n1. Доведите дебагер до рабочего состояния и убедитесь, что получаете ожидаемый результат из п. 3. Если необходимо, установите нужные расширения и проверьте правильность путей доступа к файлу, который запускается дебагером.\n2. В качестве результата домашнего задания пришлите ссылку на репозиторий с верной конфигурацией дебагера для VS Code.\n3. Прикрепите ссылку на репозиторий в форму с домашним заданием.\n\n## Задание 2. Точки останова в VS Code\n\n### Шаг 1. Подготовка репозитория\n\n1. Создайте новую ветку в репозитории из предыдущей задачи.\n2. Обновите код в вашем index.html.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003ch1\u003ehello world\u003c/h1\u003e\n  \u003c/body\u003e\n  \u003cscript\u003e\n    const x = \"hello world\";\n    debugger;\n    console.log(x);\n  \u003c/script\u003e\n\u003c/html\u003e\n```\n\n### Шаг 2. Остановка на явно прописанном `debugger`\n\n1. Когда запустите отладку с помощью кнопки F5, ваш код остановится, выполняя скрипт на строке с командой `debugger`.\n2. Сделайте скриншот с точкой останова.\n\nКроме явного указания `debugger` в коде, точки останова можно ставить прямо в VS Code.\n\n### Шаг 3. Остановка на точке, установленной в VS Code\n\n1. Нужно нажать на строку слева от номера строки.\n2. Появится красный кружок.\n3. Запустить отладку через кнопку F5.\n4. Выполнение остановилось на той строке, где была установлена точка останова.\n5. Сделайте скриншот с точкой останова.\n\n### Шаг 4. Отправка работы на проверку\n\nВ качестве результата домашнего задания пришлите ссылку на pull request вашей новой ветки и скриншоты, которые нужно поместить в раздел issue репозитория.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flevvolkov%2Fsetting-up-the-debugger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flevvolkov%2Fsetting-up-the-debugger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flevvolkov%2Fsetting-up-the-debugger/lists"}