在 Visual Studio 2012 中使用 Page Inspector

發行項
07/13/2023

在此實際操作實驗室中，您將探索新的工具來尋找並修正 Visual Studio 中的網頁問題 - Page Inspector。

Page Inspector是新的工具，可將瀏覽器診斷工具帶入 Visual Studio，並在瀏覽器、ASP.NET 和原始程式碼之間提供整合式體驗。它會直接在 Visual Studio IDE 內轉譯網頁 (HTML、Web Form、ASP.NET MVC 或) 網頁，並讓您檢查原始程式碼和產生的輸出。 Page Inspector可讓您輕鬆地分解網站、快速從頭開始建置頁面，以及快速診斷問題。

現今，我們有一些 Web 架構，可及時建立彈性且可調整的網站，例如 ASP.NET MVC 和 WebForms。另一方面，因為 IDE 不支援以範本為基礎的頁面和動態內容中的設計工具檢視，所以很難在頁面上發現問題。因此，這些網站必須在瀏覽器中開啟，才能查看其向使用者顯示的方式。

Web 開發人員會使用外部工具來尋找定期在瀏覽器中執行的問題。然後，他們會返回 IDE 並開始修正。在 IDE 之間進行這項反復活動，瀏覽器和分析工具可能會效率不佳，有時每次您想要重現問題時，都需要全新的部署和快取清除。

Page Inspector藉由使用一組結合的功能，在用戶端 (瀏覽器工具) 和伺服器 (ASP.NET 和原始程式碼) 之間，橋接 Web 開發之間的差距。

使用 Page Inspector，您可以看到原始程式檔中的哪些元素 (包括伺服器端程式碼) 產生要呈現在瀏覽器中的 HTML 標籤。 Page Inspector也可讓您修改 CSS 屬性和 DOM 元素屬性，以查看在瀏覽器中立即反映的變更。

此實際操作實驗室將逐步引導您完成Page Inspector功能，並示範如何使用這些功能來修正 Web 應用程式中的問題。 此實驗室包含兩個使用類似流程但以不同技術為目標的練習。如果您是 ASP.NET MVC 開發人員，請遵循練習一;如果您是 WebForms 開發人員，請遵循練習 2.

此實驗室會逐步引導您完成先前所描述的增強功能和新功能，方法是將次要變更套用至 Source 資料夾中提供的範例 Web 應用程式。

目標

在此實際操作實驗室中，您將瞭解如何：

使用 Page Inspector 分解網站
使用 Page Inspector 檢查和預覽 CSS 樣式變更
使用 Page Inspector 偵測並修正網頁中的問題

必要條件

您必須有下列專案才能完成此實驗室：

Microsoft Visual Studio Express 2012 for Web或更上層 (請參閱附錄 A，以取得如何安裝) 的指示。
Internet Explorer 9 或更高版本

Exercises

此實際操作實驗室包含下列練習：

練習 1：在 ASP.NET MVC 專案中使用Page Inspector
練習 2：在 WebForms 專案中使用Page Inspector

注意

每個練習都會伴隨一個起始解決方案，其位於練習的 Begin 資料夾中，可讓您個別遵循每個練習。在練習的原始程式碼內，您也會找到包含 Visual Studio 解決方案的 End 資料夾，其中包含完成對應練習中步驟所產生的程式碼。如果您需要額外的協助，請透過此實際操作實驗室，使用這些解決方案作為指引。

完成此實驗室的估計時間： 30 分鐘。

練習 1：在 ASP.NET MVC 專案中使用Page Inspector

在此練習中，您將瞭解如何使用Page Inspector預覽和偵錯ASP.NET MVC 4解決方案。首先，您會在工具周圍執行簡短的距離，以瞭解有助於 Web 偵錯程式的功能。然後，您將在包含樣式問題的網頁中工作。您將瞭解如何使用Page Inspector來尋找產生問題的原始程式碼並加以修正。

工作 1 - 探索Page Inspector

在這項工作中，您將瞭解如何在顯示相片庫的 ASP.NET MVC 4 專案內容中使用Page Inspector。

開啟位於 Source/Ex1-MVC4/Begin/資料夾的 Begin方案。
1. 您必須先下載一些遺漏的 NuGet 套件，才能繼續。若要這樣做，請按一下 [專案] 功能表，然後選取 [ 管理 NuGet 套件]。
2. 在 [ 管理 NuGet 套件] 對話方塊中，按一下 [ 還原 ] 以下載遺漏的套件。
3. 最後，按一下 [建 | 置建置方案] 來建置方案。
  
  注意
  
  使用 NuGet 的其中一個優點是，您不需要寄送專案中的所有程式庫，以減少專案大小。使用 NuGet Power Tools，藉由在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。這就是您從此實驗室開啟現有解決方案之後，必須執行這些步驟的原因。
在方案總管中，找出/Views/Home專案資料夾下的Index.cshtml檢視，以滑鼠右鍵按一下它，然後選取[Page Inspector 中的 [檢視]。

在 Page Inspector 中選取要預覽的檔案
Page Inspector視窗會顯示對應至您所選取來源檢視的/Home/Index URL。

與 Page Inspector 的第一個連絡人

Page Inspector工具已整合到 Visual Studio 環境中。偵測器包含內嵌瀏覽器，以及功能強大的 HTML 分析工具。請注意，您不需要執行解決方案，即可查看頁面的外觀。

注意

當Page Inspector瀏覽器的寬度小於開啟頁面的寬度時，您將不會正確看到頁面。如果發生這種情況，請調整Page Inspector的寬度。
按一下 Page Inspector 中的 [檔案] 索引標籤。

您會看到所有組成 [索引] 頁面的原始程式檔。這項功能有助於一目了然地識別所有元素，特別是當您使用部分檢視和範本時。請注意，如果您按一下連結，您也可以開啟每個檔案。

[檔案] 索引標籤
按一下位於索引標籤左側的 [切換檢查模式 ] 按鈕。

此工具可讓您選取頁面的任何元素，並查看其 HTML 和 Razor 程式碼。

切換檢查模式按鈕
在Page Inspector瀏覽器中，將滑鼠指標移至頁面元素上方。當您將滑鼠指標移至轉譯頁面的任何部分時，元素類型會顯示，並在 Visual Studio 編輯器中反白顯示對應的來源標記或程式碼。

執行中的檢查模式

注意

請勿將Page Inspector視窗最大化，否則您將無法看到顯示原始程式碼的預覽索引標籤。如果您在最大化時按一下Page Inspector中的專案，則選取範圍的原始程式碼隨即出現，但會隱藏Page Inspector視窗。

如果您注意 Index.cshtml 檔案，您會發現產生所選元素的原始程式碼部分會反白顯示。這項功能有助於編輯長原始程式檔，提供直接且快速的方式來存取程式碼。

檢查項目
按一下 [切換檢查模式] 按鈕 (選取 [HTML] 索引標籤) 停用游標。
選取[HTML]索引標籤，以顯示在Page Inspector瀏覽器中呈現的 HTML 程式碼。
在 HTML 標籤中，找出具有 Koala 連結的清單專案，然後加以選取。

請注意，當您選取程式碼時，對應的輸出會自動在瀏覽器中反白顯示。這項功能有助於瞭解 HTML 區塊在頁面上的呈現方式。

在頁面中選取 HTML 元素
按一下 [ 切換檢查模式 ] 按鈕以啟用 檢查模式 ，然後按一下導覽列。在 HTML 程式碼右側的 [樣式] 窗格中，您會看到套用至所選元素的 CSS 樣式清單。

注意

由於標頭是網站配置的一部分，Page Inspector也會開啟 _Layout.cshtml 檔案，並醒目提示受影響的程式碼區段。

探索所選項目的樣式和原始程式檔
啟用切換檢查指標後，將滑鼠指標移至藍色精選列下方，然後按一下半圓形。

選取專案
在 [樣式] 窗格中，找出.main-content群組底下的背景影像專案。 取消核取背景影像，並查看會發生什麼事。您會注意到瀏覽器會立即反映變更，並隱藏圓形。

注意

您在 [Page Inspector樣式] 索引標籤上套用的變更不會影響原始樣式表單。您可以取消核取樣式或視需要變更其值多次，但在重新整理頁面之後會還原這些樣式。

啟用和停用 CSS 樣式
現在，使用檢查模式按一下標頭上的「您的標誌」文字。
在 [樣式]索引標籤中，找出.site-title群組底下的字型大小CSS 屬性。按兩下屬性值，並以 3 em取代 2.3 em 值，然後按 ENTER鍵。請注意，標題看起來更大。

變更Page Inspector中的 CSS 值
按一下 [追蹤樣式] 索引標籤，位於Page Inspector的右窗格中。這是一種替代方式，可查看套用至選取範圍的所有樣式，並依屬性名稱排序。

選取專案的 CSS 樣式追蹤
Page Inspector的另一個功能是 [版面配置] 窗格。使用檢查模式，選取導覽列，然後按一下右窗格中的 [ 版面配置 ] 索引標籤。您會看到所選取專案的確切大小，以及其位移、邊界、邊框間距和框線大小。請注意，您也可以修改此檢視中的值。

Page Inspector 中的元素配置

工作 2 - 尋找並修正相片庫中的樣式問題

如何診斷舊版 Visual Studio 的網頁問題？您可能熟悉在 Visual Studio IDE 外部執行的 Web 偵錯工具，例如 Internet Explorer 開發人員工具或 Firebug。瀏覽器只會瞭解 HTML、腳本和樣式，而基礎架構會產生將轉譯的 HTML。基於這個理由，您通常需要部署整個網站，以查看網頁的外觀。

當您想要偵測並修正網站中的問題時，您可能已遵循下列步驟：

從 Visual Studio 執行方案，或在網頁伺服器上部署頁面。
在瀏覽器中，開啟您使用的開發人員工具，或直接開啟原始程式碼和樣式，並嘗試符合問題。若要尋找涉及的檔案，您可以使用樣式類別名稱的「搜尋」或「在檔案中搜尋」功能。
偵測到錯誤之後，請停止網頁瀏覽器和伺服器。
清除瀏覽器快取。
返回 Visual Studio 以套用修正。重複所有步驟以進行測試。

由於 ASP.NET MVC 4 中沒有實際的 WYSIWYG，因此在執行或部署 Web 應用程式之後，大部分的樣式問題會在稍後階段偵測到。現在，使用 Page Inspector，您可以預覽任何頁面，而不需要執行解決方案。

在這項工作中，您將使用頁面偵測器，並修正相片庫應用程式的一些問題。

使用 Page Inspector，找出標頭左側的[註冊] 和 [登入] 連結。

請注意，連結不會顯示在右邊的預期位置，而且它們會顯示為項目符號清單。您現在會將連結靠右對齊，並據以重新設定連結。

尋找註冊和登入連結
選取 [切換檢查模式] 後，按一下 [關閉]，但不開啟 [註冊] 連結以開啟其程式碼。

請注意，連結的原始程式碼位於 _LoginPartial.cshtml 檔案中，而不是 Index.cshtml 或 _Layout.cshtml，這是您可能第一次查看的位置。您已直接放在正確的原始程式檔中。
在 [樣式]索引標籤中，找出並按一下< 區段 > #login專案，這是這些連結的 HTML 容器。

請注意， 按一下之後，#login 樣式會自動位於 Site.css 中。此外，程式碼現在會反白顯示。

選取 CSS 樣式
移除開頭和結尾字元，並儲存Site.css檔案，以取消批註醒目提示程式碼中的文字對齊屬性。

Page Inspector知道組成目前頁面的所有不同檔案，而且可以偵測這些檔案變更的時機。每當瀏覽器中的目前頁面未與來源檔案同步時，就會提醒您。
在Page Inspector瀏覽器中，按一下網址列下方的列以重載頁面。

重載頁面

連結現在位於右側，但仍看起來像專案符號清單。現在，您將移除專案符號，並水準對齊連結。

更新的頁面
使用檢查模式，選取包含「註冊」和「登入」連結的任何< li >專案。然後，按一下專案< #login區段 >來存取Styles.css程式碼。

尋找樣式
在 Style.css中，取消批註 li 專案 #login 的程式碼。您新增的樣式將會隱藏專案符號，並水準顯示專案。

螢幕擷取畫面。

重新設定登入連結
儲存 Style.css 檔案，然後在位址下方的列中按一下一次，以重載頁面。請注意，連結正確出現。

對齊右側的連結
最後，您將變更標頭標題。使用檢查模式按一下 此處的標誌 文字，並取得產生它的原始程式碼。
現在您位於 _Layout.cshtml中，請將 'your logo here' 文字取代為 'Photo Gallery'。儲存並更新Page Inspector瀏覽器。

指派新標題

已更新相片庫頁面
最後，選取 PhotoGallery 專案，然後按 F5 來執行應用程式。查看所有變更如預期般運作。

練習 2：在 WebForms 專案中使用Page Inspector

在此練習中，您將瞭解如何使用 Page Inspector 預覽及偵錯 WebForms 解決方案。您必須先對工具執行簡短的距離，以瞭解可協助 Web 偵錯程式的Page Inspector功能。然後，您將在包含樣式問題的網頁中工作。您將瞭解如何使用Page Inspector來尋找產生問題的原始程式碼並加以修正。

工作 1 - 探索Page Inspector

在這項工作中，您將瞭解如何在顯示相片庫的 WebForms 專案內容中使用Page Inspector功能。

開啟位於 Source/Ex2-WebForms/Begin/資料夾的 Begin方案。
1. 您必須先下載一些遺漏的 NuGet 套件，才能繼續。若要這樣做，請按一下 [專案] 功能表，然後選取 [ 管理 NuGet 套件]。
2. 在 [ 管理 NuGet 套件] 對話方塊中，按一下 [ 還原 ] 以下載遺漏的套件。
3. 最後，按一下 [建 | 置建置方案] 來建置方案。
  
  注意
  
  使用 NuGet 的其中一個優點是，您不需要寄送專案中的所有程式庫，以減少專案大小。使用 NuGet Power Tools，藉由在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。這就是您從此實驗室開啟現有解決方案之後，必須執行這些步驟的原因。
在方案總管中，找出Default.aspx頁面，以滑鼠右鍵按一下它，然後選取[在Page Inspector中檢視]。

使用 Page Inspector 開啟 Default.aspx
Page Inspector視窗會顯示 Default.aspx。

在 Page Inspector 中檢視 Default.aspx

Page Inspector工具已整合到 Visual Studio 環境中。偵測器包含內嵌瀏覽器，以及將顯示所選程式碼的強大 HTML 分析工具。請注意，您不需要執行解決方案，即可查看頁面的外觀。

注意

當Page Inspector瀏覽器的寬度小於開啟頁面的寬度時，您將不會正確看到頁面。如果發生這種情況，請調整Page Inspector的寬度。
按一下 Page Inspector 中的 [檔案] 索引標籤。

您會看到所有組成轉譯預設頁面的原始程式檔。這是一項實用功能，可一目了然地識別所有元素，特別是當您使用使用者控制項和主版頁面時。請注意，您也可以流覽至每個檔案。

[檔案] 索引標籤
按一下位於索引標籤左側的 [切換檢查模式 ] 按鈕。

此工具可讓您選取頁面的任何元素，並查看其 HTML 程式碼和 .aspx 來源。

切換檢查模式按鈕
在Page Inspector瀏覽器中，將滑鼠移至頁面元素上方。當您將滑鼠指標移至轉譯頁面的任何部分時，元素類型會顯示，並在 Visual Studio 編輯器中反白顯示對應的來源標記或程式碼。

執行中的檢查模式

注意

請勿將Page Inspector視窗最大化，否則您將無法看到顯示原始程式碼的預覽索引標籤。如果您在最大化時按一下Page Inspector中的專案，則選取範圍的原始程式碼隨即出現，但會隱藏Page Inspector視窗。

如果您注意 Default.aspx 檔案，您會發現產生所選元素的原始程式碼部分會反白顯示。這項功能可協助長原始程式檔的版本，提供直接且快速的方式來存取程式碼。

檢查項目
按一下 [切換檢查模式] 按鈕 () 位於Page Inspector索引標籤中，以停用游標。
選取[HTML]索引標籤，以顯示在Page Inspector瀏覽器中呈現的 HTML 程式碼。
在 HTML 程式碼中，找出具有 Koala 連結的清單專案，然後加以選取。

請注意，當您選取程式碼時，對應的輸出會自動反白顯示瀏覽器。這項功能有助於瞭解 HTML 區塊在頁面上的呈現方式。

在頁面中選取 HTML 元素
按一下 [ 切換檢查模式 ] 按鈕以啟用 檢查模式 ，然後按一下導覽列。在 HTML 程式碼右側的 [樣式] 窗格中，您會看到套用至所選元素的 CSS 樣式清單。

注意

因為標頭是網站配置的一部分，Page Inspector也會開啟 Site.Master 檔案，並醒目提示受影響的程式碼區段。

探索所選項目的樣式和原始程式檔
啟用切換檢查指標後，將滑鼠指標移至功能表列下方，然後按一下空白半圓圈。

選取專案
在 [樣式] 窗格中，找出.main-content群組底下的背景影像專案。 取消核取背景影像，並查看會發生什麼事。您會注意到瀏覽器會立即反映變更，並隱藏圓形。

注意

您在 [Page Inspector樣式] 索引標籤上套用的變更不會影響原始樣式表單。您可以取消核取樣式或視需要變更其值多次，但在重新整理頁面之後會還原這些樣式。

啟用和停用 CSS 樣式
現在，使用檢查模式按一下標頭上的「您的標誌」文字。
在 [樣式]索引標籤中，找出.site-title群組底下的字型大小CSS 屬性。按兩下屬性一次以編輯其值。將 2.3em 值取代為 3em，然後按 ENTER 鍵。請注意，標題看起來更大。

，

變更Page Inspector中的 CSS 值
按一下 [追蹤樣式] 索引標籤，位於Page Inspector的右窗格中。這是一種替代方式，可查看套用至選取範圍的所有樣式，並依屬性名稱排序。

選取專案的 CSS 樣式追蹤
Page Inspector的另一個功能是 [版面配置] 窗格。使用檢查模式，選取導覽列，然後按一下右窗格中的 [ 版面配置 ] 索引標籤。您會看到所選取專案的確切大小，以及其位移、邊界、邊框間距和框線大小。請注意，您也可以修改此檢視中的值。

Page Inspector 中的元素配置

工作 2 - 尋找並修正相片庫中的樣式問題

當您想要偵測並修正網站中的問題時，您可能已遵循下列步驟：

從 Visual Studio 執行方案，或在網頁伺服器上部署頁面。
在瀏覽器中，開啟您使用的開發人員工具，或直接開啟原始程式碼和樣式，並嘗試符合問題。若要尋找相關的檔案，您已使用具有樣式類別名稱的「搜尋」或「在檔案中搜尋」功能。
偵測到錯誤之後，請停止網頁瀏覽器和伺服器。
清除瀏覽器快取。
返回 Visual Studio 以套用修正。重複所有步驟以進行測試。

由於 ASP.NET WebForms 中沒有實際的 WYSIWYG，因此在執行或部署之後，會在稍後階段偵測到某些樣式問題。現在，使用 Page Inspector，您可以預覽任何頁面，而不需要執行解決方案。

在這項工作中，您將使用頁面偵測器來修正相片庫應用程式的一些問題。在下列步驟中，您將偵測並快速修正標頭中的一些簡單樣式問題。

使用頁面檢查，找出標頭左側的 [註冊 ] 和 [ 登入 ] 連結。

請注意，連結不會顯示在右側的預期位置。您現在會將連結靠右對齊，並據以重新設定連結。

位於左側的登入連結
選取 [切換檢查模式] 後，選取 [登入] 連結以開啟其程式碼。

請注意，連結原始程式碼位於 Site.Master 檔案中，而不是第一個位置的 Default.aspx 頁面中;您已直接放在正確的原始程式檔中。
在 [樣式]索引標籤中，找出並按一下< 區段 > #login專案，這是這些連結的 HTML 容器。

請注意， 按一下之後，#login 樣式會自動位於 Site.css 中。此外，程式碼現在會反白顯示。

選取 CSS 樣式
移除開頭和結尾字元，並儲存Site.css檔案，以取消批註醒目提示程式碼中的文字對齊屬性。

Page Inspector知道組成目前頁面的所有不同檔案，而且可以偵測這些檔案變更的時機。每當瀏覽器中的目前頁面未與來源檔案同步時，就會提醒您。
在Page Inspector瀏覽器中，按一下網址列下方的列，以儲存變更並重載頁面。

重載頁面

連結現在位於右側，但仍看起來像專案符號清單。現在，您將移除專案符號，並水準對齊連結。

更新的頁面
使用檢查模式，選取包含「註冊」和「登入」連結的任何< li >專案。然後，按一下專案< #login區段 >來存取Styles.css程式碼。

尋找樣式
在 Style.css中，取消批註 li 專案 #login 的程式碼。您新增的樣式將會隱藏專案符號，並水準顯示專案。

重新設定登入連結
儲存 Style.css 檔案，然後在位址下方的列中按一下一次，以重載頁面。請注意，連結正確出現。

對齊右側的連結
最後，您將變更標頭標題。不要搜尋所有檔案中的「您的標誌」 文字，而是使用檢查模式按一下文字並取得產生它的原始程式碼。

尋找網站標題
現在您位於 Site.Master中，請將 'your logo here' 文字取代為 'Photo Gallery'。儲存並更新Page Inspector瀏覽器。

已更新相片庫頁面
最後，按 F5 執行應用程式，取出所有變更都會如預期般運作。

總結

藉由完成此Hands-On實驗室，您已瞭解如何使用 Page Inspector 預覽 Web 應用程式，而不需要在瀏覽器中重建和執行網站。此外，您已瞭解如何直接從轉譯的輸出存取原始程式碼，以快速尋找並修正 Bug。

附錄 A：安裝 Visual Studio Express 2012 for Web

您可以使用Microsoft Web Platform Installer安裝Microsoft Visual Studio Express 2012 for Web或其他「快速」版本。下列指示會引導您使用Microsoft Web Platform Installer安裝Visual Studio Express 2012 for Web所需的步驟。

移至 [ https://go.microsoft.com/?linkid=9810169 ] (https://go.microsoft.com/?linkid=9810169) 。或者，如果您已安裝 Web Platform Installer，您可以開啟它，並搜尋產品「Visual Studio Express 2012 for Web 與 Windows Azure SDK」。
按一下 [ 立即安裝]。如果您沒有 Web Platform Installer ，系統會將您重新導向至下載並先安裝。
開啟 Web Platform Installer 之後，按一下 [ 安裝 ] 以啟動安裝程式。

安裝Visual Studio Express
閱讀所有產品的授權和條款，然後按一下 [ 我接受 ] 繼續。

接受授權條款
等候下載和安裝程式完成。

安裝進度
安裝完成時，按一下 [ 完成]。

安裝已完成
按一下 [結束 ] 以關閉 Web Platform Installer。
若要開啟 web 的Visual Studio Express，請移至 [開始] 畫面並開始撰寫「VS Express」，然後按一下[VS Express for Web] 圖格。

VS Express for Web 圖格