本文主題涵蓋 開發者工具-HTML/CSS解譯器, 開發者工具-即時可改值的強大功能 , 用開發者工具來協助完成IE 8 相容, 用開發者工具尋找AJAX問題
開發者工具的HTML/CSS解譯
文/黃忠成
本文主題涵蓋
1. 開發者工具-HTML/CSS解譯器
2. 開發者工具-即時可改值的強大功能
3. 用開發者工具來協助完成IE 8 相容
4. 用開發者工具尋找AJAX問題
初探HTML/CSS解譯器
Internet Explorer 8中重新整合並改進了以往曾經單獨出現過的IE Developer Tools工具,除了前面文章所提及的JavaScript除錯支援外,另一個值得一書的特色就是
HTML/CSS的解譯。
開發者工具會即時的將HTML解譯成一樹狀結構圖,透過這個樹狀結構圖,我們可以輕易的瞭解網頁的配置(Layout),比起以往用Notepad(記事本)一行行的觀看原始碼,
然後在腦中描繪網頁呈現時的影像,開發者工具簡直就是神器般的存在。你可以開啟MSDN首頁,然後按下F12來啟動開發者工具,如圖1。
圖1
HTML頁籤內左方為目前網頁的配置,以樹狀方式呈現,你可以點選想要查看元素前的【+】號來展開該元素查看其子元素。在選取特定元素後,右方的四個頁籤分別
可以以CSS Class為主查看該元素所套用的CSS樣式(樣式)、以CSS屬性為單位查看該屬性的設定歷程(追蹤樣式)、整個Layout(格式設定)、該元素的屬性值(屬性)。
我們先看看樣式的頁籤內有何資訊。
圖2
這裡以CSS Class為主,列出了此元素所套用的CSS樣式,裡面也明確描述了那些CSS屬性是設定在那一個CSS Class及那個CSS檔案中,以橫線劃除的屬性代表著該屬性
已被後來的屬性設定所覆蓋掉。
每個項目前面有個選取框,我們可透過此選取框來決定是否要套用此樣式,這些動作是即時反應的,也就是說你可以在不更改網頁內容的情況下,即時性的改變特定元素的CSS樣式,
這在調整網頁配置時非常有用,圖3的例子是將MSDN最上方的搜尋框內的background-image及background-color選取取消,不套用這兩個屬性。
圖3
追蹤樣式頁籤中則改以CSS屬性為主列示。
圖4
在這個頁籤中,你可以一目瞭然的看到特定CSS屬性的設定歷程。
格式設定頁籤中可以查看此元素於此網頁中的配置,這裡可以讓你更改Offset、Margin、Padding、Border及長寬大小,一樣,這些修改是即時反應的。
圖5
此例中我嘗試點選Left Border的1px後,改為100px,如圖6。
圖6
結果如圖7。
圖7
屬性頁籤會顯示目前選取元素的屬性設定,例如套用的CSS Class、value、type等屬性。
圖8
即時可改值的強大功能
除了解譯之外,開發者工具更強大的是所有解譯出來的東西大部份都是可更改的,而且這些更改都會即時反應在網頁上,舉例而言,我們可以在HTML
樹狀圖上選取特定元素,然後改變其屬性值,如圖9。
圖9
確定完成修改後如圖10。
圖10
切換到樣式頁籤後,你也可以修改特定CSS屬性的值。
圖11
結果如圖12。
圖12
在屬性頁籤中則可以修改HTML元素的屬性值。
圖13
如果想修改的屬性值不存在,則可以點選空列名稱部份來添加。
圖14
當你覺得某個網頁特定元素樣式非常喜歡時,還可點選【 具樣式的元素原始檔】按紐,將其由眾多元素的網頁內獨立出來,舉例來說,
我想把MSDN上的導覽列樣式粹取出來,就只需選取該元素後按下【 具樣式的元素原始檔】按紐即可。
圖15
然後我會得到僅有該元素+CSS的原始檔。
圖16
將這些內容複製或直接以檔案選單儲存後瀏覽,會如圖17。
圖17
如你所見,開發者工具在未來設計網頁時,必定會扮演著相當重要的角色,尤其在你熟悉它後,你會更離不開它。
關於CSS頁籤
頁籤中可以讓我們以CSS檔案為單位來查看此網頁所用到的CSS檔案。
圖18
用開發者工具來協助完成IE 8 相容
在IE8推出前,所有人關注的是IE8即將以CSS 2.1為標準,這意味著以往以IE6、7所做出來的網頁,會發生Layout偏移的情況。所幸拜IE 8中的IE 7相容性所賜,
這場大風暴並沒有真的來到,但對於網頁設計師而言,偷安一事畢竟只是暫宜之舉,讓網頁完全符合IE8標準才是正途。
那在讓網頁符合IE8標準時,開發者工具能幫上什麼忙呢?我們以一個實例來說,http://www.msn.com是一個以IE7相容模式執行的網頁,當你透過開發者工具將
其改為以IE8標準模式執行時,會發現某區塊產生了偏移了。
圖19
圖20
Local new區塊產生了偏移,我們可以透過開發者工具右上角的搜尋列協助找到此元素。偏移的原因是local news區塊的大小在IE 7 及 IE 8有不同的呈現,因此在IE 8中,
這個區塊大小需要被放大,很明顯的,我們只要透過屬性頁籤來添加height屬性值,然後放大div class="parent...."的這個區塊的高度,就可以解決。
圖21
剩下的就是用前面提及的CSS 偵測IE版本或是JavaScript偵測IE版本技巧,讓此網頁在IE 7、8模式下都能正常運作。
用開發者工具尋找AJAX問題
以設定innerHTML屬性值來動態改變某個DIV元素內容,是AJAX技術的平民技巧,不過在IE 8以前的瀏覽器都有一個通病,那就是無法查看到以JavaScript設定innerHTML
屬性值後的HTML元素內容,這在大量動態產生HTML於DIV元素內容時,成為了很大的困擾,那時我們只能以人眼+低頻率的人腦來嘗試將HTML翻譯成視覺化的呈現。
在IE 8的開發者工具中,此問題將不再困擾我們,開發者工具可以完整的解譯出以innerHTML設定的內容,程式1是用來測試此功能的範例。
程式1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script language="javascript" type="text/javascript"> function GenerateHTML() { document.getElementById("div1").innerHTML = "<a href='http://www.microsoft.com'>TEST<table><tr><td>TEST2</td></tr>"; } </script> </head> <body> <form id="form1" runat="server"> <input type="button" value="generate" onclick="GenerateHTML()" /> <div id = "div1"> </div> </form> </body> </html> |
這是個很簡單的程式,當使用者按下按紐後,GenerateHTML函式會將一串HTML放到div1元素的innerHTML中,達到動態改變innerHTML內容的效果。
請執行此網頁,然後開啟開發者工具,在按下按紐前的畫面如圖23。
圖23
按下按紐後,在按下上方工具列中的【重新整理】按紐後,如圖24。
圖24
這是一個相當有用的功能,尤其在你動態產生大量HTML時非常有用。