Пример кода для средств разработки

Используйте репозиторий демонстраций , чтобы узнать, как использовать Microsoft Edge для разработки веб-страниц и веб-приложений. Существует несколько способов просмотра, скачивания и изменения этих демонстрационных веб-страниц, в том числе:

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

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

1. На странице Сведений щелкните ссылку Демонстрация . Откроется динамическая страница в Microsoft Edge.

2. Щелкните правой кнопкой мыши демонстрационную веб-страницу и выберите Проверить , чтобы открыть средства разработки.

Список примеров средств разработки

В следующих демонстрациях демонстрируются функции DevTools.

Имя демонстрации	Описание	Каталог репозитория	Динамическая демонстрационная страница
Исходные карты зеркального отображения CSS	Используется для обновления .css файлов на вкладке Стили (css зеркало редактирование) расширения DevTools для Visual Studio Code.	/css-mirroring-sourcemaps-demo/	н/д
Приложение TODO	Приложение Simple To Do с ванильным JavaScript. Используется для снимков экрана в документации по Microsoft Edge DevTools, а также для открытия средств разработки и браузера DevTools для расширения DevTools для Visual Studio Code.	/demo-to-do/	Мои задачи
Отсоединенные элементы	Демонстрация чата. Используется для утечек памяти модели DOM отладки (тип профилирования "Отсоединенные элементы").	/detached-elements/	Имитация трафика
Трехмерный вид	Используется для навигации по уровням веб-страницы, z-index и DOM с помощью инструмента трехмерного представления.	/devtools-3d/	Демонстрация средства 3D-просмотра в Microsoft Edge DevTools
Проверка специальных возможностей	Используется для функций тестирования специальных возможностей.	/devtools-a11y-testing/	Приют для животных
Проблема DevTools: анимация свойства CSS, для чего требуется макет	Иллюстрирует предупреждение средств "Проблемы и элементы" , когда анимируются свойства CSS, для которых требуется макет.	/devtools-animated-property-issue/	Демонстрация анимированного свойства CSS
Демонстрационные страницы панели консоли	Используется для обзора консоли, журнал сообщений в средстве консоли и исправление ошибок JavaScript, о которых сообщается в консоли.	/devtools-console/	Демонстрационные страницы панели консоли DevTools
Взаимодействие с DOM на демонстрационной странице консоли	Используется для взаимодействия с DOM с помощью консоли.	/devtools-console-dom-interactions/	Демонстрация взаимодействия DOM с консольным инструментом DevTools
Исправление ошибки контрастности	Используется для улучшения контрастности в средствах разработки Microsoft Edge: пример исправления ошибок.	/devtools-contrast-bugfix/	Проверка всех значков в средствах разработки на наличие проблем с контрастностью
Примеры CSS	Используется для начала просмотра и изменения CSS.	/devtools-css-get-started/	Примеры CSS
Примеры DOM	Используется для начала просмотра и изменения модели DOM.	/devtools-dom-get-started/	Примеры DOM
Объяснение ошибок и предупреждений консоли в Copilot в Edge	Создает ошибки в консоли, которые затем можно объяснить с помощью Copilot в Edge.	/devtools-explain-error/	Демонстрация объяснений ошибок консоли
Средство проверки	Используется для анализа страниц с помощью средства проверки.	/devtools-inspect/	Проверка демонстрации
Отладка JavaScript с добавлением двух чисел	Используется для начала отладки JavaScript.	/devtools-js-get-started/	Демонстрация: отладка JavaScript с помощью средств разработки Microsoft Edge
Snapshot кучи памяти	Используется для создания моментальных снимков кучи с помощью средства "Память" (тип профилирования "Куча snapshot").	/devtools-memory-heap-snapshot/	н/д
Вкладки действий по производительности	Используется для просмотра действий в таблице с вкладками "Снизу вверх", "Дерево вызовов" и "Журнал событий" средства "Производительность".	/devtools-performance-activitytabs/	Демонстрация вкладок действий
Вялая анимация	Используется для анализа производительности среды выполнения (учебник).	/devtools-performance-get-started/	Вялая анимация
События трассировки postMessage	Проверяет postMessage события трассировки в средстве производительности . Используется для просмотра сообщений между окнами, iframes и выделенными рабочими ролей в справочнике по функциям производительности.	/devtools-postmessage-perf-временная шкала/	Демонстрация событий трассировки postMessage
CSS : целевой псевдокласс	Используется для поддержки принудительного применения состояния CSS :target.	/devtools-target-pseudo/	Css :target псевдокласс демонстрации
Изучение вселенной	Веб-страница, используемая для демонстрации раздела метрики Monitor Core Web Vitals в средстве производительности. Анализ производительности веб-сайта статьи.	/exploring-the-Universe/	Изучение веб-страницы Вселенной
Визуализатор моментальных снимков кучи	Исходный код расширения визуализатора моментальных снимков кучи для DevTools.	/heap-snapshot-visualizer/	н/д
Фиктивные данные JSON	Простые JSON-файлы. Используется для просмотра JSON-файла или ответа сервера с форматированием.	/json-dummy-data/	Фиктивные данные JSON
Проверка активности сети	Используется для проверки сетевой активности.	/network-tutorial/	Проверка демонстрации сетевой активности
Фотогалерея	Используется для получения сведений о производительности селектора CSS.	/photo-gallery/	Фотогалерея
Медленный календарь	Простое демонстрационное приложение календаря для тестирования различных функций DevTools, таких как средство производительности и поддержка карты источника.	/slow-calendar/	Медленный календарь
Рабочие области	Используется для редактирования и сохранения файлов в рабочей области (вкладка Рабочая область средства "Источники") в средстве "Источники ".	/workspaces/	Демонстрация рабочих областей DevTools

Ниже приведены некоторые из этих примеров.

Демонстрация To Do

Эта простая веб-страница списка "Дела" используется для демонстрации различных функций средств разработки. Он содержит .html файл, .js файл и .css файлы:

• Отрисоченная страница: приложение TODO

• Исходный код: demo-to-do

Демонстрация веб-страницы с проблемами со специальными возможностями

Эта демонстрационная веб-страница приюта для животных полезна для изучения различных функций DevTools, включая функции тестирования специальных возможностей.

1. Откройте веб-страницу демонстрации со специальными возможностями в новом окне или вкладке.

2. Щелкните правой кнопкой мыши в любом месте отображаемой веб-страницы и выберите пункт Проверить. DevTools откроется рядом с демонстрационной веб-страницей.

Статьи

В следующих статьях описано, как использовать эту демонстрационную веб-страницу:

• Используйте средство "Проверка", чтобы обнаружить проблемы со специальными возможностями, наведите указатель мыши на веб-страницу . Одна из нескольких коротких статей, производных от разделов приведенной выше статьи.

• Функции тестирования специальных возможностей . Список функций тестирования специальных возможностей DevTools со ссылками на несколько статей, использующих "Демонстрационную веб-страницу с проблемами со специальными возможностями".

Репозиторий исходного кода

Это репозиторий исходного кода и его каталог, в котором хранятся файлы для этой демонстрационной веб-страницы:

• MicrosoftEdge/Demos > devtools-a11y-testing — содержит файлы, включая:

  • index.html — демонстрационная веб-страница, включая разделы страницы и формы ввода, которые отправляют данные в buttons.js файл JavaScript. Чтобы просмотреть отрисованную веб-страницу, используйте ссылку на демонстрационную веб-страницу выше.

  • buttons.js — Содержит код JavaScript, используемый демонстрационной веб-страницей.

  • styles.css, light-theme.cssи dark-theme.css — CSS-файлы, управляющие представлением демонстрационной веб-страницы.

  • Файлы изображений, используемые на демонстрационной веб-странице.

Демонстрационная веб-страница: отладка JavaScript с помощью средств разработки

Эта демонстрационная веб-страница полезна для изучения средства "Источники" , особенно отладчика JavaScript.

1. Откройте демонстрационную веб-страницу Приступая к отладке JavaScript с помощью средств разработки в новом окне или на вкладке.

2. Щелкните правой кнопкой мыши в любом месте отображаемой веб-страницы и выберите пункт Проверить. DevTools откроется рядом с демонстрационной веб-страницей.

Статьи

Эти статьи или разделы статей показано, как использовать эту демонстрационную веб-страницу:

• Базовый подход к использованию отладчика в обзоре средства "Источники". В этом разделе статьи кратко описано, как использовать отладчик JavaScript в средстве "Источники" , чтобы найти ошибку на демонстрационной веб-странице. Чтобы устранить эту ошибку, перед их добавлением входные строки преобразуются в числа.

• Приступая к отладке JavaScript . Более подробное пошаговое руководство по использованию демонстрационной веб-страницы вместе с отладчиком, демонстрации различных функций отладчика и настройке различных типов точек останова.

Репозиторий исходного кода

Это репозиторий исходного кода и его каталог, в котором хранятся файлы для этой демонстрационной веб-страницы:

• MicrosoftEdge/Demos > devtools-js-get-started — содержит файлы:

  • README.md — содержит ссылки на отрисованную демонстрационную веб-страницу и подробную статью руководства по использованию демонстрационной веб-страницы.

  • index.html — веб-страница с формой ввода, которая отправляет данные в файл JavaScript и отображает результат JavaScript.

  • get-started.js — Файл JavaScript, используемый формой на демонстрационной веб-странице.

Клонирование репозитория демонстраций Edge на диск

Репозиторий Microsoft Edge и Demos полезен для выполнения различных документации по devTools. Вы можете клонировать репозиторий, запустить веб-сервер localhost в папке клонированного репозитория, а затем изменить демонстрационные файлы непосредственно в средствах разработки или в редакторе, например VS Code.

Клонирование репозитория рекомендуется использовать вместо скачивания репозитория, чтобы можно было извлекать обновления репозитория и полностью участвовать в нем.

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

1. В командной строке введитеgit, чтобы проверка, установлен ли Git.

2. Если это еще не сделано, скачайте Git и установите его.

3. Перейдите в раздел MicrosoftEdge / Demos в новом окне или вкладке.

4. Нажмите раскрывающийся список Код и нажмите кнопку Копировать URL-адрес в буфер обмена .

   URL-адрес копируется в буфер обмена: https://github.com/MicrosoftEdge/Demos.git

   Если у вас установлен GitHub Desktop, нажмите кнопку Открыть с помощью GitHub Desktop , чтобы клонировать репозиторий и пропустить приведенный ниже шаг командной строки.

5. Откройте командную строку, например git bash.

6. Клонируйте репозиторий на локальный диск, введя строку URL-адреса, скопированную из репозитория GitHub. Если вы используете командную строку:

   # example location where the repo directory will be added:
   cd ~/GitHub
   cd c:/users/localAccount/GitHub/  # alt format
   git clone https://github.com/MicrosoftEdge/Demos.git
   

Дополнительные сведения о клонировании репозитория см. в разделе:

• Клонирование репозитория — документация GitHub.

Перейдите к следующему разделу.

Клонирование репозитория демонстраций Edge на диск с помощью VS Code

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

1. Перейдите в раздел MicrosoftEdge / Demos в новом окне или вкладке.

2. Нажмите раскрывающийся список "Код ", а затем нажмите кнопку Открыть с помощью Visual Studio , если он появится. Предлагается список элементов селектора обработчика , по одному на каждый установленный экземпляр Visual Studio. Этот параметр отображается только в том случае, если вы вошли в систему.

   

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

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

   

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

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

   

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

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

См. также:

• Клонирование репозитория — документация GitHub.
• Клонируйте репозиторий WebView2Samples в разделе Настройка среды разработки для WebView2.

Средства, поддерживающие клонирование репозитория и операции фиксации, вытягивания и отправки Git

Клонирование репозитория позволяет обновлять локальную копию при обновлении репозитория. Многие средства поддерживают клонирование и синхронизацию с репозиторием GitHub, например:

• Команды git в командной строке, например оболочка git bash. Это main способ, описанный здесь.

• GitHub Desktop. Хорошо интегрируется с репозиториями GitHub и запросами на вытягивание, а также с VS Code.

• Visual Studio Code. На панели действий слева щелкните Управление версиями.

• Вкладка Изменения Visual Studio >Git рядом с вкладкой Обозреватель решений в правом нижнем углу.

• Версия VS Code "точка" в браузере Edge. В Github.com при просмотре ветви или запроса на вытягивание нажмите клавишу точка (.). На панели действий слева щелкните:

  • Система управления версиями
  • Запросы на вытягивание GitHub
  • Запрос на вытягивание GitHub

Скачивание репозитория демонстраций

Клонирование репозитория рекомендуется использовать вместо скачивания репозитория, чтобы можно было извлекать обновления репозитория и полностью участвовать в нем.

Если вы хотите просто скачать репозиторий Demos вместо его клонирования:

1. В новом окне или вкладке перейдите в репозиторий MicrosoftEdge/Demos .

2. Нажмите раскрывающийся список Код и нажмите кнопку Скачать ZIP-файл.

   Файл .zip помещается в каталог загрузки. Распакуйте эти исходные файлы веб-страницы в подходящее расположение.

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

1. Перейдите по адресу https://download-directory.github.io/ и вставьте URL-адрес https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do.

   Файл .zip помещается в каталог загрузки. Распакуйте эти исходные файлы веб-страницы в подходящее расположение.

См. также:

• Скачайте репозиторий WebView2Samples в разделе Настройка среды разработки для WebView2.

Открытие демонстрационной папки на вкладке "Рабочая область" в средстве "Источники"

Чтобы использовать этот раздел, сначала выполните клонирование репозитория демонстраций Edge на диск выше.

См. также:

• Руководство по рабочей области (вкладка "Рабочая область" средства "Источники")
• Подходы, сравниваемые в расширении Microsoft Edge DevTools для Visual Studio Code. Суммирует и сравнивает несколько вариантов редактирования файлов веб-страницы.

После клонирования (или скачивания) репозитория демонстраций Edge:

1. В Microsoft Edge откройте новую вкладку.

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

3. В Средствах разработки на панели инструментов main выберите вкладку Источники. Если эта вкладка не отображается, нажмите кнопку Дополнительные вкладки ().

4. На вкладке Источники слева выберите вкладку Рабочая область , которая сгруппирована по вкладке Страница . Если вкладка Рабочая область не отображается, нажмите кнопку Дополнительные вкладки ().

5. Щелкните + Добавить папку в рабочую область. Откроется диалоговое окно выбора папки.

6. Выберите определенную папку, например demo-to-do, или выберите корневую папку Demos :

   

7. Над DevTools появится запрос "DevTools запрашивает полный доступ к (каталогу)". Нажмите кнопку Разрешить :

   

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

Если запустить сервер localhost из определенной демонстрационной папки, например \Demos\demo-to-do, и перейти по адресу localhost:8080 (или просто открыть локальный файл, например C:\Users\localAccount\GitHub\Demos\demo-to-do\index.html в Microsoft Edge), то конкретная демонстрация сразу же отобразится в браузере. Затем можно добавить только определенный каталог демонстрации, например C:\Users\localAccount\GitHub\Demos\demo-to-do\, на вкладку Рабочая область средства Источники . Затем у вас есть все возможности для использования DevTools в качестве интегрированной среды разработки для конкретной демонстрации.

Запуск сервера из определенного демонстрационного каталога:

$ cd ~/GitHub/Demos/demo-to-do
$ npx http-server

Пример каталога для добавления на вкладку "Рабочая область " средства "Источники ": C:\Users\localAccount\GitHub\Demos\demo-to-do

Результат:localhost:8080

Запуск сервера localhost из каталога Demos

Если запустить сервер localhost из всей \Demos\ папки, а затем перейти к localhost:8080, вы можете перейти к каждой демонстрации из браузера. Вы можете добавить всю клонированную /Demos/ папку на вкладку Рабочая область средства Источники . Затем у вас есть полные возможности для использования DevTools в качестве интегрированной среды разработки.

Запуск сервера из всего \Demos\ каталога:

$ cd ~/GitHub/Demos
$ cd "C:\Users\localAccount\GitHub\Demos"  # alt syntax
$ npx http-server

Пример каталога для добавления на вкладку "Рабочая область " средства "Источники ": C:\Users\localAccount\GitHub\Demos

Результат:localhost:8080

Открытие локального HTML-файла из проводник и его редактирование в средствах разработки

Чтобы изменить файлы в средстве "Источники ", перед выполнением действий в этом разделе может потребоваться нажать кнопку Разрешить , чтобы предоставить доступ на чтение и запись, выполнив действия, описанные в разделе Открытие демонстрационной папки на вкладке Рабочая область в средстве "Источники" выше.

1. В проводник в Windows или Finder в macOS выберите HTML-файл из локальной копии репозитория демонстраций, например C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.html.

   Файл .html открывается и отображается в Microsoft Edge.

   В адресной строке отображается файл | C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html

   При выборе URL-адреса в адресной строке отображается формат URL-адреса: file:///C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html

2. Щелкните правой кнопкой мыши отрисованную веб-страницу и выберите Пункт Проверить.

   Откроется devTools.

3. Выберите инструмент Источники , а затем перейдите на вкладку Страница или Рабочая область .

См. также:

• Изменение и сохранение файлов в рабочей области (вкладка Рабочая область средства "Источники") требуется, чтобы открыть локальную папку в средстве "Источники " в средстве DevTools в браузере.

Открытие локального HTML-файла в диалоговом окне Открытия файла в браузере и его редактирование в средствах разработки

Чтобы открыть файл и изменить его, выполните приведенные .html ниже действия.

1. В Microsoft Edge откройте новую вкладку и нажмите клавиши CTRL+O (Windows/Linux) или COMMAND+O (macOS). Откроется диалоговое окно выбора файла.

2. Выберите HTML-файл из локальной копии репозитория демонстраций , например C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.html. Файл .html открывается и отображается в Microsoft Edge.

3. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

4. В Средствах разработки на панели инструментов main выберите вкладку Источники. Если эта вкладка не отображается, нажмите кнопку Другие вкладки ().

5. В средствах разработки слева выберите вкладку Страница, а затем выберите HTML-файл, например index.html или (индекс).

6. Нажмите клавишу ESC , чтобы открыть панель Быстрого просмотра в нижней части devTools.

7. На панели быстрого просмотра нажмите кнопку Другие инструменты () и выберите инструмент Изменения .

8. В середине области редактора средства Источники измените .html файл. Например, в demo-to-do/index.html папке в строке заголовка <h1> измените мои задачи на Мои измененные задачи:

   <h1>📋 My modified tasks</h1>
   

   Если редактирование не включено, нажмите кнопку Разрешить , чтобы предоставить доступ на чтение и запись к папке, выполнив действия, описанные в разделе Открытие демонстрационной папки на вкладке Рабочая область в средстве "Источники" выше.

   Изменение отображается в инструменте Изменения на панели Быстрого просмотра , а к имени файла на вкладке index.html в средстве Источники добавляется звездочка:

   

9. Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS), чтобы сохранить изменения. Звездочка удаляется с вкладки index.html в инструменте Источники .

10. Обновите страницу. Изменение отображается на отображаемой веб-странице; например, слово "изменено " добавляется в заголовок:

    

Откройте демонстрационную папку в Visual Studio Code

После клонирования (или скачивания) репозитория демонстраций Edge:

1. В Visual Studio Code на панели действий нажмите кнопку Обозреватель (). Откроется панель Обозреватель.

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

   

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

   

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

См. также:

• Расширение Microsoft Edge DevTools для Visual Studio Code используется для открытия локальной папки в Visual Studio Code и использования средств разработки в Visual Studio Code.

Шаблоны URL-адресов для отображаемых демонстрационных веб-страниц и исходного кода

Большинство файлов Readme в репозитории демонстраций имеют ссылку, которая открывает отрисованный .html файл с сервера GitHub.io. Иногда у вас есть URL-адрес исходного HTML-файла в GitHub.com, но вместо этого вам нужно создать URL-адрес сервера github.io , чтобы отобразить отрисованный файл, а не отображать список исходного .html кода в каталоге GitHub.

Чтобы преобразовать URL-адрес каталога исходного кода в GitHub.com в URL-адрес отрисоченной демонстрационной веб-страницы в GitHub.io, шаблон выглядит следующим образом.

Предположим, что URL-адрес исходного кода веб-страницы в GitHub.com:

• https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do/

Основные компоненты этого GITHUB.COM URL-адреса:

• https://github.com/[org]/[repo]/tree/main/[path]

В отличие от этого, требуемый шаблон URL-адреса GitHub.io:

• https://[org].github.io/[repo]/[path]

Чтобы заполнить этот шаблон URL-адреса GitHub.io, в следующем примере:

• [org] имеет значение MicrosoftEdge.
• [репозиторий] имеет значение Demos.
• [path] имеет значение demo-to-do.

Таким образом, результирующий URL-адрес сервера GitHub.io для отображаемой демонстрационной веб-страницы:

• https://MicrosoftEdge.github.io/Demos/demo-to-do/

В этих URL-адресах регистр не учитывается.

Когда вы запускаете сервер localhost и запускаете его в клонированных папках репозитория, например C:\Users\localAccount\GitHub\Demos\workspaces, обычно отображается localhost:8080 в адресной строке браузера.

См. также

Открытие и редактирование файлов:

• Изменение и сохранение файлов в рабочей области (вкладка Рабочая область средства "Источники") — используйте Средства разработки в качестве интегрированной среды разработки (IDE) в браузере.
• Добавьте локальную папку в рабочую область, чтобы использовать Средства разработки для редактирования файлов и сохранения изменений на диске в обзоре средства "Источники".
• Подходы, сравниваемые в расширении Microsoft Edge DevTools для Visual Studio Code. Суммирует и сравнивает несколько вариантов редактирования файлов веб-страницы.
• Интеграция интегрированной среды разработки Microsoft Edge. Разработка приложений веб-страниц с помощью Visual Studio Code или Visual Studio, включая средства разработки Microsoft Edge.

Скачивание и клонирование:

• Шаг 5. Клонирование репозитория демонстраций в разделе Установка расширения DevTools для Visual Studio Code.
• Клонирование репозитория — документация GitHub.

Запуск локального веб-сервера:

• Шаг 6. Настройка сервера localhost в разделе Установка расширения DevTools для Visual Studio Code.