共用方式為


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

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

瀏覽器重新整理

透過瀏覽器重新整理,您可以透過瀏覽器連結重新整理連線至 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 檔案的瀏覽器連結,請將下列內容新增至您的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 檔案中,將偵錯設定為 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 支援的所有瀏覽器上運作,而不需要任何瀏覽器外掛程式。