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

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

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

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

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

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

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

См. раздел:

Некоторые примеры показаны ниже.

Демо-версия To Do

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

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

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

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

  1. Откройте демонстрационную веб-страницу с проблемами читаемости в новом окне или вкладке.

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

Статьи

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

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

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

  • 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. Щелкните правой кнопкой мыши в любом месте отрисованной веб-страницы и выберите "Проверить". Средства разработчика открываются рядом с демонстрационной веб-страницей.

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

Статьи

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

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

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

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

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

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

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

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

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

Клонируйте репозиторий "MicrosoftEdge / Demos" на диск

Репозиторий Microsoft Edge / Demos полезен для работы с различной документацией по средствам разработчика. Вы можете клонировать репозиторий, запустить веб-сервер 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

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

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

Клонируйте репозиторий "MicrosoftEdge / Demos" на диск с помощью VS Code

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

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

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

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

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

    На дереве обозревателя перечислено множество демонстраций, в том числе демонстрации To Do.

См. также:

Инструменты, поддерживающие клонирование репозитория и git commit/pull/push

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

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

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

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

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

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

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

См. также:

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

Чтобы использовать этот раздел, сначала выполните действия, описанные в разделе Клонирование репозитория "MicrosoftEdge / Demos" на диск выше.

См. также:

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

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

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

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

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

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

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

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

  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\, на вкладку Workspace инструмента Sources . После этого у вас будут доступны все функциональные возможности для использования DevTools в качестве интегрированной среды разработки (для этой конкретной демонстрации).

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

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

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

Результат перехода:localhost:8080

Сервер запущен из каталога \Demos\demo-to-do

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

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

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

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

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

Результат перехода:localhost:8080

Сервер запускается из каталога /demos/, а не из конкретного подкаталога demo

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

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

  1. В проводнике в Windows или в Finder в macOS выберите HTML-файл из локальной копии репозитория Demos, например 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. Выберите средство "Источники ", а затем вкладку "Страница " или " Рабочая область ".

См. также:

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

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

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

  2. Выберите HTML-файл из локальной копии репозитория Demos , например 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. В средствах разработчика на главной панели инструментов выберите вкладку "Источники ". Если эта вкладка не отображается, нажмите кнопку "Дополнительные вкладки " (значок ").

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

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

  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. Обновите страницу. Изменение отображается на отрисованной веб-странице; Например, слово "modified " добавляется в заголовок:

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

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

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

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

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

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

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

    Изначально открыта папка demo-to-do

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

См. также:

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

Большинство файлов сведений о продукте в репозитории Demos содержат ссылку, открывающую отрисованный .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.
  • [repo] — это Demos.
  • [путь] равен demo-to-do.

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

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

Эти URL-адреса не чувствительны к регистру.

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

См. также

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

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

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

  • Последнее обновление: