若要檢視英文版的文章,請選取 [原文] 核取方塊。您也可以將滑鼠指標移到文字上,即可在快顯視窗顯示英文原文。
譯文
原文
建議使用 Visual Studio 2017

Page Inspector (Visual Studio)

 

Page Inspector 是一套整合瀏覽器和瀏覽器工具的 Web 程式開發工具。 瀏覽器會直接在 Visual Studio IDE 內呈現網頁 (HTML、Web Form、ASP.NET MVC 或 Web Pages)。 IDE 中整合瀏覽器可讓您以平排方式查看呈現的輸出及其原始碼。 只要您在 Page Inspector 的整合式瀏覽器中使用 Page Inspector 的「檢查」功能選取任何項目,該項目的原始碼及其對應的階層式樣式表 (CSS) 就會反白顯示。 此功能可協助您尋找及修復 HTML 和 CSS 程式碼中難以察覺的錯誤。 Page Inspector 也有您可以直接在 Visual Studio 中使用的瀏覽器工具。

Page Inspector 的執行需求如下:

  • Visual Studio 2012.

  • .NET Framework 4.5。

  • 以 .NET Framework 4 (含) 以後版本為目標的 Web 應用程式。

  • 若要執行完整功能,則需要 Internet Explorer 9 (含) 以後版本 (Page Inspector 在 Visual Studio 中裝載的是最新版的 Internet Explorer)。

  • Internet Explorer 中必須啟用 JavaScript。 如需詳細資訊,請參閱如何在網頁瀏覽器中啟用 JavaScript

如需詳細資訊,請參閱 Page Inspector 錯誤訊息

若要

請執行

在 Page Inspector 中檢視專案或專案檔

以滑鼠右鍵按一下 [方案總管] 中的專案或檔案,然後從捷徑功能表選擇 [在 Page Inspector 中檢視]。

在 Page Inspector 中執行及檢視專案

在 [方案總管] 中選取專案。 從 Visual Studio 功能表中的下拉式瀏覽器清單選擇 [Page Inspector],然後按一下綠色箭頭即可執行專案。

將元素對應至其原始碼中的正確位置

在 Page Inspector 的工具窗格中,按一下 [檢查]。 將滑鼠指標移至 Page Inspector 瀏覽器中的項目上方, 對應的標記隨即在原始程式檔以及 [HTML] 和 [樣式] 窗格中反白顯示。

尋找 CSS 規則的原始碼

按一下 [樣式] 或 [追蹤樣式] 窗格中的 CSS 規則, 該規則隨即在來源樣式表原始程式檔中反白顯示。

儲存原始碼變更並重新整理 Page Inspector 瀏覽器

按 CTRL+ALT+ENTER 鍵,或是按一下 [更新列]。

將 Page Inspector 設定為偵錯用的預設瀏覽器

從 Visual Studio 功能表中的下拉式瀏覽器清單選擇 [瀏覽方式]。 在 [瀏覽方式] 對話方塊中選擇 [Page Inspector],然後選擇 [設定為預設值]。

將 Page Inspector 設定為偵錯用的其中一個瀏覽器

您可以選擇 Page Inspector 成為按下 F5 或 CTRL+F5 時,可同時啟動的其中一個瀏覽器。 如需詳細資訊,請參閱 ASP.NET 5 and Visual Studio 2015 中的<多瀏覽器支援>一節。

您可以使用 [檢查] 按鈕,輕易地將元素對應至其原始碼中的正確位置。

若要讓 Page Inspector 進入檢查模式,請按一下 Page Inspector 工具窗格中的 [檢查] 按鈕。 在檢查模式中,只要您將滑鼠指標移到所呈現頁面的任意處,就會反白顯示對應的來源標記或程式碼,而且對應的原始程式檔也會在 [方案總管] 中反白顯示。 相反地,當您選取來源標記時,Page Inspector 瀏覽器中就會自動反白顯示對應輸出。 如需詳細資訊,請參閱在 ASP.NET MVC 中使用 Page Inspector在 ASP.NET Web Form 中使用 Page Inspector

System_CAPS_note注意

[檢查] 按鈕的功能就如同切換鍵。 檢查模式作用期間,[檢查] 按鈕的周圍會圍繞著藍色細虛線。

Page Inspector 使用者介面底部面板中其餘的 UI 項目包含與 Internet Explorer 之 F12 工具類似的瀏覽器工具。 如需 Internet Explorer 之 F12 工具的詳細資訊,請參閱使用 F12 開發人員工具偵錯 HTML 和 CSS

[HTML] 窗格檢視會顯示目前頁面的樹狀檢視 (DOM 樹狀目錄) ,而且 Page Inspector 瀏覽器會在記憶體中顯示這個頁面。 您可以使用滑鼠或鍵盤直接巡覽此樹狀目錄、檢視屬性,以及對值進行測試性變更。 若要在 DOM 樹狀目錄中展開或摺疊項目的屬性,只要按一下每個父項目旁邊的小箭頭即可。

在檢查模式中,只要您將滑鼠指標移至 Page Inspector 瀏覽器中的頁面上方,選定項目的標記就會在 [HTML] 窗格和來源標記中反白顯示。

[HTML] 窗格可讓您對 DOM 項目屬性 (Attribute) 進行測試性變更,並立即在瀏覽器中查看反映變化。 只要按兩下 [HTML] 窗格中的任何屬性 (Property) 或屬性 (Attribute) 即可進行編輯。 若要加入屬性 (Attribute),請以滑鼠右鍵按一下項目,然後選擇 [加入屬性],或按一下 [屬性] 窗格。 這些變更不是永久變更,也不影響原始程式檔。 但是,由於選定的標記也會在原始程式檔中反白顯示,因此很容易就能找出原始碼的位置,然後編輯並儲存變更。

當您編輯原始程式檔時,Page Inspector 中的 [更新列] 會出現並提示您按 CTRL+ALT+ENTER (或按一下此列) 儲存變更以及重新整理 Page Inspector 瀏覽器中的頁面。

HTML 窗格中的捷徑功能表選項

以滑鼠右鍵按一下 [HTML] 窗格中的項目,即可存取下列捷徑功能表選項。

Menu item

作用

加入屬性

在標籤或項目中加入新屬性。

複製

將標籤或屬性複製到剪貼簿。

複製 InnerHTML

將項目的 InnerHTML 內容 (子文字、項目和屬性) 複製到剪貼簿。

複製 OuterHTML

將項目的 OuterHTML 內容 (子文字、項目和屬性) 複製到剪貼簿。

如需詳細資訊,請參閱在 ASP.NET MVC 中使用 Page Inspector在 ASP.NET Web Form 中使用 Page Inspector

[樣式] 窗格會顯示您在樹狀檢視中選取之項目的規則和樣式, 並且依照 CSS 規則階層架構分組,其中包含已繼承與覆寫的屬性 (Attribute)。 清單頂端的規則會優先套用至選定項目,而清單底部的規則是目前定義選定項目之樣式屬性 (Property) 的規則。

若要對 CSS 進行測試性變更,您可以修改 [樣式] 窗格中的 CSS 屬性,並立即在瀏覽器中查看反映變化。 按兩下屬性值即可進行編輯。 您可以透過清除和選取屬性旁邊的核取方塊,了解這麼做會對網頁呈現內容有何影響。 這些變更不是永久變更,也不影響原始程式檔。 如需詳細資訊,請參閱在 ASP.NET MVC 中使用 Page Inspector在 ASP.NET Web Form 中使用 Page Inspector 中的<在樣式視窗中預覽 CSS 變更>一節。

若要變更原始碼內容,請按一下 [樣式] 或 [追蹤樣式] 窗格中的 CSS 規則。 Page Inspector 隨即開啟規則定義所在的 .css 檔案並選取完整的規則內容。 當您編輯原始碼時,Page Inspector 中的 [更新列] 會出現並提示您按 CTRL+ALT+ENTER (或按一下此列) 儲存變更以及重新整理 Page Inspector 瀏覽器中的頁面。

樣式窗格中的捷徑功能表選項

以滑鼠右鍵按一下 [樣式] 窗格中的項目,即可存取下列捷徑功能表選項。

Menu item

作用

加入新規則

加入 CSS 規則。

加入新屬性

加入 CSS 屬性。

移除項目

移除選取的項目。

複製

複製選取的項目。

複製 CSS 規則

複製選取的 CSS 規則。

複製 CSS 屬性

複製選取的 CSS 屬性。

[追蹤樣式] 窗格顯示的資訊與 [樣式] 窗格相同,但是內容會根據屬性 (而非規則) 分組並依照字母順序排列。 由於您知道的通常是 CSS 屬性的名稱而非其父項目,因此可能會覺得 [追蹤樣式] 窗格較 [樣式] 窗格在疑難排解時更為好用。

[配置] 窗格會顯示選定項目的方塊模型。

若要查看項目的方塊模型,請按一下 [配置] 索引標籤,然後按一下 [檢查] 按鈕。 將滑鼠指標移至瀏覽器中的項目上方,或在 [HTML] 窗格中按一下以選取項目。 [配置] 窗格會顯示選定項目的正確大小其位移、邊界、與邊框距離以及框線粗細。

您可以使用 [配置] 窗格進行測試性變更。 若要預覽變更,請按兩下 [配置] 窗格中的像素值並進行編輯, 變更隨即反映在瀏覽器中。 這些變更不是永久變更,也不影響原始程式檔。

[屬性] 窗格會顯示目前選定項目的屬性。

您可以使用 [屬性] 窗格進行測試性變更。 按兩下屬性值即可進行編輯。 您可以使用 [加入屬性] 和 [移除屬性] 按鈕,暫時加入或移除屬性。 所做的變更會立即反映在 Page Inspector 瀏覽器下的 [HTML] 窗格內。 這些變更不是永久變更,也不影響原始程式檔。

Page Inspector 工具中的 [檔案] 窗格包含目前頁面所有組成原始程式檔的連結, 讓您得以一覽所有相關檔案,因此非常有用。 特別是您在處理部分檢視和範本,或者像是 Orchard 或 Umbraco 這類應用程式時,此功能更為實用。

若要在 Visual Studio 編輯器中開啟任一檔案,請按一下對應連結。

變更頁面原始碼時,Page Inspector 瀏覽器頂端會出現更新列。 [更新列] 會提示您按 CTRL+ALT+ENTER 或按一下該列以儲存變更並重新整理瀏覽器。

顯示: