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

  • Статья

Используйте репозиторий демонстраций , чтобы узнать, как использовать 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 кучи памяти Используется для создания моментальных снимков кучи с помощью средства "Память". /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 псевдокласс демонстрации
Визуализатор моментальных снимков кучи Исходный код расширения визуализатора моментальных снимков кучи для DevTools. /heap-snapshot-visualizer/ н/д
Фиктивные данные JSON Простые JSON-файлы. Используется для представления форматированного JSON. /json-dummy-data/ Фиктивные данные JSON
Проверка активности сети Используется для проверки сетевой активности. /network-tutorial/ Проверка демонстрации сетевой активности
Фотогалерея Используется для получения сведений о производительности селектора CSS. /photo-gallery/ Фотогалерея
Медленный календарь Простое демонстрационное приложение календаря для тестирования различных функций DevTools, таких как средство производительности и поддержка карты источника. /slow-calendar/ Медленный календарь
Рабочие области Используйте для редактирования файлов в рабочих областях (вкладка Файловая система) в средстве "Источники ". /Рабочие пространства/ Демонстрация рабочих областей DevTools

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

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

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

Демонстрация и средства разработки с выбранным инструментом

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

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

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

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

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

Репозиторий Демонстраций полезен для выполнения различных документации по devTools.

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

Чтобы скачать репозиторий 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 помещается в каталог загрузки. Распакуйте эти исходные файлы веб-страницы в подходящее расположение.

См. также:

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

Клонирование репозитория позволяет обновлять локальную копию при обновлении репозитория. Пользовательский интерфейс GitHub и различные средства поддерживают клонирование. Мы покажем клонирование с помощью Visual Studio Code, но вы можете использовать множество других средств программирования, таких как GitHub Desktop, Visual Studio или оболочка git bash.

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

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

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

  3. Нажмите кнопку раскрывающегося списка Код и нажмите кнопку Копировать рядом с URL-адресом https://github.com/MicrosoftEdge/Demos.git. Затем можно вставить URL-адрес в git bash или в диалоговое окно Visual Studio Code, например.

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

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

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

См. также:

Откройте демонстрационную папку в средстве "Источники" и измените файл

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

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

См. также:

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

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

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

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

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

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

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

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

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

    Выбор каталога demo-to-do

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

    DevTools запрашивает доступ для добавления папки в рабочую область на вкладке Файловая система

Чтобы изменить файлы, ознакомьтесь с инструкциями по редактированию в следующем разделе.

См. также:

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

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

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

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

  2. Выберите HTML-файл из локальной копии репозитория демонстраций , например C:\Users\username\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. Обновите страницу. Изменение отображается на отображаемой веб-странице; например, слово "изменено " добавляется в заголовок:

    Измененная страница демонстрации после сохранения изменений и обновления

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

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

  2. Выполните действия, описанные в разделах выше.

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

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

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

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

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

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

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

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

См. также:

Шаблоны 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-адресах регистр не учитывается.

См. также

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

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

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