Начало работы с помощью кнопки Запустить проект

Статья
03/29/2023

Используйте это руководство, чтобы узнать, как открыть и закрыть средства разработки, нажав кнопку Запустить проект , чтобы запустить демонстрацию на веб-сервере localhost и сохранить URL-адрес веб-страницы в launch.json.

Мы будем использовать демонстрационное приложение для демонстрации кнопки Запустить проект после указания этой кнопки на URL-адрес localhost, например http://localhost:8080. Кнопка Запустить проект запускает средства разработки в режиме отладки. Это основной способ открыть средства разработки, когда веб-страница требует запуска на веб-сервере. В качестве предварительного шага мы создадим launch.json файл и изменим URL-адрес в нем, чтобы он указывал на localhost, обслуживающий пример приложения demo-to-do .

Вам не всегда нужно использовать этот подход, так как во многих случаях щелчок ПРАВОй кнопкой мыши HTML-файла работает. Однако многие веб-страницы используют API, для которых веб-страница должна выполняться на веб-сервере, поэтому ниже приведены конкретные действия, которые можно выполнить.

Шаг 1. Установка средств разработки и необходимых компонентов

Если вы еще этого не сделали, выполните действия, описанные в разделе Установка расширения DevTools для Visual Studio Code, а затем выполните следующие действия.

Шаг 2. Запуск веб-сервера

В этом разделе поддерживается нажатие кнопки Запустить проект .

В этих шагах объясняется, как запустить HTTP-сервер с помощью кроссплатформенной оболочки Git Bash, которая является частью Git. Хотя для запуска сервера можно использоватьтерминалпредставления> Visual Studio Code>, лучше запустить сервер из командной строки, которая находится за пределами Visual Studio Code, чтобы сервер оставался запущенным даже при закрытии и повторном открытии Visual Studio Code или папки.

Если вы еще этого не сделали, настройте и запустите веб-сервер в первый раз, обслуживая приложение demo-to-do из репозитория Demos. Для этого см. шаг 6. Настройка локального сервера в статье Установка расширения DevTools для Visual Studio Code.
Откройте git bash. Например, в Windows нажмите кнопку Пуск и введите git bash.
cd в определенную папку, которую вы хотите обслужить через http, Demos\demo-to-do\:

В git bash используйте косую черту для путей к файлам. Например:
```
cd C:/Users/username/Documents/GitHub/Demos/demo-to-do
```
Введите команду npx http-server. Локальный веб-сервер запускается через порт 8080.
```
npx http-server
```
Отображаются сведения о сервере и URL-адресе localhost, например:
```
Starting up http-server, serving ./

Available on:
http://10.0.1.8:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server
```
Отображаемые URL-адреса обычно эквивалентны стандартному URL-адресу http://localhost:8080.

Шаг 3. Настройка launch.json

В этом разделе поддерживается нажатие кнопки Запустить проект .

В Visual Studio Code выберите Файл>Открыть папку. Выберите каталог проекта, содержащий index.html клонируемый пример демонстрации в репозитории Демонстрации, например C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

Как и в папке demo-to-do репозитория, изначально в ней нет .vscode ни папки, ни launch.json файла.
На панели действий щелкните Инструменты Microsoft Edge (). Откроется панель Средства Microsoft Edge .
Нажмите кнопку Создать launch.json :

Откроется новый launch.json файл.
В нескольких местах файла launch.json на каждой из "url" строк прокрутите вправо и обратите внимание на комментарий "Укажите URL-адрес проекта":
```
"url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", 
// Provide your project's url to finish configuring
```
В веб-браузере перейдите http://localhost/ по URL-адресу, где файл demo-to-do.html находится на сервере, например общий стандартный URL-адрес , http://localhost:8080.
Скопируйте URL-адрес из адресной строки.
В launch.jsonкаждой строке URL-адреса вставьте URL-адрес клонируемой копии демонстрационного приложения, например . http://localhost:8080 Вставьте путь внутри строки пути с кавычками в одну из "url" строк. Например:
```
"url": "http://localhost:8080", // Provide your project's url to finish configuring
```
Скопируйте и вставьте измененную строку URL-адреса в другие места в launch.json файле.

Совет. Чтобы изменить все экземпляры одновременно, можно скопировать обновленную строку URL-адреса, а затем выбрать экземпляр исходной строки URL-адреса, нажать клавиши CTRL+SHIFT+L , чтобы выбрать все экземпляры, а затем вставить обновленную строку.
Сохраните launch.json файл.

Шаг 4. Нажмите кнопку Запустить проект

В Visual Studio Code на панели действий нажмите кнопку Инструменты Microsoft Edge (). Откроется панель Средства Microsoft Edge , содержащая кнопку Запустить проект , но не кнопку Создать файл launch.json :
Нажмите кнопку Запустить проект .

Вкладки Edge DevTools и Edge DevTools: Browser открываются в отдельных панелях, где отображается веб-приложение demo-to-do :

На этом этапе можно работать с изменениями CSS или пошагово выполнять код в отладчике. Ознакомьтесь с разделами учебника Начало работы, щелкнув правой кнопкой мыши HTML-файл:

Шаг 5. Закрытие средств разработки

Чтобы завершить отладку и закрыть вкладки Edge DevTools :

На панели инструментов Отладка нажмите кнопку Остановить (SHIFT+F5):

Или в меню Выполнить выберите Остановить отладку. Или закройте две вкладки Средства разработки. Закрывается панель инструментов Отладка.

См. также:

Закрытие средств разработки в открывании средств разработки и в браузере DevTools.

Вы завершили работу с руководством "Начало работы с помощью кнопки Запустить проект". Рекомендуется также выполнить другие руководства. См . статью Начало работы с расширением DevTools для Visual Studio Code.

См. также

GitHub:

demo-to-do — демонстрационного веб-приложения, работающего на сервере github.io .
Исходный код для демонстрации
Репозиторий MicrosoftEdge/Demos

Поделиться через