.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套用的結果…等等。