Пример. Средство пользовательских средств разработки

Пример "Пользовательское средство devTools" — это расширение Microsoft Edge, которое добавляет пользовательское средство в Средства разработки Microsoft Edge, которое имеет собственную вкладку на панели действий.

Введение

Средство Custom DevTools добавляет вкладку и панель настраиваемых инструментов в DevTools в Microsoft Edge:

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

Средство Custom DevTools вызывает API DevTools для отображения сведений о памяти.

Проверяемая веб-страница и средство Custom DevTools отправляют сообщения друг другу.

Используйте эту статью для скачивания, установки и запуска примера. Дополнительные сведения о коде в этом примере см. в статье Добавление пользовательского средства в Microsoft Edge DevTools.

Шаг 1. Скачивание примера

Если это еще не сделано, скачайте главную ветвь репозитория Demos или клонируйте (или вилку и клонируйте) репозиторий. Скачать репозиторий проще всего и описано ниже.

Скачайте ветвь main репозитория Demos следующим образом:

1. В Microsoft Edge перейдите в репозиторий MicrosoftEdge/Demos .

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

3. В Microsoft Edge в диалоговом окне Загрузки отображается Demos-main.zip. Добавляется "-main", то есть статический snapshot "main" ветви репозитория.

4. Наведите указатель мыши справа от Demos-main.zipи нажмите кнопку Показать в папке .

   проводник откроется папка Загрузки.

5. Щелкните правой кнопкой мыши Demos-main.zipи выберите команду Извлечь все.

   Откроется диалоговое окно Извлечение сжатых (zippped) папок.

6. Нажмите кнопку Извлечь .

   Откроется диалоговое окно %завершено , а затем завершится.

7. Переместите папку в Demos-main репозитории GitHub, например C:\Users\localAccount\GitHub.

Шаг 2. Установка расширения для добавления средства в DevTools

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

2. Выберите Параметры и многое другое (), наведите указатель мыши на расширения, а затем выберите Управление расширениями.

   Откроется вкладка Расширения и страница (edge://extensions).

3. Включите переключатель режим разработчика .

4. Щелкните файл Загрузить неупакованным.

   Откроется диалоговое окно Выбор каталога расширений.

5. Перейдите в папку /Demos-main/devtools-extension , например C:\Users\localAccount\GitHub\Demos-main\devtools-extension\, и нажмите кнопку Выбрать папку .

   Отображается карта средства пользовательского средства разработки:

   

Шаг 3. Выбор пользовательского средства в средствах разработки

1. В Microsoft Edge перейдите на веб-страницу, например приложение To Do, в новом окне или вкладке.

   Инструменту Custom DevTools требуется веб-страница, а не пустая вкладка.

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

   Откроется devTools.

3. На панели действий devTools щелкните вкладку Пользовательский ().

   Отобразятся вкладка и панель Пользовательское средство:

   

   Если вкладка инструмента Custom () не отображается, выполните одно из следующих действий:

   • Нажмите кнопку Другие инструменты () и выберите Настраиваемый.

   • Сделайте DevTools более широкими, а затем щелкните вкладку Пользовательское средство ().

   Настраиваемая страница DevTools содержит несколько разделов:

   • Сведения о отображении памяти.

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

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

Шаг 4. Просмотр сведений о памяти с помощью вызова API расширения

• В пользовательском инструменте рядом с пунктом Доступная емкость памяти просмотрите обновление значения один раз в секунду:

  

Шаг 5. Отправка сообщения из средств разработки на проверенную страницу

1. В пользовательском инструменте нажмите кнопку Сказать привет .

   Откроется диалоговое окно JavaScript alert с сообщением "Hello from the DevTools extension!"

   

   DevTools отправляет сообщение на проверенную веб-страницу, в результате чего JavaScript отображает оповещение.

2. Нажмите кнопку ОК .

   Диалоговое окно закрывается.

Шаг 6. Отправка сообщения с проверенной страницы в Средства разработки

1. На проверенной веб-странице щелкните различные точки.

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

   

2. В DevTools на панели действий выберите средство Консоль ().

3. На проверенной веб-странице щелкните различные точки.

   Нажатые координаты отображаются в консоли:

   

Шаг 7. Изменение пользовательского средства

1. Если это еще не сделано, установите Visual Studio Code.

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

3. В меню Файл выберите команду Открыть папку.

   Откроется диалоговое окно Открыть папку .

4. Перейдите в папку /Demos-main/devtools-extension/ , например C:\Users\localAccount\GitHub\Demos-main\devtools-extension\, и нажмите кнопку Выбрать папку .

   В области/devtools-extension/ Обозреватель отображается папка.

5. Выберите panel.html.

   panel.html открыт для редактирования:

   

6. Добавьте "My" в заголовок; измените <h2> значение с:

   <h2>Custom DevTools Tool</h2>
   

   на:

   <h2>My Custom DevTools Tool</h2>
   

7. Сохраните panel.html.

8. В области Обозреватель щелкните .manifest.json

   manifest.json открыт для редактирования.

9. Добавьте "My" в ; измените nameс:

   "name": "Custom DevTools Tool",
   

   на:

   "name": "My Custom DevTools Tool",
   

10. Сохраните manifest.json.

Шаг 8. Перезагрузка измененного пользовательского средства

1. В Microsoft Edge выберите Параметры и многое другое (), наведите указатель мыши на расширения, а затем выберите Управление расширениями.

   Откроется вкладка Расширения и страница (edge://extensions).

2. В карта Средства пользовательского средства разработки щелкните ссылку Перезагрузить.

   В карта теперь в качестве имени расширения отображается средство My Custom DevTools Tool:

   

Шаг 9. Использование измененного пользовательского средства

1. Перейдите на веб-страницу, например приложение To Do, в новом окне или на вкладке.

   Инструменту Custom DevTools требуется веб-страница, а не пустая вкладка.

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

   Откроется devTools.

3. На панели действий devTools щелкните вкладку Пользовательский ().

   Появится настраиваемый инструмент со словом My добавлено в заголовок на панели:

   

   Если в заголовке по-прежнему указано Пользовательское средство devTools Tool вместо My Custom DevTools Tool, закройте и снова откройте DevTools.

   Если вкладка инструмента Custom () не отображается, выполните одно из следующих действий:

   • Нажмите кнопку Другие инструменты () и выберите Настраиваемый.

   • Сделайте DevTools более широкими, а затем щелкните вкладку Пользовательское средство ().

Это конец действий по использованию и изменению примера расширения DevTools.

Устранение неполадок

Если вкладка Настраиваемая не отображается в средствах разработки или устарела и не отображает последние изменения кода:

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

• Закройте и снова откройте средства разработки.

• Обновите или жестко обновите проверенную страницу.

• В Microsoft Edge на странице Расширения нажмите кнопку Перезагрузить для расширения.

• Если в таком расширении нет значка, вкладка, если она не выбрана, узкая и серая в правой части панели действий. Щелкните узкую серую вкладку.

• Перейдите на веб-страницу, а не на пустую вкладку. Для кода в примере "Пользовательское средство devTools" требуется веб-страница.

Если панель действий узкая, средство Пользовательские средства разработки добавляется в меню Дополнительные инструменты на панели действий.

На вкладке Настраиваемая отсутствует команда Удалить из панели действий в контекстном меню.

См. также