ASP.NET Core'da tarayıcı bağlantısı

  • Makale

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 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 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Tarafından Nicolò Carandini ve Tom Dykstra

Tarayıcı bağlantısı bir Visual Studio özelliğidir. Geliştirme ortamı ile bir veya daha fazla web tarayıcısı arasında bir iletişim kanalı oluşturur. Tarayıcı bağlantısını kullanarak:

  • Web uygulamanızı aynı anda birkaç tarayıcıda yenileyin.
  • Ekran boyutları gibi belirli ayarlarla birden çok tarayıcıda test edin.
  • Tarayıcılardaki kullanıcı arabirimi öğelerini gerçek zamanlı olarak seçin, Visual Studio'da hangi işaretleme ve kaynakla ilişkili olduğunu görün.
  • Gerçek zamanlı tarayıcı test otomasyonu gerçekleştirin.

Çalışma zamanı derlemesi ile sık erişimli yeniden yükleme karşılaştırması

(.cshtml) dosyalarındaki Razor çalışma zamanı değişikliklerinin etkisini görmek için tarayıcı Bağlantısını çalışma zamanı derlemesi veya çalışırken yeniden yükleme ile kullanın. Çalışırken yeniden yüklemenizi öneririz.

ASP.NET Core projeniz açık olduğunda Visual Studio, Hata Ayıklama Türü araç çubuğu denetiminin yanında tarayıcı bağlantısı araç çubuğu denetimini gösterir:

tarayıcı bağlantısı açılan menüsü

Tarayıcı bağlantısı araç çubuğu denetiminden şunları yapabilirsiniz:

  • Web uygulamasını aynı anda birkaç tarayıcıda yenileyin.
  • Tarayıcı Bağlantısı Panosu'nu açın.
  • Tarayıcı Bağlantısı'nı etkinleştirin veya devre dışı bırakın.
  • CSS Çalışırken Yeniden Yükleme etkinleştirin veya devre dışı bırakın.

Web uygulamasını aynı anda birkaç tarayıcıda yenileme

Projeyi başlatırken başlatacak tek bir web tarayıcısı seçmek için Hata Ayıklama Hedefi araç çubuğu denetimindeki açılan menüyü kullanın:

F5 açılan menüsü

Aynı anda birden çok tarayıcı açmak için aynı açılan listeden Birlikte gözat... öğesini seçin. İstediğiniz tarayıcıları seçmek için Ctrl tuşunu basılı tutun ve gözat'a tıklayın:

Aynı anda birçok tarayıcı açma

Aşağıdaki ekran görüntüsünde, Dizin görünümü açık ve iki açık tarayıcı içeren Visual Studio gösterilmektedir:

İki tarayıcıyla eşitleme örneği

Projeye bağlı tarayıcıları görmek için tarayıcı bağlantısı araç çubuğu denetiminin üzerine gelin:

Vurgulama ipucu

Dizin görünümünü değiştirdiğinizde tarayıcı bağlantısı yenileme düğmesine tıkladığınızda tüm bağlı tarayıcılar güncelleştirilir:

Tarayıcılar değişikliklerle eşitlenir

tarayıcı bağlantısı, Visual Studio dışından başlattığınız ve uygulama URL'sine gitmek için kullandığınız tarayıcılarla da çalışır.

Açık tarayıcılarla bağlantıyı yönetmek için tarayıcı bağlantısı açılan menüsünden tarayıcı bağlantısı panosu penceresini açın:

how-to-open-browserlink-dashboard

Bağlı tarayıcılar, her tarayıcının gösterdiği sayfanın yolu ile gösterilir:

Tarayıcı bağlantısı panosu iki bağlantı

Yalnızca bu tarayıcıyı yenilemek için tek bir tarayıcı adına da tıklayabilirsiniz.

Tarayıcı bağlantısını devre dışı bırakdıktan sonra yeniden etkinleştirdiğinizde, yeniden bağlamak için tarayıcıları yenilemeniz gerekir.

CSS çalışırken yeniden yüklemeyi etkinleştirme veya devre dışı bırakma

CSS çalışırken yeniden yükleme etkinleştirildiğinde, CSS dosyalarında herhangi bir değişiklik yaptığınızda bağlı tarayıcılar otomatik olarak yenilenir.

Nasıl çalışır?

tarayıcı bağlantısı, Visual Studio ile tarayıcı arasında bir iletişim kanalı oluşturmak için kullanır SignalR . Tarayıcı bağlantısı etkinleştirildiğinde, Visual Studio birden çok istemcinin (tarayıcının) bağlanabileceği bir SignalR sunucu gibi davranır. Tarayıcı bağlantısı, ASP.NET Core istek işlem hattına bir ara yazılım bileşeni de kaydeder. Bu bileşen, sunucudan gelen her sayfa isteğine özel <script> başvurular ekler. Betik başvurularını, Tarayıcıda kaynağı görüntüle'yi seçip etiket içeriğinin <body> sonuna kaydırarak görebilirsiniz:

    <!-- Visual Studio browser link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"requestId":"a717d5a07c1741949a7cefd6fa2bad08","requestMappingFromServer":false}
    </script>
    <script type="text/javascript" src="http://localhost:54139/b6e36e429d034f578ebccd6a79bf19bf/browserLink" async="async"></script>
    <!-- End browser link -->
</body>

Kaynak dosyalarınız değiştirilmez. Ara yazılım bileşeni betik başvurularını dinamik olarak ekler.

Tarayıcı tarafı kodun tamamı JavaScript olduğundan, tarayıcı eklentisi gerektirmeden destekleyen tüm tarayıcılarda SignalR çalışır.

Tarafından Nicolò Carandini ve Tom Dykstra

Tarayıcı Bağlantısı bir Visual Studio özelliğidir. Geliştirme ortamı ile bir veya daha fazla web tarayıcısı arasında bir iletişim kanalı oluşturur. Tarayıcı Bağlantısını kullanarak:

  • Web uygulamanızı aynı anda birkaç tarayıcıda yenileyin.
  • Ekran boyutları gibi belirli ayarlarla birden çok tarayıcıda test edin.
  • Tarayıcılardaki kullanıcı arabirimi öğelerini gerçek zamanlı olarak seçin, Visual Studio'da hangi işaretleme ve kaynakla ilişkili olduğunu görün.
  • Gerçek zamanlı tarayıcı test otomasyonu gerçekleştirin. Tarayıcı Bağlantısı da genişletilebilir.

Projenize Microsoft.VisualStudio.Web.BrowserLink paketini ekleyin. ASP.NET Temel Razor Sayfalar veya MVC projeleri için, ASP.NET Core'da dosya derlemedeRazor Razor açıklandığı gibi (.cshtml) dosyaların çalışma zamanı derlemesini de etkinleştirin. Razor söz dizimi değişiklikleri yalnızca çalışma zamanı derlemesi etkinleştirildiğinde uygulanır.

ASP.NET Core 2.0 projesini ASP.NET Core 2.1'e dönüştürürken ve Microsoft.AspNetCore.App meta paketine geçiş yaparken, Tarayıcı Bağlantısı işlevselliği için Microsoft.VisualStudio.Web.BrowserLink paketini yükleyin. ASP.NET Core 2.1 proje şablonları varsayılan olarak meta paketi kullanır Microsoft.AspNetCore.App .

ASP.NET Core 2.0 Web Uygulaması, Boş ve Web API'si proje şablonları, Microsoft.VisualStudio.Web.BrowserLink için paket başvurusu içeren Microsoft.AspNetCore.All meta paketini kullanır. Bu nedenle, meta paketi kullanmak Microsoft.AspNetCore.All tarayıcı bağlantısını kullanıma hazır hale getirmek için başka bir işlem gerektirmez.

ASP.NET Core 1.x Web Uygulaması proje şablonu, Microsoft.VisualStudio.Web.BrowserLink paketi için bir paket başvurusuna sahiptir. Diğer proje türleri için bir paket başvurusu Microsoft.VisualStudio.Web.BrowserLinkeklemeniz gerekir.

Yapılandırma

yöntemini çağırın UseBrowserLink Startup.Configure :

app.UseBrowserLink();

Çağrı UseBrowserLink genellikle yalnızca Geliştirme ortamında Tarayıcı Bağlantısı'nı etkinleştiren bir if bloğun içine yerleştirilir. Örneğin:

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseBrowserLink();
}

Daha fazla bilgi için, bkz. ASP.NET Core'da birden çok ortam kullanma.

ASP.NET Core projeniz açık olduğunda, Visual Studio Hata Ayıklama Hedefi araç çubuğu denetiminin yanında Tarayıcı Bağlantısı araç çubuğu denetimini gösterir:

Tarayıcı Bağlantısı açılan menüsü

Tarayıcı Bağlantısı araç çubuğu denetiminden şunları yapabilirsiniz:

  • Web uygulamasını aynı anda birkaç tarayıcıda yenileyin.
  • Tarayıcı Bağlantısı Panosu'nu açın.
  • Tarayıcı Bağlantısı'nı etkinleştirin veya devre dışı bırakın. Not: Visual Studio'da Tarayıcı Bağlantısı varsayılan olarak devre dışıdır.
  • CSS Otomatik Eşitleme'yi etkinleştirin veya devre dışı bırakın.

Web uygulamasını aynı anda birkaç tarayıcıda yenileme

Projeyi başlatırken başlatacak tek bir web tarayıcısı seçmek için Hata Ayıklama Hedefi araç çubuğu denetimindeki açılan menüyü kullanın:

F5 açılan menüsü

Aynı anda birden çok tarayıcı açmak için aynı açılan listeden Birlikte gözat... öğesini seçin. İstediğiniz tarayıcıları seçmek için Ctrl tuşunu basılı tutun ve gözat'a tıklayın:

Aynı anda birçok tarayıcı açma

Aşağıdaki ekran görüntüsünde, Dizin görünümü açık ve iki açık tarayıcı içeren Visual Studio gösterilmektedir:

İki tarayıcıyla eşitleme örneği

Projeye bağlı tarayıcıları görmek için Tarayıcı Bağlantısı araç çubuğu denetiminin üzerine gelin:

Vurgulama ipucu

Dizin görünümünü değiştirdiğinizde Tarayıcı Bağlantısı yenileme düğmesine tıkladığınızda tüm bağlı tarayıcılar güncelleştirilir:

Tarayıcılar değişikliklerle eşitlenir

Tarayıcı Bağlantısı, Visual Studio dışından başlattığınız ve uygulama URL'sine gitmeniz gereken tarayıcılarla da çalışır.

Bağlantıyı açık tarayıcılarla yönetmek için Tarayıcı Bağlantısı açılan menüsünden Tarayıcı Bağlantısı Panosu penceresini açın:

open-browserslink-dashboard

Bağlı tarayıcı yoksa, Tarayıcıda Görüntüle bağlantısını seçerek hata ayıklama dışı bir oturum başlatabilirsiniz:

Tarayıcı bağlantısı panosu bağlantı yok

Aksi takdirde, bağlı tarayıcılar her tarayıcının gösterdiği sayfanın yolu ile gösterilir:

Browserlink panosu iki bağlantı

Yalnızca bu tarayıcıyı yenilemek için tek bir tarayıcı adına da tıklayabilirsiniz.

Tarayıcı Bağlantısını devre dışı bırakdıktan sonra yeniden etkinleştirdiğinizde, yeniden bağlamak için tarayıcıları yenilemeniz gerekir.

CSS Otomatik Eşitlemeyi etkinleştirme veya devre dışı bırakma

CSS Otomatik Eşitleme etkinleştirildiğinde, CSS dosyalarında herhangi bir değişiklik yaptığınızda bağlı tarayıcılar otomatik olarak yenilenir.

Nasıl çalışır?

Tarayıcı Bağlantısı, Visual Studio ile tarayıcı arasında bir iletişim kanalı oluşturmak için kullanır SignalR . Tarayıcı Bağlantısı etkinleştirildiğinde, Visual Studio birden çok istemcinin (tarayıcının) bağlanabileceği bir SignalR sunucu işlevi görür. Tarayıcı Bağlantısı ayrıca bir ara yazılım bileşenini ASP.NET Core istek işlem hattına kaydeder. Bu bileşen, sunucudan gelen her sayfa isteğine özel <script> başvurular ekler. Betik başvurularını, Tarayıcıda kaynağı görüntüle'yi seçip etiket içeriğinin <body> sonuna kaydırarak görebilirsiniz:

    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"requestId":"a717d5a07c1741949a7cefd6fa2bad08","requestMappingFromServer":false}
    </script>
    <script type="text/javascript" src="http://localhost:54139/b6e36e429d034f578ebccd6a79bf19bf/browserLink" async="async"></script>
    <!-- End Browser Link -->
</body>

Kaynak dosyalarınız değiştirilmez. Ara yazılım bileşeni betik başvurularını dinamik olarak ekler.

Tarayıcı tarafı kodun tamamı JavaScript olduğundan, tarayıcı eklentisi gerektirmeden destekleyen tüm tarayıcılarda SignalR çalışır.