.Net Framework 4.5與Visual Studio 11 - Page Inspector簡介

by vivid 14. 三月 2012 01:54

.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工具中跳來跳去進行除錯。

clip_image002

圖 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所示。

clip_image004

圖 2:安裝Page Inspector。

下一個步驟就會看到授權頁,也是按「I Accept」按鈕後進到下一個畫面,請參考圖3所示:

clip_image006

圖 3:接受授權。

若環境沒什麼問題的話,便進入安裝的程序,請參考圖4所示:

clip_image008

圖 4:安裝Page Inspector。

安裝完成畫面,請參考圖5所示。

clip_image010

圖 5:Page Inspector安裝完成畫面。

安裝完成之後,當你開啟Visual Studio 11 Developer Preview開發工具,就可以選取「Tools」-「Page Inspector」選項叫出「Page Inspector」視窗,請參考圖6所示。

clip_image012

圖 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所示:

clip_image014

圖 7:使用Page Inspector開啟網站的首頁。

另一種作法,您可以利用「Solution Explorer」視窗,選取想檢視的網頁,例如下圖的Default.aspx,按滑鼠右鍵,然後點選「View in Page Inspector」選項,此網頁就會被開啟在「Page Inspector」視窗之中,請參考圖8所示。

clip_image016

圖 8:View in Page Inspector。

從這個工具,您可以想像的出,當你的ASP.NET網頁執行後,將會產生出什麼樣的標籤,套用CSS屬性設定後的效果。當然有「Page Inspector」這個工具,您不用真的進行執行網頁的動作,請參考圖9所示。

clip_image018

圖 9:使用Page Inspector檢視default.aspx。

若是網站第一次使用到「Page Inspector」的功能,Visual Studio 11 Developer Preview開發工具會跳出一個小對話盒,詢問是否啟用「Page Inspector」的功能,請參考圖10所示:

clip_image020

圖 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所示。

clip_image022

圖 11:檢視組成網頁的檔案清單。

若點選左下方功能表上的「HTML」按鈕,就會切換到網頁的HTML檢視,「HTML」頁下方就會顯示目前網頁中的HTML標籤,您可以選取任一個HTML標籤,「Page Inspector」視窗上方就會自動顯示您選取的HTML項目,而右下方的「Styles」頁便會自動列出此項目套用的CSS樣式,請參考圖12所示:

clip_image024

圖 12:「Styles」頁便會自動列出此項目套用的CSS樣式。

若點選「Styles」頁下方的css檔案超連結,也會自動開啟此檔案,您便可以更容易地檢視設定的CSS屬性值。

切換Toggle Inspection模式

若點選左下方功能表上的「Toggle Inspection Mode」按鈕,切換到「Inspection Mode」,您可以倒過來,選取「Page Inspector」視窗上方的項目,請參考圖13所示:

clip_image026

圖 13:切換到Toggle Inspection模式。

滑鼠的游標將會自動變成一個加號 「+」,你可以自由選取「Page Inspector」視窗上方的HTML項目,Visual Studio 11 Developer Preview會自動顯示選取的項目之HTML標籤,請參考圖14所示。

clip_image028

圖 14:會自動顯示選取的項目之HTML標籤。

參考下圖所示,網頁中包含一個使用者自訂控制項,當你點選左上方的使用者控制項,右方也會出現使用者控制項的標籤,請參考圖15所示。

clip_image030

圖 15:自動顯示網頁中使用者控制項的標籤。

更好的是,當你點選使用者控制項中的控制項,Visual Studio 11 Developer Preview也會開啟ascx檔案,顯示其中的HTML標籤,請參考圖16所示:

clip_image032

圖 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所示:

clip_image034

圖 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所示:

clip_image036

圖 18:啟用、停用CSS會馬上反應並顯示在上方。

您也可以直接在「Page Inspector」視窗的「Styles」頁,修改CSS的設定,例如下圖所示,雙擊「Page Inspector」視窗-「Styles」-「h2 (Styles/Site.css) 」-「font-size」後方的「1.5em」設定值,此時,畫面中將會出現一個文字方塊,您便可以自由地輸入新的設定值,如本範例的「2em」,請參考圖19所示:

clip_image038

圖 19:修改屬性值。

當新的值設定後「Page Inspector」視窗上方的h2項目馬上會套用新的設定值,不過請特別注意,修改此處的設定值,並不會影響原始h2所在的Site.css檔案中的設定。

選取「Page Inspector」視窗-「Layout」頁,則可以看到目前選取的HTML項目的配置情況,像是Margin、Border的設定等等,請參考圖20所示:

clip_image040

圖 20:檢視Layout。

總結

Page Inspector內含一個瀏覽器,和Visual Studio 11 Developer Preview開發工具直接整合在一起,提供一個Inspection Mode,可以讓你馬上了解瀏覽器顯示的項目和原始程式檔的關係,您不須要執行網站專案就可以檢視網頁的設計,像是HTML標籤、CSS套用的結果…等等。

Tags:

.NET Magazine國際中文電子雜誌 | ASP.NET | 許薰尹Vivid Hsu | Visual Studio

評論 (48) -

123
123 Macao S.A.R.
2016/5/4 下午 05:45:43 #

nhh啊啊

回覆

cours de theatre paris
cours de theatre paris United States
2017/9/30 下午 10:24:26 #

Really appreciate you sharing this post.Really looking forward to read more. Fantastic.

回覆

can ho dic phoenix
can ho dic phoenix United States
2017/10/7 上午 02:00:54 #

Im grateful for the post.Really looking forward to read more. Want more.

回覆

Osimi seaview
Osimi seaview United States
2017/10/9 下午 07:49:14 #

I truly appreciate this blog article. Really Great.

回覆

buy hacklink
buy hacklink United States
2017/10/12 下午 10:27:11 #

Thank you ever so for you blog post.Much thanks again. Want more.

回覆

special info
special info United States
2017/10/14 下午 05:43:53 #

I really like and appreciate your post. Cool.

回覆

dragon city hacks
dragon city hacks United States
2017/10/15 下午 05:14:27 #

Thanks so much for the post. Awesome.

回覆

official statement
official statement United States
2017/10/17 下午 04:32:54 #

I really liked your post.Really looking forward to read more. Keep writing.

回覆

sletrokor review
sletrokor review United States
2017/10/17 下午 10:04:26 #

Wow, great post.Really thank you! Really Great.

回覆

Look At This
Look At This United States
2017/10/19 下午 08:14:56 #

Hey, thanks for the blog. Really Cool.

回覆

carte grise en ligne
carte grise en ligne United States
2017/10/21 上午 09:14:28 #

Very neat article post.Much thanks again. Really Cool.

回覆

phentaslim review
phentaslim review United States
2017/11/3 上午 07:26:51 #

Muchos Gracias for your blog.Much thanks again.

回覆

natural alternative back pain
natural alternative back pain United States
2017/11/15 上午 07:02:35 #

Fantastic post.Really looking forward to read more. Want more.

回覆

avocat quebec
avocat quebec United States
2017/11/16 下午 05:37:32 #

Muchos Gracias for your blog.Much thanks again. Really Cool.

回覆

Really appreciate you sharing this article post. Want more.

回覆

fashion
fashion United States
2017/11/23 下午 09:04:20 #

Looking forward to reading more. Great article post.Really thank you! Will read on...

回覆

Web Developers Auckland
Web Developers Auckland United States
2017/11/25 下午 06:02:48 #

I am so grateful for your article.Really looking forward to read more. Awesome.

回覆

Chad Boonswang and Jeffrey Goodman
Chad Boonswang and Jeffrey Goodman United States
2017/11/26 下午 05:13:25 #

Very neat article post.Much thanks again.

回覆

Chad Boonswang SEO
Chad Boonswang SEO United States
2017/11/26 下午 11:14:12 #

Muchos Gracias for your post.Really looking forward to read more. Awesome.

回覆

car wreckers
car wreckers United States
2017/11/29 下午 03:39:00 #

A big thank you for your blog article.Really thank you! Cool.

回覆

Sunshine Avenue
Sunshine Avenue United States
2017/11/29 下午 10:13:14 #

I appreciate you sharing this blog article. Want more.

回覆

business trade lines
business trade lines United States
2017/12/1 上午 12:04:43 #

I really like and appreciate your post.Much thanks again.

回覆

porno
porno United States
2017/12/1 下午 03:44:26 #

wow, awesome article post. Want more.

回覆

Build Business Credit
Build Business Credit United States
2017/12/3 上午 04:03:30 #

Really enjoyed this article post.Really looking forward to read more. Great.

回覆

sextus.mobi
sextus.mobi United States
2017/12/5 上午 08:49:52 #

I loved your article.Much thanks again. Really Great.

回覆

Major thanks for the article post.Much thanks again. Want more.

回覆

http://betaniceseo.xyz/story/11560
http://betaniceseo.xyz/story/11560 United States
2017/12/10 上午 08:04:14 #

Very neat post. Want more.

回覆

site legalize
site legalize United States
2017/12/10 下午 06:28:19 #

Thanks again for the blog.Really looking forward to read more. Keep writing.

回覆

Manual Frezzo
Manual Frezzo United States
2017/12/14 上午 08:35:48 #

Very neat article.Really looking forward to read more. Will read on...

回覆

click to read
click to read United States
2017/12/14 下午 03:26:27 #

A round of applause for your post.Really thank you! Want more.

回覆

Hanukkah
Hanukkah United States
2017/12/14 下午 09:57:10 #

Appreciate you sharing, great blog article.Really thank you! Really Cool.

回覆

canon drivers
canon drivers United States
2017/12/16 下午 05:09:22 #

This is one awesome blog article.Thanks Again. Really Cool.

回覆

tips lose weight
tips lose weight United States
2017/12/16 下午 11:24:57 #

Muchos Gracias for your blog article.Really looking forward to read more. Much obliged.

回覆

Thanks again for the article.Much thanks again.

回覆

M&amp;amp;A
M&amp;A United States
2017/12/17 下午 04:50:51 #

Very informative blog article.Much thanks again. Great.

回覆

degreeshortcut
degreeshortcut United States
2017/12/17 下午 11:52:31 #

Thanks a lot for the blog article.Thanks Again. Really Cool.

回覆

online money
online money United States
2017/12/20 下午 06:01:58 #

Great blog post.Really looking forward to read more. Really Cool.

回覆

driver canon
driver canon United States
2017/12/23 下午 12:09:48 #

Wow, great article post. Keep writing.

回覆

canon drivers
canon drivers United States
2017/12/27 下午 06:29:44 #

Very neat blog post. Fantastic.

回覆

drivers hp
drivers hp United States
2018/1/2 上午 09:11:23 #

Thank you for your blog.Really looking forward to read more.

回覆

visit site
visit site United States
2018/1/2 下午 05:13:30 #

I loved your article.Thanks Again. Great.

回覆

Looking forward to reading more. Great blog post.Really thank you!

回覆

hp drivers
hp drivers United States
2018/1/3 上午 08:33:36 #

Major thankies for the blog post.Really thank you! Want more.

回覆

online casinos for real money usa
online casinos for real money usa United States
2018/1/4 下午 07:11:28 #

Really informative article post.Thanks Again. Really Great.

回覆

hp printer driver
hp printer driver United States
2018/1/5 下午 07:23:40 #

Thanks for the post.Much thanks again. Really Great.

回覆

FBA
FBA United States
2018/1/6 上午 11:29:21 #

Thanks for the blog.Much thanks again.

回覆

colocation chicago
colocation chicago United States
2018/1/10 下午 03:06:46 #

Awesome blog. Really Cool.

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List