在 ASP.NET Web Forms 中使用 Page Inspector for Visual Studio 2012

作者：Tim Ammann

Page Inspector for Visual Studio 2012 是具有整合式瀏覽器的 Web 開發工具。 選取整合式瀏覽器中的任何專案，Page Inspector 會立即反白顯示元素的來源和 CSS。 您可以瀏覽應用程式中的任何頁面、快速尋找轉譯標記的來源，以及直接在 Visual Studio 環境中使用瀏覽器工具。

本教學課程說明如何啟用檢查模式，然後快速找出和編輯 Web 專案中的 CSS 規則和文字。 本教學課程使用 Web Form 應用程式專案，但您也可以針對網站專案和MVC應用程式使用 Page Inspector。

本教學課程包含下列各節：

先決條件

建立 Web 應用程式

使用 Page Inspector 檢視應用程式

啟用檢查模式

使用 Page Inspector 對標記進行變更

檢查模式和 HTML 視窗

預覽樣式視窗中的 CSS 變更

CSS 自動同步處理

使用 CSS 色彩選擇器

必要條件

• Visual Studio 2012 或 Visual Studio Express 2012 for Web。

注意

若要取得最新版本的 Page Inspector，請使用 Web Platform Installer 來安裝適用於 .NET 2.0 的 Azure SDK。

Page Inspector 會與 Microsoft Web Developer Tools 搭配使用。 最新版本為 1.3。 若要檢查您擁有的版本，請執行 Visual Studio，然後從 [說明] 功能表中選取 [關於 Microsoft Visual Studio]。

建立 Web 應用程式

首先，您將建立將搭配使用 Page Inspector的 Web 應用程式。 在 Visual Studio 中，選擇 [ 檔案>新增專案]。 在左側展開 [Visual C#]，選取 [Web]，然後選取 [ASP.NET Web Forms 應用程式]。

按一下 [確定]。

應用程式會在 [來源 ] 檢視中開啟。

現在您已經有一個應用程式可以使用，您可以使用 Page Inspector 來檢查和修改它。

使用 Page Inspector 檢視應用程式

接下來，您將使用 Page Inspector 來檢視應用程式。 在 [方案總管] 中，以滑鼠右鍵按兩下專案，然後選擇 [在 Page Inspector 中檢視]。

根據預設，Page Inspector 第一次啟動時，它會停駐為Visual Studio環境左側的窄視窗。 將它停駐在左側，並將其設定為您熟悉的寬度，或將其停駐在頂端、底端或右側的其中一個工具區域：

如果您將 Page Inspector 視窗取消停駐，您可以將它放在 Visual Studio 外部，或甚至是有第二個監視器。 不過，若要在 Page Inspector 和 Visual Studio 之間切換 ALT+TAB，當 Page Inspector 視窗取消停駐時，請移至 [工具>選項>環境>索引卷標] 和 [Windows]，然後在 [Tab 良好] 下清除稱為浮動工具視窗的複選框一律停留在主視窗頂端：

Page Inspector 視窗的頂端窗格會顯示瀏覽器視窗中的目前頁面。 底部窗格會顯示左側 HTML 標記中的頁面，右側有一些索引標籤可讓您檢查頁面的不同層面。 底部窗格類似於 Internet Explorer 中的 F12 開發人員工具 。 不過， (與開發人員工具不同，您可以在Visual Studio.) 內直接使用 Page Inspector

在本教學課程中，您將使用 [Page Inspector 瀏覽器] 窗格，以及 [HTML] 和 [樣式] 索引卷標，協助您快速瀏覽和變更應用程式。

啟用檢查模式

接下來，您將瞭解 Page Inspector 檢查模式的運作方式。 在 [Page Inspector] 視窗中，按兩下 [檢查] 按鈕。

若要查看作用中的檢查模式，請將滑鼠移至 Page Inspector 瀏覽器視窗內頁面的不同部分。 如您所做，滑鼠指標會變更為大型加號，且下方的 元素會反白顯示：

當您移動滑鼠指標時，請注意

• [來源] 檢視中的內容會變更，以顯示對應至頁面上所選元素的標記。 相關標記會反白顯示。 如果來源位於另一個檔案中，則會在 [來源] 檢視中開啟該檔案，並醒目提示相關的標記。

• Page Inspector HTML 索引標籤標中顯示的標記也會變更，以對應至頁面上選取的元素。 在 HTML 索引標籤中，會概述相關的標記。

• [ 樣式] 索引標籤會顯示與目前選取範圍相關的 CSS 規則。

使用 Page Inspector 對標記進行變更

現在，您將瞭解如何使用 Page Inspector 來尋找及變更位置可能不明顯之標記或文字。

將 Page Inspector 放在檢查模式中，然後捲動至首頁底部。

一旦您輸入頁尾區域，Page Inspector 會在其他索引標籤右側的暫存索引卷標中開啟Site.Master 版面設定檔案，並醒目提示您選取的主版頁面區段。 這會顯示 Page Inspector 如何尋找並顯示頁面上可能實際來自與您原本開啟檔案不同的檔案的內容。

在 [Page Inspector 瀏覽器] 視窗中，將滑鼠指標移至具有著作權聲明的行上方。

在 [Site.Master ] 頁面中，會反白顯示對應的行。

將一些文字新增至 Site.Master 檔案中的行尾。

<p>&複製; <%： DateTime.Now.Year %> - 我的 ASP.NET 應用程式岩石！</P>

現在，按 Ctrl+Alt+Enter，或按兩下 [更新列] 以查看 Page Inspector 瀏覽器視窗中的結果。

您可能已認為頁尾位於Default.aspx 頁面上，但它已變成在主版版面配置頁面中，Page Inspector 為您找到。

檢查模式和 HTML 視窗

接下來，您將快速查看 HTML 視窗，以及它如何為您對應元素。

將 Page Inspector 放在檢查模式中。

按兩下頁面頂端部分，其顯示「您在這裡的標誌」。 您會更詳細地檢查特定元素，因此當您移動滑鼠指標時，瀏覽器視窗中的顯示不會再變更。

現在，將滑鼠指標移至 HTML 視窗。 當您移動滑鼠指標時，Page Inspector 大綱 HTML 視窗中的專案，並反白顯示瀏覽器視窗中的對應元素。

如前所述，Page Inspector 在暫存索引標籤中<為您開啟 Site.Master 檔案。按兩下 [Site.Master] 索引標籤，並在標頭>區段中醒目提示對應的標記：

預覽樣式視窗中的 CSS 變更

接下來，您將瞭解如何使用 [Page Inspector 樣式] 視窗來預覽 CSS 的變更。

按兩下 [檢查] 按鈕，將 Page Inspector 放在檢查模式中。

在 Page Inspector 瀏覽器視窗中，將滑鼠指標移至 [首頁] 區段，直到 div.content-wrapper 卷標出現為止。

按兩下 div.content-wrapper 區段一次，然後將滑鼠指標移至 [ 樣式 ] 視窗。 在 .featured .content-wrapper 類別選取器下，清除並選取背景色彩屬性的複選框。

請注意，變更預覽會立即在瀏覽器視窗中 Page Inspector。

勾選取複選框，然後按兩下屬性值，並將變更為 red。 變更會立即顯示：

[ 樣式] 視窗可讓您在認可樣式表單本身的變更之前，輕鬆地測試及預覽 CSS 變更。

CSS 自動同步處理

注意

此功能需要 1.3 版 Page Inspector。

CSS 自動同步功能可讓您直接編輯 CSS 檔案，並立即在 Page Inspector 瀏覽器中查看變更。

按兩下 [檢查] 以將 Page Inspector 放在檢查模式中。

在 Page Inspector 瀏覽器中，將滑鼠指標移至 [首頁] 區段，直到 div.content-wrapper 卷標出現為止。 按一次即可選取此元素。

[ 樣式] 視窗會顯示這個專案的所有 CSS 規則。 向下卷動以尋找 .featured .content-wrapper 類別選取器。 按兩下 “.featured .content-wrapper”。 Page Inspector 會開啟定義此樣式的 CSS 檔案， (Site.css) ，並醒目提示對應的 CSS 樣式。

現在，將的值 background-color 變更為 “red”。 變更會立即出現在 Page Inspector 瀏覽器中。

使用 CSS 色彩選擇器

接下來，您將瞭解如何使用 Page Inspector，快速尋找和變更預設應用程式中醒目提示文字的 CSS。 在此範例中，您已決定您不喜歡藍色醒目提示，而且想要將其變更為另一個色彩。

按兩下 [ 檢查] 按鈕。

在 Page Inspector 瀏覽器視窗中，將滑鼠指標移至醒目提示的 「影片、教學課程和範例」文字上方，讓 CSS “mark” 卷標出現。

按下文字加以選取。 對應的 CSS 標記選取器會出現在 [ 樣式 ] 視窗底部。

按一下標記選取器。 這會開啟 Web 應用程式的 Site.css 檔案。 點選取.css器的對應 CSS：

選取並移除具有背景色彩屬性的線條。

您現在將使用新的 Visual Studio 2012 CSS 色彩選擇器，為 標記 背景色彩屬性選擇新的色彩。

使用 Visual Studio 2012 CSS 色彩選擇器

Visual Studio 2012 中的 CSS 編輯器具有色彩選擇器，可讓您輕鬆地選擇和插入色彩。 其具有簡單的色彩列和「快顯」選擇器，可提供更精細的控制。

色彩選擇器包含標準色彩調色盤、支援標準色彩名稱、哈希碼、RGBA、HSL 和 HSLA 色彩，並維護您在檔中最近使用的色彩清單。

在背景色彩屬性所在的行上，輸入 「bc」 ，然後按向下箭號一次。

當您在連字元分隔的屬性中輸入每個字的第一個字元，例如 “background-color” 時，IntelliSense 會篩選清單，只顯示符合的屬性：

現在輸入冒號。 當您這麼做時，會插入完整的背景色彩屬性名稱。 輸入 # 或 rgb (，且色彩選擇器列隨即出現：

若要查看色彩選擇器列的運作方式，請按兩下其色彩與滑鼠指標，或按向下鍵，然後使用向左鍵和向右鍵周遊色彩。 當您瀏覽色彩時，會預覽背景色彩屬性的對應值：

此時，您可以按 Enter 鍵選取值，然後選取分號 (;) 以完成 CSS 專案。 現在，請移至下一節，以便查看色彩選擇器快顯的運作方式。

使用色彩選擇器 Pop-Down

當色彩列沒有您要尋找的確切色彩時，您可以使用色彩選擇器快顯。

若要開啟它，請按兩下色彩列右端的雙箭號，或在鍵盤上按一次或兩次向下箭號。

按下右側垂直列中的色彩。 這會顯示主視窗中該色彩的漸層。 按 Enter 鍵直接從垂直線選擇色彩，或按兩下主視窗中的任何點，以選擇更高的精確度。

如果您的電腦畫面上有您想要使用的色彩， (它不需要位於Visual Studio使用者介面內) ，您可以使用右下方的眼球工具來擷取其值。

您也可以移動色彩選擇器底部的滑桿來變更色彩的不透明度。 這樣做會將色彩值變更為 RGBA 值，因為 RGBA 格式可以代表不透明度。

選擇色彩之後，請按 Enter 鍵，然後輸入分號以完成 Site.css 檔案中的背景色彩專案。

Page Inspector 更新列

Page Inspector 會立即偵測 Site.css 檔案的變更 (或應用程式中的任何檔案) ，並在更新列中顯示警示。

若要儲存所有檔案並重新整理 Page Inspector 瀏覽器，請按 Ctrl+Alt+Enter 或按兩下更新列。 醒目提示色彩中的變更會出現在瀏覽器中：

請注意，您可以直接從 Visual Studio 環境中重新整理 Page Inspector 瀏覽器。 使用 Page Inspector 而不是外部瀏覽器，可讓您在開發 Web 應用程式時留在編輯器中。

另請參閱

Page Inspector (Channel 9 影片簡介)

Page Inspector MSDN) (錯誤訊息