Freigeben über

Verwenden des Browserlinks in Visual Studio 2013

Browserlink ist ein neues Feature in Visual Studio 2013, das einen Kommunikationskanal zwischen der Entwicklungsumgebung und einem oder mehreren Webbrowsern erstellt. Sie können den 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 über den Browserlink mit Visual Studio 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 von Visual Studio mit hervorgehobenem Pfeilsymbol auf der Symbolleiste zum Veranschaulichen des Anwendungsdebuggingprozesses.

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

Screenshot von Visual Studio mit hervorgehobener Pfeilsymbolleiste und Dropdownmenü, in dem die Browserliste angezeigt wird.

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. Der Browserlink funktioniert auch, wenn Sie einen Browser von außerhalb von Visual Studio starten und zur Anwendungs-URL navigieren.

Screenshot des Dialogfelds

Die Browserverknüpfungssteuerelemente befinden sich im Dropdownmenü mit dem Kreispfeilsymbol. Das Pfeilsymbol ist die Schaltfläche " Aktualisieren ".

Screenshot von Visual Studio mit rot umrissener Schaltfläche

Um zu sehen, welche Browser verbunden sind, zeigen Sie beim Debuggen mit der Maus auf die Schaltfläche "Aktualisieren ". Die verbundenen Browser werden in einem Tooltip-Fenster angezeigt.

Screenshot von Visual Studio mit hervorgehobener Schaltfläche 'Aktualisieren', die das Überfahren mit der Maus anzeigt. Eine QuickInfo zeigt verbundene Browser an.

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. Sie können die Anwendung sehen, die in zwei Browsern oben ausgeführt wird. Unten ist das Projekt in Visual Studio geöffnet.

Screenshot eines ASP.NET-Projekts, bei dem die Anwendung in zwei nebeneinander angeordneten Browsern ausgeführt wird und das Projekt unten in Visual Studio angezeigt wird.

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

Screenshot von Visual Studio, mit angezeigtem A S P dot Net-Projekt und hervorgehobener H1-Überschrift.

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

Screenshot eines S P Dot Net-Projekts mit Änderungen, die in Browserfenstern nebeneinander angezeigt werden, und Projekt, das unten in Visual Studio angezeigt wird.

Hinweise

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

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

Screenshot von Visual Studio mit hervorgehobener Schaltfläche

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

Screenshot des Browserlink-Dashboards mit verbundenen Browsern und der URL, zu der jeder Browser navigiert hat, angezeigt.

Im Abschnitt "Voraussetzungen" sind alle Schritte aufgeführt, die zum Aktivieren des Browserlinks für dieses Projekt erforderlich sind. Der folgende Screenshot zeigt z. B. ein Projekt, bei dem "debug" in der Web.config Datei auf "false" festgelegt ist.

Screenshot des Browserlinkdashboards mit Abschnitt

Um den 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.

Browserverknüpfung ist standardmäßig aktiviert. Es gibt mehrere Möglichkeiten zum Deaktivieren:

  • Deaktivieren Sie im Dropdownmenü "Browserlink" das Kontrollkästchen "Aktiviere Browserlink".

    Screenshot von Visual Studio, in dem

  • Fügen Sie in der datei Web.config einen Schlüssel namens "vs:EnableBrowserLink" mit dem Wert "false" im Abschnitt "appSettings" 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 der Browserlink aktiviert ist, fungiert Visual Studio als SignalR-Server, mit dem mehrere Clients (Browser) eine Verbindung herstellen können. Browserlink registriert auch ein HTTP-Modul mit 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 des Quellfensters im Browser, in dem spezielle Skriptverweise durch das h t t p-Modul eingefügt werden.

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

Da der browserseitige Code alle JavaScript-Code ist, funktioniert er auf allen Browsern, die SignalR unterstützt, ohne dass ein Browser-Plug-In erforderlich ist.

  • Last updated on