在 Visual Studio 2013 中使用瀏覽器連結

發行項
07/13/2023

瀏覽器連結是Visual Studio 2013中的新功能，可在開發環境與一或多個網頁瀏覽器之間建立通道。您可以使用瀏覽器連結一次在數個瀏覽器中重新整理 Web 應用程式，這適用于跨瀏覽器測試。

瀏覽器重新整理
檢視瀏覽器連結儀表板
啟用靜態 HTML 檔案的瀏覽器連結
停用瀏覽器連結
其運作方式為何？

瀏覽器重新整理

透過瀏覽器重新整理，您可以透過瀏覽器連結重新整理連線至 Visual Studio 的多個瀏覽器。

若要使用瀏覽器重新整理，請先使用任何專案範本建立 ASP.NET 應用程式。按 F5 或按一下工具列中的箭號圖示來偵錯應用程式：

Visual Studio 的螢幕擷取畫面，其中已醒目提示工具列中的箭號圖示，以說明應用程式偵錯程式。

您也可以使用下拉式清單來選取要偵錯的特定瀏覽器。

Visual Studio 的螢幕擷取畫面，其中已醒目提示工具列和下拉式功能表中的箭號圖示，其中顯示瀏覽器清單。

若要使用多個瀏覽器進行偵錯，請選取 [ 流覽方式]。在 [ 流覽方式] 對話方塊中，按住 CTRL 鍵以選取多個瀏覽器。按一下 [流覽 ] 以使用選取的瀏覽器進行偵錯。如果您從 Visual Studio 外部啟動瀏覽器並流覽至應用程式 URL，瀏覽器連結也適用。

[流覽方式] 對話方塊的螢幕擷取畫面，其中指示會選取一或多個和三個已醒目提示和選取的瀏覽器。

瀏覽器連結控制項位於具有圓形箭號圖示的下拉式清單中。箭號圖示是 [ 重新整理] 按鈕。

Visual Studio 的螢幕擷取畫面，其中以紅色框出 [重新整理] 按鈕。[重新整理] 按鈕是圓形箭號。

若要查看哪些瀏覽器已連接，請在偵錯時將滑鼠停留在 [ 重新整理] 按鈕上。連線的瀏覽器會顯示在工具提示視窗中。

Visual Studio 的螢幕擷取畫面，其中已醒目提示 [重新整理] 按鈕，表示滑鼠停留在按鈕上。工具提示會顯示已連線的瀏覽器。

若要重新整理連線的瀏覽器，請按一下 [ 重新整理] 按鈕或按 CTRL+ALT+ENTER。例如，下列螢幕擷取畫面顯示我使用 MVC 5 專案範本建立的 ASP.NET 專案。您可以在頂端的兩個瀏覽器中看到執行的應用程式。在底部，專案會在 Visual Studio 中開啟。

S P 點 Net 專案的螢幕擷取畫面，其中應用程式會在兩個瀏覽器中並存執行，並在 Visual Studio 中顯示專案。

在 Visual Studio 中，我變更 < 了首頁的 h1 > 標題：

Visual Studio 的螢幕擷取畫面，其中已顯示 S P 點 Net 專案，並醒目提示 H 1 標題。

當我按一下 [ 重新整理] 按鈕時，變更會出現在兩個瀏覽器視窗中：

S P 點 Net 專案的螢幕擷取畫面，其中變更會顯示在瀏覽器視窗並排顯示，而專案會顯示在 Visual Studio 下方。

注意事項

若要啟用 Browser Link，請在專案的 Web.config 檔案的編譯 > 專案中設定 <debug=true 。
應用程式必須在 localhost 上執行。
應用程式必須以 .NET 4.0 或更新版本為目標。

檢視瀏覽器連結儀表板

瀏覽器連結儀表板會顯示瀏覽器連結連線的相關資訊。若要檢視儀表板，請選取 [瀏覽器連結] 下拉式功能表， ([ 重新整理] 按鈕旁的小箭號) 。然後按一下 [瀏覽器連結儀表板]。

Visual Studio 的螢幕擷取畫面，其中已醒目提示 [重新整理] 按鈕，並醒目提示下拉式功能表中的 [瀏覽器連結儀表板]。

儀表板會列出每個瀏覽器流覽的已連線瀏覽器和 URL。

[瀏覽器連結儀表板] 的螢幕擷取畫面，其中包含已連線的瀏覽器，而您是每個瀏覽器已流覽的螢幕擷取畫面。

[ 必要條件] 區段會顯示為該專案啟用瀏覽器連結所需的任何步驟。例如，下列螢幕擷取畫面顯示Web.config檔案中「debug」設定為 false 的專案。

瀏覽器連結儀表板的螢幕擷取畫面，其中包含必要條件區段，指出專案必須啟用偵錯。

啟用靜態 HTML 檔案的瀏覽器連結

若要啟用靜態 HTML 檔案的瀏覽器連結，請將下列內容新增至您的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>

基於效能考慮，當您發佈專案時，請移除此設定。

停用瀏覽器連結

預設會啟用瀏覽器連結。有數種方式可以停用它：

在 [瀏覽器連結] 下拉式功能表中，取消核取 [ 啟用瀏覽器連結]。
在Web.config檔案中，新增名為「vs：EnableBrowserLink」的機碼，並在 appSettings 區段中新增值為「false」。
```
<appSettings>
  <add key="vs:EnableBrowserLink" value="false"/>
</appSettings>
```

在 Web.config 檔案中，將偵錯設定為 false。

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

其運作方式為何？

瀏覽器連結會使用 SignalR 建立 Visual Studio 與瀏覽器之間的通道。啟用瀏覽器連結時，Visual Studio 會作為 SignalR 伺服器，讓多個用戶端 (瀏覽器) 可以連線。瀏覽器連結也會向 ASP.NET 註冊 HTTP 模組。此模組會將特殊 < 腳本 > 參考插入伺服器的每個頁面要求中。您可以在瀏覽器中選取 [檢視來源] 來查看腳本參考。

在瀏覽器中檢視來源視窗的螢幕擷取畫面，其中顯示 h t t p 模組所插入的特殊腳本參考。

您的原始程式檔不會修改。 HTTP 模組會動態插入腳本參考。

由於瀏覽器端程式碼是所有 JavaScript，因此可在 SignalR 支援的所有瀏覽器上運作，而不需要任何瀏覽器外掛程式。

共用方式為