Freigeben über

Verwenden von Browserlink in Visual Studio 2013

  • Artikel

Browserlink ist ein neues Feature in Visual Studio 2013, das einen Kommunikationskanal zwischen der Entwicklungsumgebung und einem oder mehreren Webbrowsern erstellt. Sie können Browserlink verwenden, um Ihre Webanwendung in mehreren Browsern gleichzeitig zu aktualisieren, was für browserübergreifende Tests nützlich ist.

Browseraktualisierung

Mit der Browseraktualisierung können Sie mehrere Browser aktualisieren, die mit Visual Studio über Browserlink verbunden sind.

Um die Browseraktualisierung zu verwenden, erstellen Sie zunächst eine ASP.NET-Anwendung mit einer der Projektvorlagen. Debuggen Sie die Anwendung, indem Sie F5 drücken oder auf das Pfeilsymbol in der Symbolleiste klicken:

Screenshot: Visual Studio mit hervorgehobenem Pfeilsymbol in der Symbolleiste, um den Prozess des Anwendungsdebugs zu veranschaulichen.

Sie können auch die Dropdownliste verwenden, um einen bestimmten Browser für das Debuggen auszuwählen.

Screenshot von Visual Studio mit hervorgehobenem Pfeilsymbol in der Symbolleiste und im Dropdownmenü mit Browserliste

Um mit mehreren Browsern zu debuggen, wählen Sie Durchsuchen mit aus. Halten Sie im Dialogfeld Durchsuchen mit die STRG-TASTE gedrückt, um mehrere Browser auszuwählen. Klicken Sie auf Durchsuchen , um mit den ausgewählten Browsern zu debuggen. Browserlink funktioniert auch, wenn Sie einen Browser außerhalb von Visual Studio starten und zur Anwendungs-URL navigieren.

Screenshot des Dialogfelds

Die Browserlink-Steuerelemente befinden sich in der Dropdownliste mit dem kreisförmigen Pfeilsymbol. Das Pfeilsymbol ist die Schaltfläche Aktualisieren .

Screenshot von Visual Studio mit roter Umrandung der Schaltfläche

Zeigen Sie beim Debuggen mit der Maus auf die Schaltfläche Aktualisieren , um festzustellen, welche Browser verbunden sind. Die verbundenen Browser werden in einem QuickInfo-Fenster angezeigt.

Screenshot von Visual Studio mit hervorgehobener Schaltfläche

Um die verbundenen Browser zu aktualisieren, klicken Sie auf die Schaltfläche Aktualisieren , oder drücken Sie STRG+ALT+EINGABETASTE. Der folgende Screenshot zeigt beispielsweise ein ASP.NET Projekt, das ich mit der MVC 5-Projektvorlage erstellt habe. Die Anwendung wird in zwei Browsern am oberen Rand ausgeführt. Unten ist das Projekt in Visual Studio geöffnet.

Screenshot eines S P dot Net-Projekts mit einer Anwendung, die in zwei Browsern parallel ausgeführt wird, und einem Projekt, das unten in Visual Studio angezeigt wird.

In Visual Studio habe ich die h1-Überschrift <> für die Startseite geändert:

Screenshot von Visual Studio mit hervorgehobenem S P dot Net-Projekt und hervorgehobener Überschrift

Wenn ich auf die Schaltfläche Aktualisieren geklickt habe, wurde die Änderung in beiden Browserfenstern angezeigt:

Screenshot: Projekt

Hinweise

  • Um Browserlink zu aktivieren, legen Sie im <Kompilierungselement> in der Web.config-Datei des Projekts festdebug=true.
  • Die Anwendung muss auf localhost ausgeführt werden.
  • Die Anwendung muss auf .NET 4.0 oder höher ausgerichtet sein.

Die Browserlink-Dashboard zeigt Informationen zu den Browserlinkverbindungen an. Um die Dashboard anzuzeigen, wählen Sie das Dropdownmenü Browserlink aus (der kleine Pfeil neben der Schaltfläche Aktualisieren). Klicken Sie dann auf Browserlinkdashboard.

Screenshot: Visual Studio mit hervorgehobener Schaltfläche

Die Dashboard listet die verbundenen Browser und die URL auf, zu der jeder Browser navigiert hat.

Screenshot: Browserlink-Dashboard mit verbundenen Browsern und Sie sind l, zu denen jeder Browser navigiert hat angezeigt.

Im Abschnitt Voraussetzungen werden alle Schritte veranschaulicht, die zum Aktivieren von Browserlink für dieses Projekt erforderlich sind. Der folgende Screenshot zeigt beispielsweise ein Projekt, bei dem "debuggen" in der Web.config-Datei auf false festgelegt ist.

Screenshot des Browserlinkdashboards mit dem Abschnitt Voraussetzungen, der angibt, dass das Debuggen für das Projekt aktiviert sein muss.

Um Browserlink für statische HTML-Dateien zu aktivieren, fügen Sie Ihrer Web.config-Datei Folgendes hinzu.

<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>

Entfernen Sie diese Einstellung aus Leistungsgründen, wenn Sie Ihr Projekt veröffentlichen.

Browserlink ist standardmäßig aktiviert. Es gibt mehrere Möglichkeiten, sie zu deaktivieren:

  • Deaktivieren Sie im Dropdownmenü Browserlink die Option Browserlink aktivieren.

    Screenshot von Visual Studio, wobei browserlink aktivieren im Dropdownmenü Browserlink angezeigt und deaktiviert ist.

  • Fügen Sie in der Web.config-Datei im Abschnitt appSettings einen Schlüssel mit dem Namen "vs:EnableBrowserLink" mit dem Wert "false" hinzu.

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

  • Legen Sie in der datei Web.config debug auf false fest.

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

Wie funktioniert es?

Browserlink verwendet SignalR , um einen Kommunikationskanal zwischen Visual Studio und dem Browser zu erstellen. Wenn Browserlink aktiviert ist, fungiert Visual Studio als SignalR-Server, mit dem mehrere Clients (Browser) eine Verbindung herstellen können. Browser Link registriert auch ein HTTP-Modul bei ASP.NET. Dieses Modul fügt spezielle <Skriptverweise> in jede Seitenanforderung vom Server ein. Sie können die Skriptverweise anzeigen, indem Sie im Browser "Quelle anzeigen" auswählen.

Screenshot: Quellfenster anzeigen im Browser mit speziellen Skriptverweise, die vom Modul h t t t p eingefügt wurden.

Ihre Quelldateien werden nicht geändert. Das HTTP-Modul fügt die Skriptverweise dynamisch ein.

Da der browserseitige Code aus JavaScript besteht, funktioniert er in allen Browsern, die Von SignalR unterstützt werden, ohne dass ein Browser-Plug-In erforderlich ist.