Поделиться через

Использование инструментов разработчика браузера с ASP.NET Core Blazor Hybrid

  • Статья

Примечание.

Это не последняя версия этой статьи. В текущем выпуске см . версию .NET 8 этой статьи.

Предупреждение

Эта версия ASP.NET Core больше не поддерживается. Дополнительные сведения см. в статье о политике поддержки .NET и .NET Core. В текущем выпуске см . версию .NET 8 этой статьи.

Внимание

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

В текущем выпуске см . версию .NET 8 этой статьи.

Статья рассказывает, как использовать браузерные инструменты разработчика с приложениями Blazor Hybrid.

Средства разработки в браузере на основе .NET MAUIBlazor

Настройте поддержку инструментов разработчика браузера в проекте Blazor Hybrid. Вы можете проверить поддержку инструментов разработчика, выполнив в приложении поиск AddBlazorWebViewDeveloperTools.

Если проект ещё не настроен для инструментов разработчика браузера, добавить поддержку можно следующим образом:

  1. Найдите, где происходит вызов AddMauiBlazorWebView. Вероятно, это будет файл приложения MauiProgram.cs.

  2. В верхней части MauiProgram.cs файла подтвердите наличие инструкции using для Microsoft.Extensions.Logging. Если инструкция using отсутствует, добавьте ее в начало файла:

    using Microsoft.Extensions.Logging;

  3. После вызова AddMauiBlazorWebView вставьте следующий код:

    #if DEBUG
    builder.Services.AddBlazorWebViewDeveloperTools();
    builder.Logging.AddDebug();
#endif

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

  1. Запустите приложение .NET MAUIBlazor Hybrid на платформе .NET MAUI для Windows и перейдите на страницу приложения, где используется BlazorWebView. Консоль средств разработчика недоступна из ContentPages без BlazorWeb View.

  2. Откройте инструменты разработчика браузера с помощью сочетания клавиш CTRL+SHIFT+I.

  3. Инструменты разработчика включают разнообразные функции для работы с приложениями, в том числе сведения о том, какие ресурсы запрошены страницей, как долго они загружались и что они содержат. В следующем примере показана вкладка Консоль с сообщениями, в том числе выдаваемыми исключениями по коду разработчика или платформы:

    Окно Microsoft Edge DevTools для приложения, работающего Blazor Hybrid в Windows

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

  1. Запустите эмулятор Android и перейдите на страницу приложения, где используется BlazorWebView. Консоль средств разработчика недоступна из ContentPages без BlazorWeb View.

  2. Откройте Google Chrome или Microsoft Edge.

  3. Откройте ссылку chrome://inspect/#devices (Google Chrome) или edge://inspect/#devices (Microsoft Edge).

  4. Нажмите на ссылку inspect, чтобы открыть инструменты разработчика. В следующем примере показана страница DevTools в Microsoft Edge:

    Устройства Microsoft Edge, показывающие кнопку Blazor

  5. Инструменты разработчика включают разнообразные функции для работы с приложениями, в том числе сведения о том, какие ресурсы запрошены страницей, как долго они загружались и что они содержат. В следующем примере показана вкладка Консоль с сообщениями, в том числе выдаваемыми исключениями по коду разработчика или платформы:

    Окно Microsoft Edge DevTools для приложения, работающего Blazor Hybrid на эмулированном пикселе 5

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

  1. Откройте приложение Safari для компьютера.

  2. Установите флажок "Дополнительное>меню "Разработка" в меню "Параметры>Safari>" в строке меню.

  3. Запустите приложение .NET MAUIBlazor Hybrid в симуляторе iOS и перейдите на страницу приложения, где используется BlazorWebView. Консоль средств разработчика недоступна из ContentPages без BlazorWeb View.

  4. Вернитесь в Safari. Выберите "Разработка>{REMOTE INSPECTION TARGET}>0.0.0.0, где {REMOTE INSPECTION TARGET} заполнитель — это простое имя (например,MacBook Pro) или серийный номер устройства (например).XMVM7VFF10 При наличии нескольких записей для 0.0.0.0 выберите ту, которая выделяет BlazorWebView. При выборе корректной записи 0.0.0.0 происходит выделение BlazorWebView в симуляторе iOS синим цветом.

    Safari Develop Simulator открыт с двумя записями для

  5. Откроется окно Веб-инспектор для BlazorWebView.

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

    Окна веб-инспектора Safari и симулятора для приложения, работающего Blazor Hybrid на эмулированном iPad mini

com.apple.security.get-task-allow Добавьте ключ типа Booleanв файл прав приложения для его отладочной сборки.

Чтобы добавить файл прав с com.apple.security.get-task-allow ключом, добавьте следующий XML-файл с именем Entitlements.Debug.plistPlatforms/MacCatalyst в папку проекта.

Platforms/MacCatalyst/Entitlements.Debug.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.security.get-task-allow</key>
    <true/>
</dict>
</plist>

Чтобы использовать файл прав для отладки сборки Mac Catalyst, добавьте следующий <PropertyGroup> узел в файл проекта приложения в качестве дочернего <Project> элемента узла:

<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' and '$(Configuration)' == 'Debug'">
    <CodeSignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodeSignEntitlements>
</PropertyGroup>

Чтобы использовать средства разработчика Safari с приложением macOS:

  1. Откройте приложение Safari для компьютера.

  2. Установите флажок "Дополнительное>меню "Разработка" в меню "Параметры>Safari>" в строке меню.

  3. .NET MAUIBlazor Hybrid Запустите приложение в macOS.

  4. Вернитесь в Safari. Выберите "Разработка>{REMOTE INSPECTION TARGET}>0.0.0.0, где {REMOTE INSPECTION TARGET} заполнитель — это простое имя (например,MacBook Pro) или серийный номер устройства (например).XMVM7VFF10 При наличии нескольких записей для 0.0.0.0 выберите ту, которая выделяет BlazorWebView. Выделен BlazorWebView синим цветом в macOS, если выбрана правильная запись 0.0.0.0 .

  5. Откроется окно Веб-инспектор для BlazorWebView.

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

    Веб-инспектор Safari для Blazor Hybrid приложения

Дополнительные ресурсы