Visual Studio 2013でのブラウザー リンクの使用

  • [アーティクル]

Browser Link は、開発環境と 1 つ以上の Web ブラウザーとの間に通信チャネルを作成する、Visual Studio 2013の新機能です。 ブラウザー リンクを使用すると、複数のブラウザーで Web アプリケーションを一度に更新できます。これは、ブラウザー間テストに役立ちます。

ブラウザーの更新

ブラウザーの更新を使用すると、ブラウザー リンクを使用して Visual Studio に接続されている複数のブラウザーを更新できます。

ブラウザー更新を使用するには、最初にプロジェクト テンプレートのいずれかを使用して、ASP.NET アプリケーションを作成します。 F5 キーを押すか、ツール バーの矢印アイコンをクリックして、アプリケーションをデバッグします。

Visual Studio のスクリーンショット。ツール バーで矢印アイコンが強調表示され、アプリケーションのデバッグ プロセスが示されています。

ドロップダウンを使用して、デバッグ用の特定のブラウザーを選択することもできます。

Visual Studio のスクリーンショット。ツール バーの矢印アイコンが強調表示され、ドロップダウン メニューにブラウザーの一覧が表示されています。

複数のブラウザーを使用してデバッグするには、[参照対象] を選択 します。 [ 参照対象 ] ダイアログで、Ctrl キーを押しながら複数のブラウザーを選択します。 [ 参照 ] をクリックして、選択したブラウザーでデバッグします。 ブラウザー リンクは、Visual Studio の外部からブラウザーを起動し、アプリケーションの URL に移動した場合にも機能します。

命令で 1 つ以上のブラウザーを選択し、3 つのブラウザーが強調表示されて選択されている [Browse With]\(参照あり\) ダイアログのスクリーンショット。

ブラウザー リンク コントロールは、ドロップダウンに円形の矢印アイコンが表示されます。 矢印アイコンは [ 更新 ] ボタンです。

Visual Studio のスクリーンショット。赤で囲まれた [更新] ボタンが表示されています。[更新] ボタンは円形の矢印です。

接続されているブラウザーを確認するには、デバッグ中に [ 更新 ] ボタンの上にマウス ポインターを置きます。 接続されたブラウザーが [ツールヒント] ウィンドウに表示されます。

[更新] ボタンが強調表示され、マウスがボタンの上に置かれた状態を示す Visual Studio のスクリーンショット。ツールヒントには、接続されているブラウザーが表示されます。

接続されているブラウザーを更新するには、[ 更新 ] ボタンをクリックするか、Ctrl + Alt + Enter キーを押します。 たとえば、次のスクリーンショットは、MVC 5 プロジェクト テンプレートを使用して作成した ASP.NET プロジェクトを示しています。 上部にある 2 つのブラウザーで実行されているアプリケーションを確認できます。 下部にあるプロジェクトは Visual Studio で開いています。

S P ドット Net プロジェクトのスクリーンショット。アプリケーションは、Visual Studio で次に示す 2 つのブラウザー(サイド バイ サイド、プロジェクト)で実行されています。

Visual Studio で、ホーム ページの <h1> 見出しを変更しました。

Visual Studio のスクリーンショット。A S P dot Net プロジェクトが表示され、H 1 見出しが強調表示されています。

[ 更新 ] ボタンをクリックすると、両方のブラウザー ウィンドウに変更が表示されました。

ブラウザー ウィンドウに変更が横並びで表示され、Visual Studio の下にプロジェクトが表示されている S P ドット Net プロジェクトのスクリーンショット。

メモ

  • Browser Link を有効にするには、プロジェクトの <Web.config ファイルのコンパイル>要素に を設定debug=trueします。
  • アプリケーションは localhost で実行されている必要があります。
  • アプリケーションは .NET 4.0 以降をターゲットにする必要があります。

ブラウザー リンク ダッシュボードには、ブラウザー リンク接続に関する情報が表示されます。 ダッシュボードを表示するには、[ブラウザー リンク] ドロップダウン メニュー ([ 更新 ] ボタンの横にある小さな矢印) を選択します。 次に、[ ブラウザー リンク ダッシュボード] をクリックします。

Visual Studio のスクリーンショット。[更新] ボタンが強調表示され、ドロップダウン メニューで [ブラウザー リンク ダッシュボード] が強調表示されています。

ダッシュボードには、接続されているブラウザーと、各ブラウザーが移動した URL が一覧表示されます。

ブラウザー リンク ダッシュボードのスクリーンショット。接続されたブラウザーがあり、各ブラウザーが移動した l が表示されています。

[ 前提条件] セクションには、そのプロジェクトのブラウザー リンクを有効にするために必要な手順が表示されます。 たとえば、次のスクリーンショットは、Web.config ファイルで "debug" が false に設定されているプロジェクトを示しています。

[Browser Link Dashboard]\(ブラウザー リンク ダッシュボード\) のスクリーンショット。[前提条件] セクションで、プロジェクトに対してデバッグを有効にする必要があります。

静的 HTML ファイルに対して Browser Link を有効にするには、Web.config ファイルに以下を追加します。

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

パフォーマンス上の理由から、プロジェクトを発行するときにこの設定を削除します。

ブラウザー リンクは既定で有効になっています。 無効にする方法はいくつかあります。

  • [ブラウザー リンク] ドロップダウン メニューで、[ ブラウザー リンクを有効にする] をオフにします。

    Visual Studio のスクリーンショット。[ブラウザー リンクの有効化] が表示され、[ブラウザー リンク] ドロップダウン メニューでオフになっています。

  • Web.config ファイルで、"vs:EnableBrowserLink" という名前のキーを appSettings セクションの値 "false" と共に追加します。

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

  • Web.config ファイルで、debug を false に設定します。

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

どのように動作しますか?

ブラウザー リンクは SignalR を使用して、Visual Studio とブラウザーの間に通信チャネルを作成します。 ブラウザー リンクが有効になっている場合、Visual Studio は、複数のクライアント (ブラウザー) が接続できる SignalR サーバーとして機能します。 ブラウザー リンクでは、HTTP モジュールも ASP.NET に登録されます。 このモジュールでは、サーバーからのすべてのページ要求に特別な <スクリプト> 参照を挿入します。 ブラウザーで [ソースの表示] を選択すると、スクリプト参照を確認できます。

ブラウザーの [ソースの表示] ウィンドウのスクリーンショット。h t t p モジュールによって挿入された特殊なスクリプト参照が表示されています。

ソース ファイルは変更されません。 HTTP モジュールは、スクリプト参照を動的に挿入します。

ブラウザー側のコードはすべて JavaScript であるため、 SignalR がサポートするすべてのブラウザーで動作し、ブラウザー プラグインは必要ありません。