Hata ayıklama ASP.NET Core Blazor WebAssembly

  • Makale
  • Okumak için 18 dakika

Blazor WebAssemblyuygulamalar Chromium tabanlı tarayıcılarda (kenar/Chrome) tarayıcı geliştirme araçları kullanılarak ayıklanabilir. Ayrıca, aşağıdaki tümleşik geliştirme ortamlarını (IDEs) kullanarak uygulamanızda hata ayıklaması yapabilirsiniz:

  • Visual Studio
  • Mac için Visual Studio
  • Visual Studio Code

Kullanılabilir senaryolar şunlardır:

  • Kesme noktaları ayarlayın ve kaldırın.
  • Uygulamaları, hata ayıklama desteğiyle birlikte çalıştırın.
  • Kodda tek adımlı.
  • Ides 'teki bir klavye kısayoluyla kod yürütmeyi sürdürür.
  • Yereller penceresinde, yerel değişkenlerin değerlerini gözlemleyin.
  • JavaScript ve .NET arasındaki çağrı zincirleri dahil olmak üzere çağrı yığınına bakın.

Şimdilik şunları yapamazsınız:

  • İşlenmemiş özel durumların üzerine bölün.
  • Hata ayıklama proxy 'si çalışmadan önce uygulama başlatılırken kesme noktaları isabet edin. Bu, uygulamasında kesme noktaları Program.cs ve uygulamadan istenen ilk sayfa tarafından yüklenen bileşenlerin OnInitialized{Async} yaşam döngüsü yöntemlerinde kesme noktaları içerir.
  • yerel olmayan senaryolarda hata ayıklayın (örneğin, Linux için Windows Alt Sistemi (wsl) veya Visual Studio codespaces).
  • Server Hata ayıklama sırasında bir barındırılan çözümün arka uç uygulamasını Blazor WebAssembly , örneğin uygulamasını ile çalıştırarak otomatik olarak yeniden derleyin dotnet watch run .

Önkoşullar

Hata ayıklama aşağıdaki tarayıcılardan birini gerektirir:

  • Google Chrome (sürüm 70 veya üzeri) (varsayılan)
  • Microsoft Edge (sürüm 80 veya üzeri)

Güvenlik duvarları veya proxy 'lerin hata ayıklama proxy 'si (işlem) ile iletişimi engellemediğinden emin olun NodeJS . Daha fazla bilgi için güvenlik duvarı yapılandırması bölümüne bakın.

Visual Studio Code kullanıcılar aşağıdaki uzantıları gerektirir:

VS Code bir projeyi açtıktan sonra, hata ayıklamayı etkinleştirmek için ek kurulumun gerekli olduğunu belirten bir bildirim alabilirsiniz. isteniyorsa, Visual Studio marketi 'nden gerekli uzantıları yükler. Yüklü uzantıları denetlemek için, menü çubuğundan uzantıları görüntüle' yi açın > veya etkinlik kenar çubuğunda Uzantılar simgesini seçin.

Mac için Visual Studio sürüm 8,8 (derleme 1532) veya üzeri gerektirir:

  1. Microsoft 'ta Mac için Visual Studio indir düğmesini seçerek en son Mac için Visual Studio sürümünü yükleyin : Mac için Visual Studio.
  2. Visual Studio içinden Önizleme kanalını seçin. daha fazla bilgi için bkz. Mac için Visual Studio preview sürümü yüklemesi.

Not

MacOS üzerinde Apple Safari Şu anda desteklenmemektedir.

Tek başına bir Blazor WebAssembly uygulamada hata ayıklama

Mevcut bir uygulamada hata ayıklamayı etkinleştirmek için Blazor WebAssembly , launchSettings.json Başlangıç projesindeki dosyayı her bir başlatma profiline aşağıdaki özelliği içerecek şekilde güncelleştirin inspectUri :

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"

Dosya güncelleştirildikten sonra, launchSettings.json aşağıdaki örneğe benzer şekilde görünür:

{
    "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
        "applicationUrl": "http://localhost:50454",
        "sslPort": 44399
      }
    },
    "profiles": {
      "IIS Express": {
        "commandName": "IISExpress",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      },
      "BlazorApp1.Server": {
        "commandName": "Project",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "applicationUrl": "https://localhost:5001;http://localhost:5000",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      }
    }
  }

inspectUriÖzelliği:

  • IDE 'nin uygulamanın bir uygulama olduğunu algılamasını sağlar Blazor WebAssembly .
  • Betik hata ayıklama altyapısına, Blazor hata ayıklama proxy 'si aracılığıyla tarayıcıya bağlanmasını söyler.

wsProtocolBaşlatılan tarayıcıdaki () WebSocket protokolü (), ana bilgisayar ( url.hostname ), bağlantı noktası () ve Inspector URI 'si için yer tutucu değerleri, url.port browserInspectUri Framework tarafından sağlanır.

Visual Studio bir uygulamada hata ayıklamak için Blazor WebAssembly :

  1. Yeni bir barındırılan Blazor WebAssembly çözüm oluşturun.

  2. Çözüm Gezgini ' Server de proje seçiliyken , uygulamayı hata ayıklayıcıda çalıştırmak için F5 ' e basın.

    Not

    Google Chrome veya Microsoft Edge gibi Chromium tabanlı bir tarayıcıyla hata ayıklarken, yeni bir tarayıcı penceresi, kullanıcı profiliyle mevcut bir tarayıcı penceresinde bir sekme açmak yerine hata ayıklama oturumu için ayrı bir profille açılabilir. Kullanıcının profilinde hata ayıklama işlemi bir gereksinimdir, aşağıdaki yaklaşımlardan birini benimseyin:

    Not

    Hata ayıklama olmadan Başlat (CTRL + F5) desteklenmez. Uygulama hata ayıklama yapılandırmasında çalıştırıldığında, hata ayıklama ek yükü her zaman küçük bir performans azalmasıyla sonuçlanır.

  3. *Client*Uygulamada, içindeki satırda bir kesme noktası ayarlayın currentCount++; Pages/Counter.razor .

  4. Tarayıcıda Counter sayfasına gidin ve kesme noktasına ulaşmak için bana tıklayın düğmesini seçin.

  5. Visual Studio ' de, currentCount yereller penceresindeki alanın değerini inceleyin.

  6. Yürütmeye devam etmek için F5 tuşuna basın.

Bir uygulamada hata ayıklarken Blazor WebAssembly , sunucu kodunda hata ayıklama de yapabilirsiniz:

  1. İçindeki sayfada bir kesme noktası ayarlayın Pages/FetchData.razor OnInitializedAsync .
  2. Eylem yönteminde içinde bir kesme noktası ayarlayın WeatherForecastController Get .
  3. Fetch Data FetchData Sunucuya bir http isteği vermeden önce, bileşendeki ilk kesme noktasına isabet etmek için sayfaya gidin.
  4. Yürütmeye devam etmek için F5 tuşuna basın ve içindeki sunucudaki kesme noktasına gidin WeatherForecastController .
  5. Yürütmenin devam etmesine izin vermek için F5 tuşuna basın ve tarayıcıda işlenen Hava durumu tahmin tablosunu görüntüleyin.

Not

Hata ayıklama proxy 'si çalışmadan önce uygulama başlatma sırasında kesme noktaları isabet etmez . Bu, uygulamasında kesme noktaları Program.cs ve uygulamadan istenen ilk sayfa tarafından yüklenen bileşenlerin OnInitialized{Async} yaşam döngüsü yöntemlerinde kesme noktaları içerir.

Uygulama, farklı bir uygulama temel yolunda barındırılıyorsa / , Properties/launchSettings.json uygulamasının temel yolunu yansıtmak için ' de aşağıdaki özellikleri güncelleştirin:

  • applicationUrl:

    "iisSettings": {
  ...
  "iisExpress": {
    "applicationUrl": "http://localhost:{INSECURE PORT}/{APP BASE PATH}/",
    "sslPort": {SECURE PORT}
  }
},

  • inspectUri Her profilin:

    "profiles": {
  ...
  "{PROFILE 1, 2, ... N}": {
    ...
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/{APP BASE PATH}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    ...
  }
}

Önceki ayarlarda yer tutucular:

  • {INSECURE PORT}: Güvensiz bağlantı noktası. Rastgele bir değer varsayılan olarak sağlanır, ancak özel bir bağlantı noktasına izin verilir.
  • {APP BASE PATH}: Uygulamanın temel yolu.
  • {SECURE PORT}: Güvenli bağlantı noktası. Rastgele bir değer varsayılan olarak sağlanır, ancak özel bir bağlantı noktasına izin verilir.
  • {PROFILE 1, 2, ... N}: Ayarlar profillerini başlatın. genellikle, bir uygulama varsayılan olarak birden fazla profil belirtir (örneğin, IIS Express için bir profil ve sunucu tarafından kullanılan bir proje profili Kestrel ).

Aşağıdaki örneklerde, uygulama şu /OAT şekilde yapılandırılmış bir uygulama temel yolu ile konumunda barındırılır wwwroot/index.html <base href="/OAT/"> :

"applicationUrl": "http://localhost:{INSECURE PORT}/OAT/",

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/OAT/_framework/debug/ws-proxy?browser={browserInspectUri}",

Uygulamalar için özel bir uygulama temel yolu kullanma hakkında daha fazla bilgi için Blazor WebAssembly bkz ASP.NET Core barındırma ve dağıtma Blazor ..

Tarayıcıda hata ayıklama

Bu bölümdeki kılavuz Google Chrome ve Microsoft Edge için Windows.

  1. Geliştirme ortamında uygulamanın Hata ayıklama derlemesi çalıştırın.

  2. Bir tarayıcıyı açın ve uygulamanın URL'sini (örneğin, https://localhost:7268 ) gidin.

  3. Tarayıcıda Shift Alt d tuşlarına basarak uzaktan hata ayıklamaya + başlamayı + deneyin.

    Tarayıcı, varsayılan değer olmayan uzaktan hata ayıklama etkin olarak çalışıyor olmalıdır. Uzaktan hata ayıklama devre dışı bırakılırsa, hata ayıklanabilir tarayıcı bulunamıyor sekmesi hata sayfası, hata ayıklama bağlantı noktası açık şekilde tarayıcıyı başlatma yönergeleriyle işlenir. Yeni bir tarayıcı penceresi açan tarayıcınızın yönergelerini izleyin. Önceki tarayıcı penceresini kapatın.

  1. Tarayıcı uzaktan hata ayıklama etkinleştirildiğinde, önceki adımda yer alan hata ayıklama klavye kısayolu yeni bir hata ayıklayıcı sekmesi açar.

  2. Bir süre sonra Kaynaklar sekmesinde uygulamanın düğüm içindeki .NET derlemelerinin listesi file:// görüntülenir.

  3. Bileşen kodunda ( dosyalar) ve C# kod dosyalarında ( ), kod yürütülürken .razor .cs ayarlamış olduğunuz kesme noktalarına isabet eder. Bir kesme noktası isabet edildikten sonra, kod aracılığıyla tek adımlı (F10) veya normal olarak (F8) kod yürütmeyi sürdürün.

Blazor Chrome DevTools Protokolünü uygulayan ve protokolünü ile geliştiren bir hata ayıklama proxy'si sağlar. NET'e özgü bilgiler. Hata ayıklama klavye kısayolu basıldığında ara Blazor sunucuya Chrome DevTools'u belirtir. Ara sunucu, hata ayıklamak için aradığınız tarayıcı penceresine bağlanır (bu nedenle uzaktan hata ayıklamayı etkinleştirmeniz gerekir).

Tarayıcı kaynak eşlemeleri

Tarayıcı kaynak eşlemeleri, tarayıcının derlenmiş dosyaları özgün kaynak dosyalarına geri eşlemesine olanak sağlar ve genellikle istemci tarafı hata ayıklama için kullanılır. Ancak, Blazor şu anda C# kodunu doğrudan JavaScript/WASM ile eşlemez. Bunun yerine Blazor tarayıcıda IL yorumlaması yapar, bu nedenle kaynak eşlemeler ilgili değildir.

Güvenlik duvarı yapılandırması

Güvenlik duvarı hata ayıklama proxy'si ile iletişimi engellerse, tarayıcı ile işlem arasında iletişime izin alan bir güvenlik duvarı özel durum kuralı NodeJS oluşturun.

Uyarı

Güvenlik açıklarının oluşturulmasını önlemek için güvenlik duvarı yapılandırmasının değiştirilmesi gerekir. Güvenlik yönergelerini dikkatle uygulama, en iyi güvenlik uygulamalarını izleme ve güvenlik duvarının üreticisi tarafından verilen uyarılara uyma.

İşlemle açık iletişime izin NodeJS verilmesi:

  • Güvenlik duvarının özelliklerine ve yapılandırmasına bağlı olarak Düğüm sunucusunu herhangi bir bağlantıda açar.
  • Ağınıza bağlı olarak riskli olabilir.
  • Yalnızca geliştirici makinelerde önerilir.

Mümkünse, yalnızca güvenilir veya özel ağlarda NodeJS işlemle açık iletişime izin verir.

Güvenlik Windows kılavuzu için bkz. Gelen Program veya Hizmet Kuralı Oluşturma. Daha fazla bilgi için Windows Defender Güvenlik Duvarı belge kümesinde Gelişmiş Güvenlik Duvarı ve ilgili Windows bakın.

Sorun giderme

Hatayla karşınız varsa aşağıdaki ipuçları yardımcı olabilir:

  • Hata Ayıklayıcı sekmesinde, tarayıcınızda geliştirici araçlarını açın. Konsolunda, herhangi bir localStorage.clear() kesme noktası kaldırmak için yürütün.
  • HTTPS geliştirme sertifikasının yüklü ve güvenilir olduğunu ASP.NET Core onaylayın. Daha fazla bilgi için bkz. ASP.NET Core 'de HTTPS 'yi zorla.
  • Visual Studio Için JavaScript hata ayıklamasını etkinleştir seçeneği ASP.NET Araçlar Seçenekler Hata Ayıklama Genel 'de (Chrome, Edge ve IE) > > > seçeneğini gerektirir. Bu, uygulama için varsayılan Visual Studio. Hata ayıklama çalışmıyorsa seçeneğinin seçili olduğunu onaylayın.
  • Ortamınız bir HTTP ara sunucusu kullanıyorsa, bunun ara localhost sunucu atlama ayarlarına dahil olduğundan emin olun. Bu, ortam değişkeninin şu NO_PROXY ikisinde de ayar yapılmasıyla yapılabilir:
    • launchSettings.jsonProjenin dosyası.
    • Tüm uygulamalara uygulamak için kullanıcı veya sistem ortamı değişkenleri düzeyinde. Ortam değişkeni kullanırken, değişikliğin Visual Studio için yeniden başlatın.
  • Güvenlik duvarlarının veya ara sunucuların hata ayıklama proxy'si ( işlemi) ile iletişimi engellemey olduğundan emin NodeJS olun. Daha fazla bilgi için Güvenlik duvarı yapılandırması bölümüne bakın.

Kesme noktaları OnInitialized{Async} isabet değil

Çerçevenin hata ayıklama proxy'sini başlatmak kısa sürer, bu nedenle yaşam döngüsü Blazor OnInitialized{Async} yöntemlerinde kesme noktalarına isabeti olmaz. Kesme noktası isabetmeden önce hata ayıklama proxy'sinde başlatmaya biraz zaman vermek için yöntem gövdesinin başında bir gecikme eklemenizi öneririz. Gecikmenin uygulamanın yayın if derlemesinde mevcut olduğundan emin olmak için gecikmeyi bir derleyici yönergesine göre dahil edin.

OnInitialized:

protected override void OnInitialized()
{
#if DEBUG
    Thread.Sleep(10000);
#endif

    ...
}

OnInitializedAsync:

protected override async Task OnInitializedAsync()
{
#if DEBUG
    await Task.Delay(10000);
#endif

    ...
}

Visual Studio (Windows) zaman aşımı

Bu Visual Studio hata ayıklama bağdaştırıcısının başlatılamamasına neden olan bir özel durum oluşturursa, zaman aşımını kayıt defteri ayarıyla ayarlayabilirsiniz:

VsRegEdit.exe set "<VSInstallFolder>" HKCU JSDebugger\Options\Debugging "BlazorTimeoutInMilliseconds" dword {TIMEOUT}

Önceki {TIMEOUT} komutta yer tutucu milisaniye cinsindendir. Örneğin, bir dakika olarak 60000 atanır.

Blazor WebAssemblyuygulamaları, tarayıcı tabanlı tarayıcılarda (Edge/Chrome) Chromium geliştirme araçları kullanılarak hata ayıklayabilirsiniz. Ayrıca aşağıdaki tümleşik geliştirme ortamlarını (IDE) kullanarak uygulama hata ayıklaması yapabilirsiniz:

  • Visual Studio
  • Mac için Visual Studio
  • Visual Studio Code

Kullanılabilir senaryolar şunlardır:

  • Kesme noktaları ayarlayın ve kaldırın.
  • IDE'lerde hata ayıklama desteğiyle uygulamayı çalıştırın.
  • Kodda tek adımlı.
  • IDE'lerde klavye kısayolu ile kod yürütmeyi sürdürme.
  • Yereller penceresinde yerel değişkenlerin değerlerini gözlemler.
  • JavaScript ile .NET arasındaki çağrı zincirleri de dahil olmak üzere çağrı yığınına bakın.

Şu an için şunlarıa izin velisi yok:

  • İşlenemeyen özel durumlarda kesme.
  • Hata ayıklama proxy'si çalışmadan önce uygulama başlatma sırasında kesme noktalarına isabet edin. Buna, uygulamasından istenen ilk sayfa tarafından yüklenen bileşenlerin yaşam döngüsü yöntemlerinde kesme noktaları ve Program.cs kesme noktaları dahildir. OnInitialized{Async}
  • Yerel olmayan senaryolarda (örneğin, Linux için Windows Alt Sistemi (WSL) veya Visual Studio Codespaces) hata ayıklaması.
  • Hata ayıklama sırasında, örneğin uygulamayı ile çalıştırarak barındırılan bir çözümün arka uç *Server* uygulamasını otomatik olarak yeniden Blazor WebAssembly dotnet watch run oluşturma.

Önkoşullar

Hata ayıklama aşağıdaki tarayıcılardan birini gerektirir:

  • Google Chrome (sürüm 70 veya sonrası) (varsayılan)
  • Microsoft Edge (sürüm 80 veya sonrası)

Güvenlik duvarlarının veya ara sunucuların hata ayıklama proxy'si ( işlemi) ile iletişimi engellemey olduğundan emin NodeJS olun. Daha fazla bilgi için Güvenlik duvarı yapılandırması bölümüne bakın.

Visual Studio Code için aşağıdaki uzantılar gerekir:

Bir projeyi VS Code sonra, hata ayıklamayı etkinleştirmek için ek kurulum gerekli olduğunu bildirebilirsiniz. İstekte bulunduysanız, marketten gerekli Visual Studio yükleyin. Yüklü uzantıları incelemek için menü çubuğundan Uzantıları Görüntüle'yi açın veya Etkinlik kenar > çubuğundan Uzantılar simgesini seçin.

Mac için Visual Studio 8.8 (derleme 1532) veya sonraki bir sürümü gerektirir:

  1. Microsoft: Mac için Visual Studio Mac için Visual Studio'da İndir düğmesini seçerek Mac için Visual Studio sürümünü yükleyin.
  2. Önizleme kanalını seçin ve Visual Studio. Daha fazla bilgi için, bkz. Install a preview version of Mac için Visual Studio.

Not

macOS üzerinde Apple Safari şu anda desteklenmiyor.

Tek başına uygulamada hata Blazor WebAssembly ayıklama

Mevcut bir uygulamada hata ayıklamayı etkinleştirmek için başlangıç projesinde dosyasını her başlatma Blazor WebAssembly launchSettings.json profiline aşağıdaki inspectUri özelliği içerecek şekilde güncelleştirin:

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"

Güncelleştirildiğinde, launchSettings.json dosya aşağıdaki örnekteki gibi bir görünüme sahip olur:

{
    "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
        "applicationUrl": "http://localhost:50454",
        "sslPort": 44399
      }
    },
    "profiles": {
      "IIS Express": {
        "commandName": "IISExpress",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      },
      "BlazorApp1.Server": {
        "commandName": "Project",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "applicationUrl": "https://localhost:5001;http://localhost:5000",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      }
    }
  }

inspectUriözelliği:

  • IDE'nin uygulamanın bir uygulama olduğunu algılamaya olanak Blazor WebAssembly sağlar.
  • Betik hata ayıklama altyapısına'nın hata ayıklama proxy'si aracılığıyla Blazor tarayıcıya bağlanmasını sağlar.

WebSocket protokolü ( ), konak ( ), bağlantı noktası ( ) ve başlatılan tarayıcıda wsProtocol url.hostname denetçi url.port URI'sı ( ) için yer tutucu değerleri browserInspectUri çerçeve tarafından sağlanır.

Bir uygulamada hata Blazor WebAssembly ayıklamak için Visual Studio:

  1. Yeni bir barındırılan çözüm Blazor WebAssembly oluşturun.

  2. içinde Server proje seçiliyken Çözüm Gezgini F5 tuşuna basarak uygulamayı hata ayıklayıcısında çalıştırın.

    Not

    Google Chrome veya Microsoft Edge gibi Chromium tabanlı bir tarayıcıda hata ayıklarken, kullanıcının profiliyle mevcut bir tarayıcı penceresinde sekme açmak yerine hata ayıklama oturumu için ayrı bir profille yeni bir tarayıcı penceresi açabilirsiniz. Kullanıcının profiliyle hata ayıklama bir gereksinimse, aşağıdaki yaklaşımlardan birini benimsersiniz:

    • Hata ayıklamayı başlatmak için F5 tuşuna basmadan önce tüm açık tarayıcı örneklerini kapatın.
    • Tarayıcıyı Visual Studio profiliyle başlatarak yapılandırma. Bu yaklaşım hakkında daha fazla bilgi için bkz. VS'de WASM Hata Ayıklama ayrı bir kullanıcı veri diziniyle Edge'i başlatıyor Blazor (dotnet/aspnetcore #20915).

    Not

    Hata Ayıklama Olmadan Başlat (Ctrl + F5) desteklenmiyor. Uygulama Hata Ayıklama yapılandırmasında çalıştır olduğunda, hata ayıklama ek yükü her zaman küçük bir performans düşüşüne neden olur.

  3. Uygulamada, *Client* içinde satırda bir kesme noktası currentCount++; Pages/Counter.razor ayarlayın.

  4. Tarayıcıda sayfaya gidin Counter ve bana tıklayın düğmesini seçerek kesme noktası seçin.

  5. Bu Visual Studio yereller currentCount penceresindeki alanın değerini inceler.

  6. Yürütmeye devam etmek için F5'e basın.

Bir uygulamada hata Blazor WebAssembly ayıklarken, sunucu kodunda da hata ayıkabilirsiniz:

  1. sayfasında bir kesme Pages/FetchData.razor noktası OnInitializedAsync ayarlayın.
  2. eylem yönteminde içinde WeatherForecastController bir kesme noktası Get ayarlayın.
  3. Sunucuya HTTP isteği oluşturmadan hemen önce bileşende ilk kesme Fetch Data noktası isabet etmek için sayfaya göz FetchData atın.
  4. Yürütmeye devam etmek için F5 tuşuna basın ve ardından sunucusundaki kesme noktasına WeatherForecastController basın.
  5. Yürütmenin devam ettiğine ve tarayıcıda işlenen hava durumu tahmin tablosuna bakarak F5'e tekrar basın.

Not

Hata ayıklama proxy'si çalışmadan önce uygulama başlatma sırasında kesme noktalarına isabet olmaz. Buna, uygulamasından istenen ilk sayfa tarafından yüklenen bileşenlerin yaşam döngüsü yöntemlerinde kesme noktaları ve Program.cs kesme noktaları dahildir. OnInitialized{Async}

Uygulama, uygulamasından farklı bir uygulama temel yolunda barındırıldı ise, aşağıdaki özellikleri uygulamanın temel / yolunu Properties/launchSettings.json yansıtacak şekilde güncelleştirin:

  • applicationUrl:

    "iisSettings": {
  ...
  "iisExpress": {
    "applicationUrl": "http://localhost:{INSECURE PORT}/{APP BASE PATH}/",
    "sslPort": {SECURE PORT}
  }
},

  • inspectUri her profilin:

    "profiles": {
  ...
  "{PROFILE 1, 2, ... N}": {
    ...
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/{APP BASE PATH}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    ...
  }
}

Önceki ayarlarda yer tutucular:

  • {INSECURE PORT}: Güvenli olmayan bağlantı noktası. Varsayılan olarak rastgele bir değer sağlanır, ancak özel bir bağlantı noktasına izin verilir.
  • {APP BASE PATH}: Uygulamanın temel yolu.
  • {SECURE PORT}: Güvenli bağlantı noktası. Varsayılan olarak rastgele bir değer sağlanır, ancak özel bir bağlantı noktasına izin verilir.
  • {PROFILE 1, 2, ... N}: Ayarlar profillerini başlatma. Genellikle, bir uygulama varsayılan olarak birden fazla profil belirtir (örneğin, IIS Express için bir profil ve sunucu tarafından kullanılan bir proje Kestrel profili).

Aşağıdaki örneklerde, uygulama olarak yapılandırılmış /OAT bir uygulama temel yolu ile üzerinde wwwroot/index.html <base href="/OAT/"> barındırıldı:

"applicationUrl": "http://localhost:{INSECURE PORT}/OAT/",

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/OAT/_framework/debug/ws-proxy?browser={browserInspectUri}",

Uygulamalar için özel bir uygulama temel yolu kullanma hakkında bilgi Blazor WebAssembly için bkz. ASP.NET Core barındırma ve dağıtma Blazor .

Tarayıcıda hata ayıklama

Bu bölümdeki kılavuz Google Chrome ve Microsoft Edge için Windows.

  1. Geliştirme ortamında uygulamanın Hata ayıklama derlemesi çalıştırın.

  2. Bir tarayıcıyı açın ve uygulamanın URL'sini (örneğin, https://localhost:5001 ) gidin.

  3. Tarayıcıda Shift Alt d tuşlarına basarak uzaktan hata ayıklamaya + başlamayı + deneyin.

    Tarayıcı, varsayılan değer olmayan uzaktan hata ayıklama etkin olarak çalışıyor olmalıdır. Uzaktan hata ayıklama devre dışı bırakılırsa, hata ayıklanabilir tarayıcı bulunamıyor sekmesi hata sayfası, hata ayıklama bağlantı noktası açık şekilde tarayıcıyı başlatma yönergeleriyle işlenir. Yeni bir tarayıcı penceresi açan tarayıcınızın yönergelerini izleyin. Önceki tarayıcı penceresini kapatın.

  1. Tarayıcı uzaktan hata ayıklama etkinleştirildiğinde, önceki adımda yer alan hata ayıklama klavye kısayolu yeni bir hata ayıklayıcı sekmesi açar.

  2. Bir süre sonra Kaynaklar sekmesinde uygulamanın düğüm içindeki .NET derlemelerinin listesi file:// görüntülenir.

  3. Bileşen kodunda ( dosyalar) ve C# kod dosyalarında ( ), kod yürütülürken .razor .cs ayarlamış olduğunuz kesme noktalarına isabet eder. Bir kesme noktası isabet edildikten sonra, kod aracılığıyla tek adımlı (F10) veya normal olarak (F8) kod yürütmeyi sürdürün.

Blazor Chrome DevTools Protokolünü uygulayan ve protokolünü ile geliştiren bir hata ayıklama proxy'si sağlar. NET'e özgü bilgiler. Hata ayıklama klavye kısayolu basıldığında ara Blazor sunucuya Chrome DevTools'u belirtir. Ara sunucu, hata ayıklamak için aradığınız tarayıcı penceresine bağlanır (bu nedenle uzaktan hata ayıklamayı etkinleştirmeniz gerekir).

Tarayıcı kaynak eşlemeleri

Tarayıcı kaynak eşlemeleri, tarayıcının derlenmiş dosyaları özgün kaynak dosyalarına geri eşlemesine olanak sağlar ve genellikle istemci tarafı hata ayıklama için kullanılır. Ancak, Blazor şu anda C# kodunu doğrudan JavaScript/WASM ile eşlemez. Bunun yerine Blazor tarayıcıda IL yorumlaması yapar, bu nedenle kaynak eşlemeler ilgili değildir.

Güvenlik duvarı yapılandırması

Güvenlik duvarı hata ayıklama proxy'si ile iletişimi engellerse, tarayıcı ile işlem arasında iletişime izin alan bir güvenlik duvarı özel durum kuralı NodeJS oluşturun.

Uyarı

Güvenlik açıklarının oluşturulmasını önlemek için bir güvenlik duvarı yapılandırmasında değişiklik yapılması gerekir. Güvenlik yönergelerini dikkatle uygulama, en iyi güvenlik uygulamalarını izleme ve güvenlik duvarının üreticisi tarafından verilen uyarılara uyma.

İşlemle açık iletişime izin NodeJS verilmesi:

  • Güvenlik duvarının özelliklerine ve yapılandırmasına bağlı olarak Düğüm sunucusunu herhangi bir bağlantıda açar.
  • Ağınıza bağlı olarak riskli olabilir.
  • Yalnızca geliştirici makinelerde önerilir.

Mümkünse, yalnızca güvenilir veya özel ağlarda NodeJS işlemle açık iletişime izin verir.

Güvenlik Windows kılavuzu için bkz. Gelen Program veya Hizmet Kuralı Oluşturma. Daha fazla bilgi için Windows Defender Güvenlik Duvarı belge kümesinde Gelişmiş Güvenlik Duvarı ve ilgili Windows bakın.

Sorun giderme

Hatayla karşınız varsa aşağıdaki ipuçları yardımcı olabilir:

  • Hata Ayıklayıcı sekmesinde, tarayıcınızda geliştirici araçlarını açın. Konsolunda, localStorage.clear() tüm kesme noktalarını kaldırmak için yürütün.
  • ASP.NET Core HTTPS geliştirme sertifikasını yüklediğinizden ve güvendiğini doğrulayın. Daha fazla bilgi için bkz. ASP.NET Core 'de HTTPS 'yi zorla.
  • Visual Studio, araçlar seçenekler genel hata ayıklama bölümünde ASP.NET için JavaScript hata ayıklamasını etkinleştir (Chrome, Edge ve ıe) seçeneği gerektirir > > > . Bu, Visual Studio için varsayılan ayardır. Hata ayıklama çalışmıyorsa, seçeneğinin seçili olduğundan emin olun.
  • Ortamınız bir HTTP proxy kullanıyorsa, localhost proxy atlama ayarlarına dahil edildiğinden emin olun. Bu, NO_PROXY ortam değişkeni şu şekilde ayarlanarak yapılabilir:
    • launchSettings.jsonProjenin dosyası.
    • Kullanıcı veya sistem ortamı değişkenleri düzeyinde tüm uygulamalara uygulanır. bir ortam değişkeni kullanırken, değişikliğin etkili olması için Visual Studio yeniden başlatın.
  • Güvenlik duvarları veya proxy 'lerin hata ayıklama proxy 'si (işlem) ile iletişimi engellemediğinden emin olun NodeJS . Daha fazla bilgi için güvenlik duvarı yapılandırması bölümüne bakın.

OnInitialized{Async}İsabet bulunmayan kesme noktaları

BlazorÇerçevenin hata ayıklama proxy 'sinin başlatılması kısa bir süre sürer, bu nedenle OnInitialized{Async} yaşam döngüsü yöntemlerinde kesme noktaları isabet edemeyebilir. Hata ayıklama proxy 'sine, kesme noktasından önce başlamak için bir süre önce, Yöntem gövdesinin başlangıcında bir gecikme eklemeniz önerilir. Uygulamanın yayın derlemesi için gecikmeye izin olmadığından emin olmak için bir if derleyici yönergesine göre gecikmeyi dahil edebilirsiniz.

OnInitialized:

protected override void OnInitialized()
{
#if DEBUG
    Thread.Sleep(10000);
#endif

    ...
}

OnInitializedAsync:

protected override async Task OnInitializedAsync()
{
#if DEBUG
    await Task.Delay(10000);
#endif

    ...
}

Visual Studio (Windows) zaman aşımı

Visual Studio, hata ayıklama bağdaştırıcısının zaman aşımına ulaşılmış olduğunu belirten bir özel durum oluşturursa, zaman aşımını bir kayıt defteri ayarı ile ayarlayabilirsiniz:

VsRegEdit.exe set "<VSInstallFolder>" HKCU JSDebugger\Options\Debugging "BlazorTimeoutInMilliseconds" dword {TIMEOUT}

{TIMEOUT}Önceki komutta yer tutucu milisaniyedir. Örneğin, bir dakika olarak atanır 60000 .

Blazor WebAssemblyuygulamalar Chromium tabanlı tarayıcılarda (kenar/Chrome) tarayıcı geliştirme araçları kullanılarak ayıklanabilir. Ayrıca, aşağıdaki tümleşik geliştirme ortamlarını (IDEs) kullanarak uygulamanızda hata ayıklaması yapabilirsiniz:

  • Visual Studio
  • Mac için Visual Studio
  • Visual Studio Code

Kullanılabilir senaryolar şunlardır:

  • Kesme noktaları ayarlayın ve kaldırın.
  • Uygulamaları, hata ayıklama desteğiyle birlikte çalıştırın.
  • Kodda tek adımlı.
  • Ides 'teki bir klavye kısayoluyla kod yürütmeyi sürdürür.
  • Yereller penceresinde, yerel değişkenlerin değerlerini gözlemleyin.
  • JavaScript ve .NET arasındaki çağrı zincirleri dahil olmak üzere çağrı yığınına bakın.

Şimdilik şunları yapamazsınız:

  • İşlenmemiş özel durumların üzerine bölün.
  • Hata ayıklama proxy 'si çalışmadan önce uygulama başlatılırken kesme noktaları isabet edin. Bu, uygulamasında kesme noktaları Program.cs ve uygulamadan istenen ilk sayfa tarafından yüklenen bileşenlerin OnInitialized{Async} yaşam döngüsü yöntemlerinde kesme noktaları içerir.
  • yerel olmayan senaryolarda hata ayıklayın (örneğin, Linux için Windows Alt Sistemi (wsl) veya Visual Studio codespaces).
  • *Server*Hata ayıklama sırasında bir barındırılan çözümün arka uç uygulamasını Blazor WebAssembly , örneğin uygulamasını ile çalıştırarak otomatik olarak yeniden derleyin dotnet watch run .

Önkoşullar

Hata ayıklama aşağıdaki tarayıcılardan birini gerektirir:

  • Google Chrome (sürüm 70 veya üzeri) (varsayılan)
  • Microsoft Edge (sürüm 80 veya üzeri)

Güvenlik duvarları veya proxy 'lerin hata ayıklama proxy 'si (işlem) ile iletişimi engellemediğinden emin olun NodeJS . Daha fazla bilgi için güvenlik duvarı yapılandırması bölümüne bakın.

Visual Studio Code kullanıcılar aşağıdaki uzantıları gerektirir:

VS Code bir projeyi açtıktan sonra, hata ayıklamayı etkinleştirmek için ek kurulumun gerekli olduğunu belirten bir bildirim alabilirsiniz. isteniyorsa, Visual Studio marketi 'nden gerekli uzantıları yükler. Yüklü uzantıları denetlemek için, menü çubuğundan uzantıları görüntüle' yi açın > veya etkinlik kenar çubuğunda Uzantılar simgesini seçin.

Mac için Visual Studio sürüm 8,8 (derleme 1532) veya üzeri gerektirir:

  1. Microsoft 'ta Mac için Visual Studio indir düğmesini seçerek en son Mac için Visual Studio sürümünü yükleyin : Mac için Visual Studio.
  2. Visual Studio içinden Önizleme kanalını seçin. daha fazla bilgi için bkz. Mac için Visual Studio preview sürümü yüklemesi.

Not

MacOS üzerinde Apple Safari Şu anda desteklenmemektedir.

Tek başına bir Blazor WebAssembly uygulamada hata ayıklama

Mevcut bir uygulamada hata ayıklamayı etkinleştirmek için Blazor WebAssembly , launchSettings.json Başlangıç projesindeki dosyayı her bir başlatma profiline aşağıdaki özelliği içerecek şekilde güncelleştirin inspectUri :

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"

Dosya güncelleştirildikten sonra, launchSettings.json aşağıdaki örneğe benzer şekilde görünür:

{
    "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
        "applicationUrl": "http://localhost:50454",
        "sslPort": 44399
      }
    },
    "profiles": {
      "IIS Express": {
        "commandName": "IISExpress",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      },
      "BlazorApp1.Server": {
        "commandName": "Project",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "applicationUrl": "https://localhost:5001;http://localhost:5000",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      }
    }
  }

inspectUriÖzelliği:

  • IDE 'nin uygulamanın bir uygulama olduğunu algılamasını sağlar Blazor WebAssembly .
  • Betik hata ayıklama altyapısına, Blazor hata ayıklama proxy 'si aracılığıyla tarayıcıya bağlanmasını söyler.

wsProtocolBaşlatılan tarayıcıdaki () WebSocket protokolü (), ana bilgisayar ( url.hostname ), bağlantı noktası () ve Inspector URI 'si için yer tutucu değerleri, url.port browserInspectUri Framework tarafından sağlanır.

Visual Studio bir uygulamada hata ayıklamak için Blazor WebAssembly :

  1. Yeni bir barındırılan Blazor WebAssembly çözüm oluşturun.

  2. Çözüm Gezgini ' Server de proje seçiliyken , uygulamayı hata ayıklayıcıda çalıştırmak için F5 ' e basın.

    Not

    Google Chrome veya Microsoft Edge gibi Chromium tabanlı bir tarayıcıyla hata ayıklarken, yeni bir tarayıcı penceresi, kullanıcı profiliyle mevcut bir tarayıcı penceresinde bir sekme açmak yerine hata ayıklama oturumu için ayrı bir profille açılabilir. Kullanıcının profilinde hata ayıklama işlemi bir gereksinimdir, aşağıdaki yaklaşımlardan birini benimseyin:

    Not

    Hata ayıklama olmadan Başlat (CTRL + F5) desteklenmez. Uygulama hata ayıklama yapılandırmasında çalıştırıldığında, hata ayıklama ek yükü her zaman küçük bir performans azalmasıyla sonuçlanır.

  3. *Client*Uygulamada, içindeki satırda bir kesme noktası ayarlayın currentCount++; Pages/Counter.razor .

  4. Tarayıcıda Counter sayfasına gidin ve kesme noktasına ulaşmak için bana tıklayın düğmesini seçin.

  5. Visual Studio ' de, currentCount yereller penceresindeki alanın değerini inceleyin.

  6. Yürütmeye devam etmek için F5 tuşuna basın.

Bir uygulamada hata ayıklarken Blazor WebAssembly , sunucu kodunda hata ayıklama de yapabilirsiniz:

  1. İçindeki sayfada bir kesme noktası ayarlayın Pages/FetchData.razor OnInitializedAsync .
  2. Eylem yönteminde içinde bir kesme noktası ayarlayın WeatherForecastController Get .
  3. Fetch Data FetchData Sunucuya bir http isteği vermeden önce, bileşendeki ilk kesme noktasına isabet etmek için sayfaya gidin.
  4. Yürütmeye devam etmek için F5 tuşuna basın ve içindeki sunucudaki kesme noktasına gidin WeatherForecastController .
  5. Yürütmenin devam etmesine izin vermek için F5 tuşuna basın ve tarayıcıda işlenen Hava durumu tahmin tablosunu görüntüleyin.

Not

Hata ayıklama proxy 'si çalışmadan önce uygulama başlatma sırasında kesme noktaları isabet etmez . Bu, uygulamasında kesme noktaları Program.cs ve uygulamadan istenen ilk sayfa tarafından yüklenen bileşenlerin OnInitialized{Async} yaşam döngüsü yöntemlerinde kesme noktaları içerir.

Uygulama, farklı bir uygulama temel yolunda barındırılıyorsa / , Properties/launchSettings.json uygulamasının temel yolunu yansıtmak için ' de aşağıdaki özellikleri güncelleştirin:

  • applicationUrl:

    "iisSettings": {
  ...
  "iisExpress": {
    "applicationUrl": "http://localhost:{INSECURE PORT}/{APP BASE PATH}/",
    "sslPort": {SECURE PORT}
  }
},

  • inspectUri Her profilin:

    "profiles": {
  ...
  "{PROFILE 1, 2, ... N}": {
    ...
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/{APP BASE PATH}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    ...
  }
}

Önceki ayarlarda yer tutucular:

  • {INSECURE PORT}: Güvensiz bağlantı noktası. Rastgele bir değer varsayılan olarak sağlanır, ancak özel bir bağlantı noktasına izin verilir.
  • {APP BASE PATH}: Uygulamanın temel yolu.
  • {SECURE PORT}: Güvenli bağlantı noktası. Rastgele bir değer varsayılan olarak sağlanır, ancak özel bir bağlantı noktasına izin verilir.
  • {PROFILE 1, 2, ... N}: Ayarlar profillerini başlatın. genellikle, bir uygulama varsayılan olarak birden fazla profil belirtir (örneğin, IIS Express için bir profil ve sunucu tarafından kullanılan bir proje profili Kestrel ).

Aşağıdaki örneklerde, uygulama şu /OAT şekilde yapılandırılmış bir uygulama temel yolu ile konumunda barındırılır wwwroot/index.html <base href="/OAT/"> :

"applicationUrl": "http://localhost:{INSECURE PORT}/OAT/",

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/OAT/_framework/debug/ws-proxy?browser={browserInspectUri}",

Uygulamalar için özel bir uygulama temel yolu kullanma hakkında daha fazla bilgi için Blazor WebAssembly bkz ASP.NET Core barındırma ve dağıtma Blazor ..

Tarayıcıda hata ayıkla

bu bölümdeki kılavuz, Google Chrome ve Windows üzerinde çalışan Microsoft Edge için geçerlidir.

  1. Geliştirme ortamında uygulamanın hata ayıklama derlemesini çalıştırın.

  2. Bir tarayıcı başlatın ve uygulamanın URL 'sine gidin (örneğin, https://localhost:5001 ).

  3. Tarayıcıda SHIFT + alt + dtuşlarına basarak uzaktan hata ayıklamayı yorum yapmaya çalışın.

    Tarayıcı, varsayılan olmayan bir uzaktan hata ayıklama etkinken çalışıyor olmalıdır. Uzaktan hata ayıklama devre dışıysa, hata ayıklanabilir Browser sekmesi hata sayfası, tarayıcıyı hata ayıklama bağlantı noktası açık olarak başlatma yönergeleriyle birlikte işlenir. Tarayıcınızla ilgili yönergeleri izleyerek yeni bir tarayıcı penceresi açılır. Önceki tarayıcı penceresini kapatın.

  1. Tarayıcı uzaktan hata ayıklama etkinken çalışmaya başladıktan sonra, önceki adımda hata ayıklama klavye kısayolu yeni bir hata ayıklayıcı sekmesi açar.

  2. Bir süre sonra, kaynaklar sekmesi, uygulama içindeki .net derlemelerinin bir listesini gösterir file:// .

  3. Bileşen kodunda ( .razor Dosyalar) ve C# kod dosyalarında ( .cs ), kod yürütüldüğünde ayarladığınız kesme noktaları isabet edilir. Kesme noktası isabet ettikten sonra, kod üzerinden tek adımlı (F10) vekod yürütme işlemini normal şekilde yapın.

BlazorChrome DevTools protokolünü uygulayan ve protokolünü ile genişlettiğini içeren bir hata ayıklama proxy 'si sağlar. NET 'e özgü bilgiler. Klavye kısayoluna hata ayıklama basıldığında, Blazor Ara sunucu üzerindeki Chrome DevTools ' ı işaret eder. Proxy, hata ayıklama işlemini Aradığınız tarayıcı penceresine bağlanır (Bu nedenle, uzaktan hata ayıklamayı etkinleştirmeniz gerekir).

Tarayıcı kaynağı eşlemeleri

Tarayıcı kaynak haritaları tarayıcının derlenmiş dosyaları özgün kaynak dosyalarına geri eşlemesine ve istemci tarafı hata ayıklama için yaygın olarak kullanılmasına izin verir. Ancak, Blazor Şu anda C# ' yi doğrudan JavaScript/te olarak eşleştirmez. Bunun yerine, Blazor tarayıcı IÇINDE Il yorumu yapar, bu nedenle kaynak haritaları ilgili değildir.

Güvenlik duvarı yapılandırması

Bir güvenlik duvarı hata ayıklama proxy 'si ile iletişimi engelliyorsa, tarayıcı ve işlem arasında iletişime izin veren bir güvenlik duvarı özel durumu kuralı oluşturun NodeJS .

Uyarı

Güvenlik açıklarının oluşturulmasını önlemek için güvenlik duvarı yapılandırmasının değiştirilmesi gerekir. Güvenlik yönergelerini dikkatle uygulama, en iyi güvenlik uygulamalarını izleme ve güvenlik duvarının üreticisi tarafından verilen uyarılara uyma.

İşlemle açık iletişime izin NodeJS ver:

  • Güvenlik duvarının özelliklerine ve yapılandırmasına bağlı olarak Node sunucusunu herhangi bir bağlantıda açar.
  • Ağınıza bağlı olarak riskli olabilir.
  • Yalnızca geliştirici makinelerde önerilir.

Mümkünse, yalnızca güvenilir veya özel ağlarda NodeJS işlemle açık iletişime izin verir.

Güvenlik Windows kılavuzu için bkz. Gelen Program veya Hizmet Kuralı Oluşturma. Daha fazla bilgi için Windows Defender Güvenlik Duvarı belge kümesinde Gelişmiş Güvenlik Duvarı ve Windows makalelerine bakın.

Sorun giderme

Hatayla karşınız varsa aşağıdaki ipuçları yardımcı olabilir:

  • Hata Ayıklayıcı sekmesinde, tarayıcınızda geliştirici araçlarını açın. Konsolunda, herhangi bir localStorage.clear() kesme noktası kaldırmak için yürütün.
  • HTTPS geliştirme sertifikasının yüklü ve güvenilir olduğunu ASP.NET Core onaylayın. Daha fazla bilgi için bkz. ASP.NET Core 'de HTTPS 'yi zorla.
  • Visual Studio Için JavaScript hata ayıklamasını etkinleştir (Chrome, Edge ve IE) ASP.NET Araçlar Seçenekler Hata Ayıklama Genel seçeneği > > > gerekir. Bu, uygulama için varsayılan Visual Studio. Hata ayıklama çalışmıyorsa seçeneğin seçili olduğunu onaylayın.
  • Ortamınız bir HTTP ara sunucusu kullanıyorsa, bunun ara localhost sunucu atlama ayarlarına dahil olduğundan emin olun. Bu, ortam değişkeninin şu NO_PROXY ikisinde de ayar yapılmasıyla yapılabilir:
    • launchSettings.jsonProjenin dosyası.
    • Tüm uygulamalara uygulamak için kullanıcı veya sistem ortamı değişkenleri düzeyinde. Ortam değişkeni kullanırken, değişikliğin Visual Studio için yeniden başlatın.
  • Güvenlik duvarlarının veya ara sunucuların hata ayıklama proxy'si ( işlemi) ile iletişimi engellemey olduğundan emin NodeJS olun. Daha fazla bilgi için Güvenlik duvarı yapılandırması bölümüne bakın.

Kesme noktaları OnInitialized{Async} isabet değil

Çerçevenin hata ayıklama proxy'sini başlatmak kısa sürer, bu nedenle yaşam döngüsü Blazor OnInitialized{Async} yöntemlerinde kesme noktalarına isabeti olmaz. Hata ayıklama proxy'sinde kesme noktası isabeti olmadan önce başlatılmasına biraz zaman vermek için yöntem gövdesinin başında bir gecikme eklemenizi öneririz. Gecikmenin uygulamanın yayın if derlemesinde mevcut olduğundan emin olmak için gecikmeyi bir derleyici yönergesine göre dahil edin.

OnInitialized:

protected override void OnInitialized()
{
#if DEBUG
    Thread.Sleep(10000);
#endif

    ...
}

OnInitializedAsync:

protected override async Task OnInitializedAsync()
{
#if DEBUG
    await Task.Delay(10000);
#endif

    ...
}

Visual Studio (Windows) zaman aşımı

Bu Visual Studio hata ayıklama bağdaştırıcısının başlatılamamasına neden olan bir özel durum oluşturursa, zaman aşımını kayıt defteri ayarıyla ayarlayabilirsiniz:

VsRegEdit.exe set "<VSInstallFolder>" HKCU JSDebugger\Options\Debugging "BlazorTimeoutInMilliseconds" dword {TIMEOUT}

Önceki {TIMEOUT} komutta yer tutucu milisaniye cinsindendir. Örneğin, bir dakika olarak 60000 atanır.