WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

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

by WebSurfer 10. December 2023 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

About this blog

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

Calendar

<<  May 2024  >>
MoTuWeThFrSaSu
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

View posts in large calendar