Visual Studio 2013'te Tarayıcı Bağlantısını Kullanma

Tarayıcı Bağlantısı, Visual Studio 2013'te geliştirme ortamı ile bir veya daha fazla web tarayıcısı arasında iletişim kanalı oluşturan yeni bir özelliktir. Tarayıcı Bağlantısını kullanarak web uygulamanızı aynı anda birkaç tarayıcıda yenileyebilirsiniz. Bu, tarayıcılar arası test için kullanışlıdır.

Tarayıcı Yenileme

Tarayıcı Yenileme ile, Tarayıcı Bağlantısı aracılığıyla Visual Studio'ya bağlı birden çok tarayıcıyı yenileyebilirsiniz.

Tarayıcı Yenileme'yi kullanmak için önce proje şablonlarından herhangi birini kullanarak bir ASP.NET uygulaması oluşturun. F5 tuşuna basarak veya araç çubuğundaki ok simgesine tıklayarak uygulamada hata ayıklama:

Uygulama hata ayıklama işlemini göstermek için araç çubuğunda ok simgesinin vurgulandığı Visual Studio'nun ekran görüntüsü.

Hata ayıklama için belirli bir tarayıcı seçmek için açılan listeyi de kullanabilirsiniz.

Araç çubuğunda ok simgesinin vurgulandığı ve tarayıcı listesini görüntüleyen açılan menünün gösterildiği Visual Studio'nun ekran görüntüsü.

Birden çok tarayıcıyla hata ayıklamak için Birlikte Gözat'ı seçin. Gözat iletişim kutusunda, birden çok tarayıcı seçmek için CTRL tuşunu basılı tutun. Seçili tarayıcılarla hata ayıklamak için Gözat düğmesine tıklayın. Tarayıcıyı Visual Studio dışından başlatıp uygulama URL'sine giderseniz de Tarayıcı Bağlantısı çalışır.

Bir veya daha fazlasını seçin yönergesiyle birlikte, üç tarayıcının vurgulandığı ve seçili olduğu Browse With iletişim kutusunun ekran görüntüsü.

Tarayıcı Bağlantısı denetimleri açılan listede dairesel ok simgesiyle bulunur. Ok simgesi Yenile düğmesidir.

Yenile düğmesinin kırmızıyla vurgulandığı Visual Studio'nun ekran görüntüsü. Yenile düğmesi dairesel bir ok şeklindedir.

Hangi tarayıcıların bağlı olduğunu görmek için, hata ayıklama sırasında fareyi Yenile düğmesinin üzerine getirin. Bağlı tarayıcılar bir Araç İpucu penceresinde gösterilir.

Yenile düğmesi üzerine fare ile gelindiğini gösterecek şekilde vurgulanmış Visual Studio ekran görüntüsü. Araç ipucu bağlı tarayıcıları gösteriyor.

Bağlı tarayıcıları yenilemek için Yenile düğmesine tıklayın veya CTRL+ALT+ENTER tuşlarına basın. Örneğin, aşağıdaki ekran görüntüsünde MVC 5 proje şablonu kullanılarak oluşturduğum bir ASP.NET projesi gösterilmektedir. Uygulamanın en üstte iki tarayıcıda çalıştığını görebilirsiniz. En altta proje Visual Studio'da açıktır.

A S P Nokta Net projesinin ekran görüntüsü: Uygulama, iki tarayıcıda yan yana çalışıyor ve proje Visual Studio'da aşağıda gösteriliyor.

Visual Studio'da giriş sayfasının h1< başlığını değiştirdim>:

A S P noktalı Net projesinin görüntülendiği ve H 1 başlığının vurgulandığı Visual Studio'nun ekran görüntüsü.

Yenile düğmesine tıkladığımda, değişiklik her iki tarayıcı penceresi de göründü:

ASP.NET projesinin ekran görüntüsü; değişiklikler yan yana tarayıcı pencerelerinde görüntüleniyor ve proje Visual Studio'da aşağıda gösteriliyor.

Notlar

  • Projenin Web.config dosyasındaki derleme öğesindeki değerini ayarlayarak Tarayıcı Bağlantısını etkinleştirin.
  • Uygulamanın localhost üzerinde çalışıyor olması gerekir.
  • Uygulamanın .NET 4.0 veya sonraki bir sürümü hedeflemesi gerekir.

Tarayıcı Bağlantısı panosu, Tarayıcı Bağlantısı bağlantıları hakkındaki bilgileri gösterir. Panoyu görüntülemek için Browser Link açılır menüsünü (Yenile düğmesinin yanındaki küçük aşağı ok) seçin. Ardından Tarayıcı Bağlantı Panosu'nu tıklatın.

Visual Studio'nun ekran görüntüsü; Yenile düğmesi vurgulanmış ve Açılan menüde Tarayıcı Bağlantısı Panosu vurgulanmış.

Panoda bağlı Tarayıcılar ve her tarayıcının gezindiği URL listelenir.

Tarayıcı Bağlantı Panosu'nun ekran görüntüsü, bağlı tarayıcıları ve her tarayıcının gezindiği URL'yi göstermektedir.

Önkoşullar bölümünde, bu proje için Tarayıcı Bağlantısı'nı etkinleştirmek için gereken adımlar gösterilir. Örneğin, aşağıdaki ekran görüntüsünde Web.config dosyasında "debug" değerinin false olarak ayarlandığı bir proje gösterilmektedir.

Proje için Hata Ayıklamanın etkinleştirilmesi gerektiğini belirten Önkoşullar bölümüyle Birlikte Tarayıcı Bağlantısı Panosunun ekran görüntüsü.

Statik HTML dosyalarında Tarayıcı Bağlantısı'nı etkinleştirmek için Web.config dosyanıza aşağıdakileri ekleyin.

<configuration>
  <system.webServer>    
    <handlers>
      <add name="Browser Link for HTML" path="*.html" verb="*" 
           type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" 
           resourceType="File" preCondition="integratedMode" />
    </handlers>
  </system.webServer>    
</configuration>

Performans nedenleriyle, projenizi yayımlarken bu ayarı kaldırın.

Tarayıcı Bağlantısı varsayılan olarak etkindir. Devre dışı bırakmanın birkaç yolu vardır:

  • Tarayıcı Bağlantısı açılan menüsünde Tarayıcı Bağlantısını Etkinleştir'in işaretini kaldırın.

    Tarayıcı Bağlantısı'nı Etkinleştir açılan menüsünde Tarayıcı Bağlantısını Etkinleştir'in görüntülendiği ve işaretinin kaldırılmış olduğu Visual Studio'nun ekran görüntüsü.

  • Web.config dosyasında, appSettings bölümünde "false" değerine sahip "vs:EnableBrowserLink" adlı bir anahtar ekleyin.

    <appSettings>
  <add key="vs:EnableBrowserLink" value="false"/>
</appSettings>

  • Web.config dosyasında hata ayıklamayı false olarak ayarlayın.

    <system.web>
  <compilation debug="false" targetFramework="4.5" />
</system.web>

Nasıl Çalışır?

Tarayıcı Bağlantısı, Visual Studio ile tarayıcı arasında bir iletişim kanalı oluşturmak için SignalR kullanır. Tarayıcı Bağlantısı etkinleştirildiğinde, Visual Studio birden çok istemcinin (tarayıcının) bağlanabileceği bir SignalR sunucusu gibi davranır. Tarayıcı Bağlantısı ayrıca ASP.NET ile bir HTTP modülü kaydeder. Bu modül, sunucudan gelen her sayfa isteğine özel <betik> başvuruları ekler. Tarayıcıda "Kaynağı görüntüle" seçeneğini belirleyerek betik referanslarını görebilirsiniz.

Tarayıcıdaki 'Kaynağı Görüntüle' penceresinin, h t t p modülü tarafından eklenen özel betik referanslarıyla ekran görüntüsü.

Kaynak dosyalarınız değiştirilmez. HTTP modülü betik başvurularını dinamik olarak enjekte eder.

Tarayıcı tarafı kodun tümü JavaScript olduğundan, SignalR'ın desteklediği tüm tarayıcılarda çalışır ve hiçbir tarayıcı eklentisine gerek kalmadan çalışır.

  • Last updated on