ASP.NET Core ile tarayıcı geliştirici araçlarını kullanma Blazor Hybrid

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 10 sürümüne bakın.

Uyarı

ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 10 sürümüne bakın.

Bu makalede, tarayıcı geliştirici araçlarınınaçıklanmaktadır.

ile tarayıcı geliştirici araçları .NET MAUIBlazor

Blazor Hybrid Projenin tarayıcı geliştirici araçlarını destekleyecek şekilde yapılandırıldığından emin olun. Uygulama için AddBlazorWebViewDeveloperToolsarama yaparak geliştirici araçları desteğini onaylayabilirsiniz.

Proje tarayıcı geliştirici araçları için henüz yapılandırılmamışsa, şu şekilde destek ekleyin:

1. Çağrısının AddMauiBlazorWebView yapıldığı yeri, büyük olasılıkla uygulamanın MauiProgram.cs dosyasında bulma.

2. Dosyanın üst kısmında MauiProgram.cs için usingbir Microsoft.Extensions.Logging deyiminin varlığını onaylayın. using Deyimi yoksa dosyanın en üstüne ekleyin:

   using Microsoft.Extensions.Logging;
   

3. çağrısından AddMauiBlazorWebViewsonra aşağıdaki kodu ekleyin:

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

Tarayıcı geliştirici araçlarını bir Windows uygulamasıyla kullanmak için:

1. .NET MAUI Blazor Hybrid Windows için uygulamayı çalıştırın ve kullanan BlazorWebViewbir uygulama sayfasına gidin. Geliştirici araçları konsolu, olmadan'dan ContentPageBlazorWeb Viewkullanılamaz.

2. Tarayıcı geliştirici araçlarını açmak için Ctrlkullanın.

3. Geliştirici araçları sayfanın hangi varlıkları istediği, varlıkların yüklenmesinin ne kadar sürdüğü ve yüklenen varlıkların içeriği dahil olmak üzere uygulamalarla çalışmak için çeşitli özellikler sağlar. Aşağıdaki örnekte, çerçeve veya geliştirici kodu tarafından oluşturulan özel durum iletilerini içeren konsol iletilerini görmek için Konsol sekmesi gösterilmektedir:

   

Android uygulamasıyla tarayıcı geliştirici araçlarını kullanmak için:

1. Android öykünücüsü'ni başlatın ve kullanan BlazorWebViewbir uygulama sayfasına gidin. Geliştirici araçları konsolu, olmadan'dan ContentPageBlazorWeb Viewkullanılamaz.

2. Google Chrome veya Microsoft Edge'i açın.

3. (Google Chrome) veya chrome://inspect/#devices (Microsoft Edge) konumuna edge://inspect/#devices gidin.

4. inspect Geliştirici araçlarını açmak için bağlantı düğmesini seçin. Aşağıdaki örnekte, Microsoft Edge'deki DevTools sayfası gösterilmektedir :

   

5. Geliştirici araçları sayfanın hangi varlıkları istediği, varlıkların yüklenmesinin ne kadar sürdüğü ve yüklenen varlıkların içeriği dahil olmak üzere uygulamalarla çalışmak için çeşitli özellikler sağlar. Aşağıdaki örnekte, çerçeve veya geliştirici kodu tarafından oluşturulan özel durum iletilerini içeren konsol iletilerini görmek için Konsol sekmesi gösterilmektedir:

   

Safari geliştirici araçlarını bir iOS uygulamasıyla kullanmak için:

1. Masaüstü Safari'lerini açın.

2. Menü çubuğunda Safari> Tercihleri>Gelişmiş>Göster Geliştirme menüsünü onay kutusunu seçin.

3. .NET MAUI Blazor Hybrid Uygulamayı iOS simülatöründe çalıştırın ve kullanan BlazorWebViewbir uygulama sayfasına gidin. Geliştirici araçları konsolu, olmadan'dan ContentPageBlazorWeb Viewkullanılamaz.

4. Safari'ye geri dönün. Geliştirme>> seçin; burada {REMOTE INSPECTION TARGET} yer tutucu cihazların düz adı (örneğin, MacBook Pro) veya cihazın seri numarasıdır (örneğin).XMVM7VFF10 0.0.0.0 için birden çok girdi varsa, öğesini vurgulayan girdiyi BlazorWebViewseçin. BlazorWebView, doğru 0.0.0.0 girişi seçildiğinde iOS simülatöründe mavi renkle vurgulanır.

   

5. penceresi görüntülenir.

6. Geliştirici araçları sayfanın hangi varlıkları istediği, varlıkların yüklenmesinin ne kadar sürdüğü ve yüklenen varlıkların içeriği dahil olmak üzere uygulamalarla çalışmak için çeşitli özellikler sağlar. Aşağıdaki örnekte, çerçeve veya geliştirici kodu tarafından oluşturulan özel durum iletilerini içeren Konsol sekmesi gösterilmektedir:

   

com.apple.security.get-task-allow Hata ayıklama derlemesi Booleaniçin uygulamanın yetkilendirmeler dosyasına türündeki anahtarını ekleyin.

Anahtarıyla com.apple.security.get-task-allow bir yetkilendirme dosyası eklemek için, adlı aşağıdaki XML dosyasını Entitlements.Debug.plist projenin klasörüne Platforms/MacCatalyst ekleyin.

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>

üzerinde hata ayıklama derlemeleri Mac Catalystiçin yetkilendirmeler dosyasını kullanmak için aşağıdaki <PropertyGroup> düğümü uygulamanın proje dosyasına düğümün <Project> alt öğesi olarak ekleyin:

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

Safari geliştirici araçlarını macOS uygulamasıyla kullanmak için:

1. Masaüstü Safari'lerini açın.

2. Menü çubuğunda Safari> Tercihleri>Gelişmiş>Göster Geliştirme menüsünü onay kutusunu seçin.

3. .NET MAUI Blazor Hybrid Uygulamayı macOS'ta çalıştırın.

4. Safari'ye geri dönün. Geliştirme>> seçin; burada {REMOTE INSPECTION TARGET} yer tutucu cihazların düz adı (örneğin, MacBook Pro) veya cihazın seri numarasıdır (örneğin).XMVM7VFF10 0.0.0.0 için birden çok girdi varsa, öğesini vurgulayan girdiyi BlazorWebViewseçin. BlazorWebView doğru 0.0.0.0 girişi seçildiğinde macOS'ta mavi renkle vurgulanır.

5. penceresi görüntülenir.

6. Geliştirici araçları sayfanın hangi varlıkları istediği, varlıkların yüklenmesinin ne kadar sürdüğü ve yüklenen varlıkların içeriği dahil olmak üzere uygulamalarla çalışmak için çeşitli özellikler sağlar. Aşağıdaki örnekte, çerçeve veya geliştirici kodu tarafından oluşturulan özel durum iletilerini içeren Konsol sekmesi gösterilmektedir:

   

Ek kaynaklar

• Chrome Geliştirici Araçları
• Microsoft Edge Geliştirici Araçlarına genel bakış
• Safari Geliştirici Yardımı