WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

Visual Studio 2022 のブラウザーリンク

by WebSurfer 2023年12月10日 18:38

Visual Studio 2022 で、ブラウザーリンクの機能を使わない場合は不要となる Visual Studio とブラウザ間の通信を行わないようにする方法を書きます。2023 年 12 月 10 日現在の最新版 17.8.3 の話で、更新プログラムが適用されると話が変わるかもしれませんのでご注意ください。

Visual Studio 2022 のブラウザーリンク

Visual Studio 2022 では、上の画像の赤枠で示した「ブラウザーリンクを有効にする」にはデフォルトでチェックは入っていません。しかし、チェックを入れなくてもブラウザーリンクの機能による Visual Studio とブラウザー間の通信が行われます。ブラウザーリンクは使わないのにそのための通信が行われるのは避けたい場合、通信を行わないようにするにはどうすればいいかという話です。

ブラウザーリンクというのは何かですが、Visual Studio 2013 で新たに搭載された機能で、Edge, Chrome, Forefox など複数のブラウザを同時に立ち上げて表示させたり、Visual Studio 上でのコードの修正を複数のブラウザに同時に反映させたりする機能だそうです。詳しくは以下のMicrosoft のドキュメントを見てください。

「ブラウザーリンクを有効にする」にチェックが入ってない状態でも ASP.NET が生成する html ソースの body 要素の最後に以下のようなブラウザーリンクのためのコードが追加されます。(その下の script タグの aspnetcore-browser-refresh.js はホットリロード機能を実現するために使うものらしいです)

<!-- Visual Studio Browser Link -->
<script type="text/javascript" 
  src="/_vs/browserLink" 
  async="async" 
  id="__browserLink_initializationData" 
  data-requestId="14aa4d281859488cbb19bdfef314a877" 
  data-requestMappingFromServer="false" 
  data-connectUrl="http://localhost:57421/8a979671883c4acf85fb8bd2fd42853e/browserLink">
</script>
<!-- End Browser Link -->
<script src="/_framework/aspnetcore-browser-refresh.js">
</script>

Visual Studio からアプリを実行すると、上のスクリプトが動いて Visual Studio とブラウザが自動的に通信を行います。アプリを実行して Fiddler で要求・応答をキャプチャすると、その中には上のスクリプトによる通信が含まれます。下の画像を見てください。

Fiddler で要求・応答をキャプチャ

画像の #13, #16, #18 が script 要素の data-connectUrl 属性に設定された localhost:57421 との通信です。#23 の localhost:44320 は、応答が HTTP 101 Switching Protocols となっており、応答ヘッダに Upgrade: websocket が含まれているところを見ると、やはりブラウザーリンクの関係のようです (ブラウザーリンクは通信に SignalR を使います)。

Visual Studio を使っての開発中であれば、ブラウザーリンクの機能を使う使わないに関わらず、デフォルトの設定のままにしておいて不都合はないかもしれません。しかし、使わないのに Visual Studio とブラウザー間のやり取りがあるのは煩わしいという場合があると思います。

その余計なやり取りをなくすにはどうしたらいいかですが、ググって調べてみると How to disable Browser Link in ASP.NET Core (.NET 6, VS 2022) という記事が見つかりました。Visual Studio の[ツール(T)]⇒[オプション(O)...]でオプション画面を開いてホットリロード関係の設定を変更する必要があるとのことです。

設定画面を開いてみると、デフォルトでは以下のように「CSS ホットリロード」が「有効」に設定されています。

デフォルトは「有効」

これを無効に変更すると、ASP.NET が生成する html ソースにはブラウザーリンクのため script 要素は含まれなくなり localhost:57421 との通信は行われなくなくなります。上の Fiddler の画像の #48 以降のやり取りがその結果です。

「CSS ホットリロード」無効

ただし、ここまででは #51 に示されるように依然として localhost:44320 との通信が行われています。また、html にはホットリロード用の script タグは残ったままになります。

localhost:44320 との通信およびホットリロード用の script タグも無くしたい場合は、「自動ビルドと更新のオプション」も「なし」に設定し、

「自動ビルドと更新のオプション」設定

さらに、デバッグ > .NET/C++ ホットリロードの設定画面で以下の赤枠の 2 項目のチェックを外します。

ホットリロードの設定

詳しいことは分かりませんが、ブラウザーリンクとホットリロードとは関係があるようで、上のようなホットリロードの設定がブラウザーリンクに影響しているようです。

Tags: , ,

DevelopmentTools

ブラウザーリンク

by WebSurfer 2017年2月25日 15:44

先日買った Windows 10 Pro 64-bit のノート PC に OS が Vista の旧マシンでは使えなかった Visual Studio 2015 Communuty をインストールして使い始めました。

手始めに、テンプレートを使ってインターネット上でフォーム認証を使う Web サイトプロジェクトを作って、Fiddler で要求 / 応答をキャプチャしてみると、以下の画像のように localhost との正体不明な通信が行われています。(驚)

Fiddler によるキャプチャ

(ちなみに、vortex.data.microsoft.com, urs.smartscreen.microsoft.com の正体は分かっています。Tunnel to とは Fiddler が HTTP CONNECT 要求を受けてブラウザとサーバー間で直接通信するようにトンネルを開けたということだそうです)

一体これは何なんだと驚いて、URL にある browserLink をキーワードにググって調べてみると、MSDN Blog の記事に「クロスブラウザのテストに Visual Studio 2013 のブラウザーリンクをどうぞ」というのが見つかりました。

ブラウザーリンクというのは、Visual Studio 2013 から搭載された新機能で、IE, Forefox, Chrome などの複数のブラウザを同時に立ち上げて表示させたり、Visual Studio 上でのコードの修正を複数のブラウザに同時に反映させたりする機能だそうです。

そのために、Visual Studio が HTML ソースにスクリプトを追加し、そのスクリプトによって Visual Studio と各ブラウザが通信を行っているそうです。その結果が、上の画像にある localhost との正体不明な通信だったようです。

MSDN Blog の記事にも書いてありますが、ブラウザーリンクは Visual Studio の設定で無効にできます。(2023/12/25 追記: Visual Studio 2022 ではデフォルトで[ブラウザーリンクを有効にする]のチェックは外れていますが、それでもブラウザーリンクによる Visual Studio とブラウザ間の通信が行われます。それを行わないようにする方法は別の記事「Visual Studio 2022 のブラウザーリンク」に書きましたので見てください)

具体的には、上の画像の ▼ 印をクリックすると表示されるドロップダウンメニューで[Browser link を有効にする]のチェックを外します。

早速チェックを外して試してみると、HTML ソースへのスクリプトの追加はなくなり、localhost との正体不明な通信も行われなくなったのが確認できました。

Visual Studio 2010 から 2015、ASP.NET 4 から 4.5 とそれほど長くはない間に、ブラウザーリンク以外にも、いろいろな進化があったようです。

その進化に完全に取り残されていると感じる今日この頃です。(汗)

Tags:

DevelopmentTools

About this blog

2010年5月にこのブログを立ち上げました。主に ASP.NET Web アプリ関係の記事です。

Calendar

<<  2024年4月  >>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

View posts in large calendar