.NET Magazine國際中文電子雜誌
作 者：許薰尹
審 稿：張智凱
文章編號：N120312201
出刊日期：2012/03/14
Page Inspector讓你在Visual Studio 11於開發、除錯階段便能夠偵錯網站專案中網頁的設計。本文將介紹如何安裝Page Inspector，以及如何在Visual Studio 11開發工具中，使用Page Inspector來檢視網頁的設計，像是表列特定網頁的相關檔案，CSS的套用等等。
過去在設計網頁應用程式時，為了偵錯網頁的問題，您可能會進行以下步驟，先執行網站，執行網頁，然後利用瀏覽器，如IE的「檢視原始檔」功能，開啟原始HTML標記，再檢視其中的問題。
比較好一點的解決方案是，可能利用瀏覽器的功能，或一些外掛程式來幫忙除錯，例如在IE瀏覽器檢視某個網頁時，你可以按下鍵盤的F12功能鍵來開啟「開發者工具」以便於除錯，請參考圖1所示。但不管是使用瀏覽器附加的功能，或額外安裝一些外掛除錯程式，如Firebug等等，都避免不了要在這些程式與Visual Studio 11 Developer Preview工具中跳來跳去進行除錯。
圖 1：使用IE瀏覽器的「開發者工具」來進行除錯。
Page Inspector是一個新的工具，能夠讓你利用Visual Studio 11 Developer Preview工具來偵錯網頁的設計。它適用於開發HTML、Web表單 (Web Forms)、ASP.NET MVC類型的網站以及網頁中使用。透過Page Inspector您可以檢視網頁中的項目，例如Web伺服器控制項 (Web Server Control) 產生出來的HTML標記為何，也可以用來檢視HTML項目套用CSS樣式的繼承關係，或即時修改CSS的屬性。
安裝Page Inspector
Page Inspector並沒有內建於Visual Studio 11 Developer Preview開發工具之中，要使用之前需要事先安裝。由於Page Inspector會將瀏覽器裝載在Visual Studio中執行，因此您的電腦上IE瀏覽器的版本需要9版以上。
首先您的電腦上必需先安裝Microsoft Web Platform Installer軟體，然後至以下網頁利用Microsoft Web Platform Installer安裝Page Inspector ：
http://www.microsoft.com/web/gallery/install.aspx?appid=VSPageInspector_v1&prerelease=true
隨後便會出現「Web Platform Installer」視窗，詢問是否安裝「Page Inspector」，這個階段要先將開啟的IE瀏覽器關閉，再按下「Install」按鈕進行安裝，請參考圖2所示。
圖 2：安裝Page Inspector。
下一個步驟就會看到授權頁，也是按「I Accept」按鈕後進到下一個畫面，請參考圖3所示：
圖 3：接受授權。
若環境沒什麼問題的話，便進入安裝的程序，請參考圖4所示：
圖 4：安裝Page Inspector。
安裝完成畫面，請參考圖5所示。
圖 5：Page Inspector安裝完成畫面。
安裝完成之後，當你開啟Visual Studio 11 Developer Preview開發工具，就可以選取「Tools」-「Page Inspector」選項叫出「Page Inspector」視窗，請參考圖6所示。
圖 6：開啟Page Inspector。
開啟Page Inspector
若在Visual Studio 11 Developer Preview開發工具開啟已設計好的網站，或利用Visual Studio 「File」-「New」-「Web Site」-「ASP.NET Web Site」範本建立一個測試網站。接著您可打開「Page Inspector」視窗。(可以直接按下快速鍵，CTRL+K，CTRL+G開啟)。然後點選「Page Inspector」視窗上方的「Home」圖示，此時「Page Inspector」便會顯示網站的首頁，請參考圖7所示：
圖 7：使用Page Inspector開啟網站的首頁。
另一種作法，您可以利用「Solution Explorer」視窗，選取想檢視的網頁，例如下圖的Default.aspx，按滑鼠右鍵，然後點選「View in Page Inspector」選項，此網頁就會被開啟在「Page Inspector」視窗之中，請參考圖8所示。
圖 8：View in Page Inspector。
從這個工具，您可以想像的出，當你的ASP.NET網頁執行後，將會產生出什麼樣的標籤，套用CSS屬性設定後的效果。當然有「Page Inspector」這個工具，您不用真的進行執行網頁的動作，請參考圖9所示。
圖 9：使用Page Inspector檢視default.aspx。
若是網站第一次使用到「Page Inspector」的功能，Visual Studio 11 Developer Preview開發工具會跳出一個小對話盒，詢問是否啟用「Page Inspector」的功能，請參考圖10所示：
圖 10：啟用Page Inspector。
當你按下「Yes」按鈕之後，網站web.config組態檔案中，appSettings區段便會多一個VisualStudioDesignTime: Enabled的設定，參考設定如下：
<appSettings>
//略
<add key="VisualStudioDesignTime:Enabled" value="true" />
</appSettings>
檢視組成網頁的檔案清單
當你在「Page Inspector」視窗開啟網頁之後，視窗左下方有一個功能表，若點選「Files」項目，則下方會自動列出此網頁是由那些檔案組成。參考本文範例，開啟Default.aspx之後，列出Default.aspx網頁包含「Site.master」主檔頁面以及使用者控制項「unl.ascx」這些檔案組成，若點選任一超連結，就會在Visual Studio 11 Developer Preview開啟此檔案，請參考圖11所示。
圖 11：檢視組成網頁的檔案清單。
若點選左下方功能表上的「HTML」按鈕，就會切換到網頁的HTML檢視，「HTML」頁下方就會顯示目前網頁中的HTML標籤，您可以選取任一個HTML標籤，「Page Inspector」視窗上方就會自動顯示您選取的HTML項目，而右下方的「Styles」頁便會自動列出此項目套用的CSS樣式，請參考圖12所示：
圖 12：「Styles」頁便會自動列出此項目套用的CSS樣式。
若點選「Styles」頁下方的css檔案超連結，也會自動開啟此檔案，您便可以更容易地檢視設定的CSS屬性值。
切換Toggle Inspection模式
若點選左下方功能表上的「Toggle Inspection Mode」按鈕，切換到「Inspection Mode」，您可以倒過來，選取「Page Inspector」視窗上方的項目，請參考圖13所示：
圖 13：切換到Toggle Inspection模式。
滑鼠的游標將會自動變成一個加號 「+」，你可以自由選取「Page Inspector」視窗上方的HTML項目，Visual Studio 11 Developer Preview會自動顯示選取的項目之HTML標籤，請參考圖14所示。
圖 14：會自動顯示選取的項目之HTML標籤。
參考下圖所示，網頁中包含一個使用者自訂控制項，當你點選左上方的使用者控制項，右方也會出現使用者控制項的標籤，請參考圖15所示。
圖 15：自動顯示網頁中使用者控制項的標籤。
更好的是，當你點選使用者控制項中的控制項，Visual Studio 11 Developer Preview也會開啟ascx檔案，顯示其中的HTML標籤，請參考圖16所示：
圖 16：自動顯示網頁中組成使用者控制項的HTML項目標籤。
套用Style
「Page Inspector」視窗右下方的「Style」或「Trace Style」都可以用來套用或關閉現有的CSS樣式。例如當你利用Toggle Inspection Mode」按鈕，點選Default.aspx中的h2項目：
<h2>
Welcome to ASP.NET!
</h2>
再切換到「Page Inspector」視窗-「Trace Style」頁，你可以很清楚的看到h2項目的font-weight項目，套用了「h1, h2, h3, h4, h5, h6」與「h2」兩個項目的定義，而目前h2的優先權較高，因此「h1, h2, h3, h4, h5, h6」項目上就包含一條橫線，請參考圖17所示：
圖 17：套用與追蹤CSS。
CSS檔案的部分內容如下，「h1, h2, h3, h4, h5, h6」的font-weight設定為「200」；而「h2」的font-weight設定為「600」，請參考圖18所示：
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
若清除勾選「Page Inspector」視窗-「Trace Style」-「Font-Weight」下的「h2」樣式，則「Font-Weight」便會改套用定義在「h1, h2, h3, h4, h5, h6」的樣式，設定的值便為「200」，此變化會馬上反應在「Page Inspector」視窗上方開啟中的網頁，請參考圖18所示：
圖 18：啟用、停用CSS會馬上反應並顯示在上方。
您也可以直接在「Page Inspector」視窗的「Styles」頁，修改CSS的設定，例如下圖所示，雙擊「Page Inspector」視窗-「Styles」-「h2 (Styles/Site.css) 」-「font-size」後方的「1.5em」設定值，此時，畫面中將會出現一個文字方塊，您便可以自由地輸入新的設定值，如本範例的「2em」，請參考圖19所示：
圖 19：修改屬性值。
當新的值設定後「Page Inspector」視窗上方的h2項目馬上會套用新的設定值，不過請特別注意，修改此處的設定值，並不會影響原始h2所在的Site.css檔案中的設定。
選取「Page Inspector」視窗-「Layout」頁，則可以看到目前選取的HTML項目的配置情況，像是Margin、Border的設定等等，請參考圖20所示：
圖 20：檢視Layout。
總結
Page Inspector內含一個瀏覽器，和Visual Studio 11 Developer Preview開發工具直接整合在一起，提供一個Inspection Mode，可以讓你馬上了解瀏覽器顯示的項目和原始程式檔的關係，您不須要執行網站專案就可以檢視網頁的設計，像是HTML標籤、CSS套用的結果…等等。
訂閱