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

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

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

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

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

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

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

В следующих демонстрациях демонстрируются функции 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. Это основной способ, который описан здесь.

• 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). Откроются средства разработчика.

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

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. Щелкните правой кнопкой мыши отрисованную веб-страницу и выберите Пункт Проверить.

   Откроются средства разработчика.

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). Откроются средства разработчика.

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

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.