開發者工具的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時非常有用。