Бөлісу құралы:

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

  • Мақала

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

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

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

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

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

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

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

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

  1. Если вы еще этого не сделали, настройте и запустите веб-сервер в первый раз, обслуживая приложение demo-to-do из репозитория Demos. Для этого см. шаг 6. Настройка локального сервера в статье Установка расширения DevTools для Visual Studio Code.

  2. Откройте git bash. Например, в Windows нажмите кнопку Пуск и введите git bash.

  3. cd в определенную папку, которую вы хотите обслужить через http, Demos\demo-to-do\:

    В git bash используйте косую черту для путей к файлам. Например:

    cd C:/Users/username/Documents/GitHub/Demos/demo-to-do

  4. Введите команду 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

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

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

    Пример папки demo-to-do, открытый в Visual Studio Code

    Как и в папке demo-to-do репозитория, изначально в ней нет .vscode ни папки, ни launch.json файла.

  2. На панели действий щелкните Инструменты Microsoft Edge (значок Инструментов Microsoft Edge). Откроется панель Средства Microsoft Edge .

  3. Нажмите кнопку Создать launch.json :

    Кнопка

    Откроется новый launch.json файл.

  4. В нескольких местах файла 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

  5. В веб-браузере перейдите http://localhost/ по URL-адресу, где файл demo-to-do.html находится на сервере, например общий стандартный URL-адрес , http://localhost:8080.

  6. Скопируйте URL-адрес из адресной строки.

  7. В launch.jsonкаждой строке URL-адреса вставьте URL-адрес клонируемой копии демонстрационного приложения, например . http://localhost:8080 Вставьте путь внутри строки пути с кавычками в одну из "url" строк. Например:

    "url": "http://localhost:8080", // Provide your project's url to finish configuring

  8. Скопируйте и вставьте измененную строку URL-адреса в другие места в launch.json файле.

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

  9. Сохраните launch.json файл.

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

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

    Область целевых объектов при наличии файла launch.json

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

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

    Демонстрационное веб-приложение, запущенное на вкладке

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

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

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

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

    Кнопка

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

См. также:

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

См. также

GitHub: