Отладка приложения MAUI Blazor в стиле Chrome или обнаружение ошибок

Я пытаюсь перенести свое веб-приложение Blazor на MAUI.

Мне любопытно, есть ли способ увидеть такие инструменты, как «Консоль Chrome», «Сеть» и т. д., при отладке приложения MAUI Blazor в Windows? Источником вопроса является моя сортировка по переносу веб-приложения (Blazor) на настольный компьютер с планами сделать это на мобильных устройствах? Кто-нибудь из вас, сообщества, пытался это сделать? Первый опыт, который я получил, - это мгновенная ошибка и сообщение «загрузка...» с просьбой перезагрузить страницу - это не очень информативно.

Было бы гораздо полезнее просмотреть подробную информацию об ошибке или получить доступ к инструментам, например, в браузере, если это возможно.

Заранее спасибо.

РЕДАКТИРОВАТЬ

Вот MainPage.xaml (измененный):

<ContentPage xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local = "clr-namespace:CBT.MAUI.Blazor"
             xmlns:web = "clr-namespace:CBT.Web.Blazor;assembly=CBT.Web.Blazor;"
             x:Class = "CBT.MAUI.Blazor.MainPage"
             BackgroundColor = "{DynamicResource PageBackgroundColor}">

    <BlazorWebView x:Name = "blazorWebView" HostPage = "wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector = "#app" ComponentType = "{x:Type web:App}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
</ContentPage>

Я также пытался включить Serilog, но файл с ошибками не был создан.

var logger = new LoggerConfiguration()
    .ReadFrom.Configuration(builder.Configuration)
    .Enrich.FromLogContext()
    .CreateLogger();
builder.Logging.ClearProviders();
builder.Logging.AddSerilog(logger);

Исходная строка с записью журнала для отладки не выдает никаких ошибок:

builder.Logging.AddDebug();

Также я скопировал файл Services.

Можете ли вы также сослаться на материалы или описать здесь свой опыт подобной миграции?

Electrionics 06.07.2024 08:04

В моем текущем проекте у нас есть приложение WASM Blazor, и мы хотели разместить его на рабочем столе. Мы только что создали пустое приложение WPF с элементом управления BlazorWebView и показали внутри него приложение blazor, которое, кстати, адаптивное. Таким образом, у нас есть только одна база кода (приложение blazor) и одна строка дополнительного кода WPF. Работает как шарм. Возможно, стоит подумать о решении, а не просто дублировать код в приложении MAUI.

decius 06.07.2024 08:08

Итак, у нас есть одно и то же приложение blazor, работающее как клиент Windows и как веб-сайт одновременно без изменений кода.

decius 06.07.2024 08:10

@decius Я сделал то же самое, но получил ошибку, которая не отображается. Просто переключите строку '<RootComponent Selector = "#app" ComponentType = "{x:Type web:App}" />'

Electrionics 06.07.2024 08:26

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

decius 06.07.2024 08:38

@DavidLevin После переключения строки <RootComponent Selector = "#app" ComponentType = "{x:Type web:App}" /> ошибка все еще существует? Можете ли вы предоставить более соответствующий код?

Shuowen He-MSFT 08.07.2024 10:10

@decius отредактировал код.

Electrionics 09.07.2024 10:53

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

Shuowen He-MSFT 10.07.2024 12:25

@ShuowenHe-MSFT спасибо за ссылку

Electrionics 10.07.2024 17:40
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
9
80
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сначала вам нужно добавить builder.Services.AddBlazorWebViewDeveloperTools(); в MauiProgram.cs файл.

На платформе Windows после запуска проекта используйте сочетание клавиш Ctrl+Shift+I, чтобы открыть инструменты разработчика браузера.

Для платформы Android откройте новую вкладку в браузере (вне эмулятора) и введите:

For Chrome: chrome://inspect
For Edge: edge://inspect
For Firefox: about:debugging

Затем нажмите кнопку проверки в браузере.

Более подробную информацию можно найти в разделе Использование инструментов разработчика браузера с ASP.NET Core Blazor Hybrid

Другие вопросы по теме