Установка расширения DevTools для Visual Studio Code

  • Статья

В этой статье описывается начальная настройка расширения DevTools. После установки DevTools вы будете готовы выполнить действия, описанные в статье Начало работы с расширением DevTools для Visual Studio Code.

Эта статья поможет вам:

  • Установите расширение DevTools.

  • Клонируйте репозиторий Demos, который включает в себя веб-приложение demo-to-do .

  • Запустите веб-сервер, чтобы использовать URL-адреса localhost в расширении DevTools в Visual Studio Code.

Шаг 1. Установка Visual Studio Code

  1. Если это еще не сделано, в отдельном окне или вкладке перейдите в раздел Скачать Visual Studio Code и скачать и установить Visual Studio Code.

Шаг 2. Установка Microsoft Edge

Microsoft Edge является обязательным для расширения DevTools для Visual Studio Code.

В Windows устанавливается Microsoft Edge. В macOS или Linux установите Microsoft Edge следующим образом:

  1. Перейдите на страницу Edge в Microsoft.com.

Шаг 3. Установка расширения Microsoft Edge DevTools

Установите расширение Microsoft Edge DevTools для Visual Studio Code следующим образом:

  1. Откройте Visual Studio Code.

  2. На панели действий слева нажмите кнопку Расширения (расширения значок). Или нажмите клавиши CTRL+SHIFT+X в Windows/Linux или COMMAND+SHIFT+X в macOS. Откроется панель Расширения Marketplace.

  3. В текстовом поле Поиск расширений в Marketplace введите Средства Microsoft Edge для VS Code.

  4. Выберите Средства Microsoft Edge для VS Code и нажмите кнопку Установить :

    Установка расширения Microsoft Edge DevTools для Visual Studio Code

В качестве альтернативного подхода можно скачать расширение Microsoft Edge DevTools с веб-сайта Visual Studio Marketplace с помощью браузера. Перейдите в раздел Средства разработчика Microsoft Edge для Visual Studio Code.

Шаг 4. Установка Node.js и диспетчера пакетов узлов (npm)

Чтобы получить динамический анализ кода (в режиме реального времени), чтобы указать на проблемы, например с волнистыми подчеркиваниями, и предложить быстрые исправления, необходимо установить Node.js и диспетчер пакетов узлов (npm).

В расширении DevTools отображается всплывающее предложение по установке Node.js и npm. Текст предложения выглядит следующим образом: "Установка Node.js & npm? (рекомендуется, так как вы установили это расширение)".

  1. Щелкните ссылку во всплывающем окне, если оно откроется.

  2. Установите Node.js и npm из Node.js> Загрузки > LTS (долгосрочная стабильная версия) (или Current).

    В Windows .msi загружается файл, например: node-v18.17.1-x64.msi

  3. В области загрузки браузера щелкните Показать в папке, а затем запустите скачанный файл. Откроется мастер настройки Node.js. Нажмите кнопку Далее и следуйте инструкциям. Можно использовать параметры по умолчанию.

  4. Убедитесь, что установлены Node.js и npm. В Visual Studio Code выберите Просмотреть>терминал. Или запустите приложение git bash.

  5. В командной строке введите npm version. Номера версий отображаются для npm и для node, указывающих, что диспетчер пакетов Узлов и Node.js установлены для поддержки встроенного и динамического анализа проблем. Например:

    $ npm version
{
   npm: '9.6.7',
   node: '18.17.1',
   ...
}

См. также:

Шаг 5. Клонирование репозитория демонстраций

Клонирование репозитория Demos является необязательным. Репозиторий Демонстраций полезен для выполнения различных документации по devTools. При необходимости вместо клонирования репозитория можно открыть существующий каталог проекта, если он у вас есть.

В качестве другой альтернативы вместо клонирования всего каталога можно скачать только каталог demo-to-do . Например, перейдите по адресу https://download-directory.github.io/ и вставьте URL-адрес https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do. Файл .zip помещается в каталог загрузки. Распакуйте эти исходные файлы веб-страницы в подходящее расположение. В руководстве Начало работы с расширением DevTools для Visual Studio Code используется пример расположения:

C:\Users\username\Documents\GitHub\Demos\demo-to-do\

Чтобы клонировать репозиторий Demos , чтобы использовать пример демонстрации для этого руководства, сделайте следующее:

  1. Перейдите в репозиторий MicrosoftEdge/Demos.

  2. Если зеленая кнопка "Код" не отображается, щелкните Демонстрации в пути Microsoft Edge / Demos в левом верхнем углу, чтобы перейти на страницу main репозитория.

  3. Нажмите зеленую кнопку Код и нажмите кнопку Копировать . В этой статье предполагается, что вы используете функции системы управления версиями в Visual Studio Code. Или вы можете использовать один из других методов, которые предоставляются, если вы знаете, что вы хотите использовать этот подход:

    • Открыть с помощью GitHub Desktop
    • Открыть с помощью Visual Studio
    • Скачать ZIP-файл

    Клонирование репозитория MicrosoftEdge/Demos

  4. В Visual Studio Code на панели действий нажмите кнопку Управление версиями (значок системы управления версиями), а затем нажмите кнопку Клонировать репозиторий.

  5. В текстовое поле Укажите URL-адрес репозитория вставьте скопированный URL-адрес: https://github.com/MicrosoftEdge/Demos.git и нажмите клавишу ВВОД. Откроется диалоговое окно выбора папки.

    Кнопка

  6. Перейдите по нужному пути, например C:\Users\username\Documents\GitHub или Users/username/GitHub, а затем нажмите кнопку Выбрать расположение репозитория .

  7. Появится сообщение Клонирование репозитория Git , после чего вам будет предложено открыть клонированные репозитории. Нажмите кнопку Открыть :

    Запрос на открытие клонированного репозитория

  8. При появлении запроса Доверяете..., нажмите кнопку Да . Или нажмите кнопку Нет и продолжайте работу с большинством частей этого пошагового руководства.

    Дерево Обозреватель содержит множество демонстраций, в том числе демонстрации для выполнения.

  9. В Visual Studio Code выберите Файл>Закрыть папку.

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

  11. В областиЦелевые объектысредств> Microsoft Edge нажмите кнопку Открыть папку. Откроется диалоговое окно Открыть папку . Перейдите к папке demo-to-do в клонированного репозитория demo, выберите папку или перейдите в нее, а затем нажмите кнопку Выбрать папку :

    Выбор папки demo-to-do

    Пример расположения репозитория, в котором клонирован репозиторий Demos , показан выше. Папка demo-to-do клонированного репозитория Demos открывается в Обозреватель Visual Studio Code, и файл еще не launch.json существует:

    Первоначально открыл папку demo-to-do

Шаг 6. Настройка сервера localhost

Если вы установили Node.js и npm, как описано выше, npx http-server это простой способ запуска локального веб-сервера. Вы можете перейти к приведенным ниже действиям или сначала прочитать эту справочную информацию.

Во многих случаях не требуется вводить URL-адрес или запускать локальный сервер. Например, вы можете:

  • Откройте папку, содержащую исходные файлы веб-страницы, а затем щелкните файл правой .html кнопкой мыши.
  • Введите локальный путь к файлу в адресной строке, например C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html (по умолчанию— страница Успешно).
  • Введите URL-адрес удаленного сервера в адресной строке вкладки Edge DevTools: Браузер , например https://microsoftedge.github.io/Demos/demo-to-do/.

Если на веб-странице используются определенные API, требующие выполнения веб-страницы на веб-сервере, для использования средств разработки необходимо запустить локальный веб-сервер для тестирования. Если вы не обслуживаете проект на веб-сервере, а используете только локальные файлы, вы по-прежнему можете использовать средства разработки с возможностью отладки, щелкнув правой кнопкой мыши локальный .html файл. Функциональные возможности приложения, для которых требуется, чтобы ваше приложение было на сервере, не будут работать, а средства разработки будут иметь ограниченную служебную программу.

Сведения о http-сервере см. в статье http-server: простой статический HTTP-сервер.

Настройка http-сервера

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

    В приведенном выше примере пути:

    • \Documents\GitHub\ — место, куда Demos был клонирован репозиторий.
    • \Demos\ — это репозиторий GitHub, который используется в качестве примеров в документации разработчика Microsoft Edge.
    • \demo-to-do\ — это один из примеров каталогов в репозитории.

  2. В Visual Studio Code выберите Просмотр>терминала. Или, чтобы веб-сервер работал независимо от состояния Visual Studio, откройте командную строку за пределами Visual Studio Code, например git bash.

  3. cd в папку, которую вы хотите обслуживать по протоколу HTTP.

    В оболочке Git bash используйте косую черту, например:

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

    Или, если вы используете другую командную строку в Windows, используйте обратные косые косые строки, например:

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

Перейдите ниже.

Запуск сервера (npx http-server)

Эти действия запускают сервер в первый раз.

  1. Введите команду npx http-server:

    npx http-server

    Локальный веб-сервер запускается через порт 8080.

    Может появиться следующее сообщение:

    Need to install the following packages:
  http-server@14.1.1
Ok to proceed? (y)

    Или, если вы не получаете такого файла или каталога, вы можете запустить: npm install --global http-server и выполнить следующее: http-server

  2. Введите y.

    Windows запрашивает, следует ли разрешить node обмен данными по сети:

    Разрешение узлам обмениваться данными по сети

  3. Установите флажок Частные сети и нажмите кнопку Разрешить доступ .

    Отображаются сведения о сервере и 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.

    Запуск сервера

Далее см. статью Начало работы с расширением DevTools для Visual Studio Code.

См. также