Element 譯為“元素”,Element 面板可以讓我們動態查看和編輯DOM節點和CSS樣式表,並且立即生效,避免了頻繁切換瀏覽器和編輯器的麻煩。
我們可以使用Element面板來查看源代碼,它不但可以很好的格式化DOM節點,清晰的展現HTML文檔,還可以查看JavaScript創建的DOM節點和iframe中的DOM節點,比在當前網頁中右擊鼠標選擇“查看網頁源代碼”強大很多。
總之,Element面板可以讓我們很透徹的了解DOM和CSS的底層結構。
我們將以下面的HTML代碼為例來詳細了解Element面板:
- <!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" xml:lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- <style type="text/css">
- h1{
- color: blue;
- }
- p{
- padding: 10px;
- border: 1px solid #ccc;
- }
- </style>
- <title>Chrome開發者工具演示</title>
- </head>
- <body>
- <div>
- <h1>JavaScript中文網</h1>
- <p>http://www.itxueyuan.org/javascript/</p>
- </div>
- </body>
- </html>
復制該代碼,保存為demo.html並在Chrome瀏覽器中打開,按 Ctrl+Shift+C(Mac系統為Cmd+Shift+C)打開開發者工具並進入元素審查模式。
查看DOM樹
打開Element面板,可以查看所有DOM節點,包括CSS和JavaScript,如下圖所示,左側為DOM樹,右側為CSS樣式。

圖 2.1 Element面板示例
圖標說明:
- 點擊“圖標1”,可以在新窗口中打開開發者工具,再次點擊回到當前網頁;
- 點擊“圖標2”,可以調出控制台,可以在控制台里輸入並執行JavaScript代碼,查看當前網頁的錯誤和日志等;
- 點擊“圖標3”,可以選取當前頁面的HTML元素。
選取DOM節點
點擊“圖標3”(由黑色變為藍色),將鼠標移到網頁中的某元素上面,該元素會發生變化如下圖所示:

圖 2.2 鼠標移動到網頁中的元素
點擊該元素,即可選中。這時,會發現Element面板中的DOM樹發生了變化,如下圖所示:

圖 2.3 DOM樹發生變化
選中的<p>節點在DOM樹中被精確定位(藍色背景),可以看到<p>節點的DOM層次(紅色方框),在面板右側,是<p>節點的CSS樣式。
當然,也可以在Element面板的DOM樹中選取DOM節點。將鼠標放到相應的DOM節點上,會發現網頁中相應的節點也發生了變化(同圖2.2),點擊該節點,即可選中。
增加、刪除和修改DOM節點
在Element面板中,選擇DOM節點,在文本處右擊鼠標,會彈出一個菜單,如下圖所示:

圖 2.4 DOM編輯菜單
菜單說明:
- Edit text(編輯文本):編輯該節點中的文本。也可以在文本處雙擊進行編輯。
- Edit as HTML(編輯HTML):編輯該節點及其子節點的所有HTML元素(包括節點中的文本)。
- Copy as HTML(復制HTML):復制該節點及其子節點的所有HTML元素(HTML文檔)。
- Copy XPath(復制XPath路徑):復制該節點的XPath路徑,即DOM層次路徑。例如,<p>節點的XPath路徑為 /html/body/div/p 。
- Delete node(刪除節點):刪除該節點及其子節點的所有HTML元素。也可以使用 Backspace 和 Delete 鍵刪除。
- Inspect DOM properties(審查DOM屬性):在控制台中顯示該節點的所有標准屬性(如果有的話)。
- Word wrap(自動換行):HTML代碼是否自動換行。
對 Inspect DOM properties(審查DOM屬性)的說明:
為<p>節點添加id屬性,如下:
- <p id="demo">http://www.itxueyuan.org/javascript/</p>
會在控制台輸出p#demo;再向<p>節點添加class屬性和name屬性,如下:
- <p id="demo" class="demo" data="demo">http://www.itxueyuan.org/javascript/</p>
會在控制台輸出p#demo.demo。
可見,控制台只會輸出符合W3C標准的屬性,不支持自定義屬性。不過,實際開發中很少用到該功能。
另外,我們也可以通過拖動節點來改變節點的順序,雙擊屬性節點來改變它的值。
查看CSS樣式
CSS樣式審查面板是一個非常有用的面板,實際開發中,有時候CSS樣式表會非常復雜,甚至連我們自己都不知道當前節點應用了哪些樣式。使用CSS樣式審查面板,可以讓我們清楚地知道當前節點使用了哪些樣式,分別來自哪些文件,哪些樣式是被覆蓋的,哪些樣式是最終樣式,哪些樣式是無效的,等等。
如圖2.3所示,選中節點,Element面板右側的CSS樣式審查面板會展示出該節點的CSS樣式。
在CSS樣式審查面板中,我們可以添加、刪除和修改CSS樣式。
另外,CSS審查面板中有幾個子面板,如下圖所示:

圖 2.5 CSS樣式審查面板的子面板
子面板說明:
- Style(樣式):當前節點的樣式;
- Computed(計算):查看當前節點經過計算后的樣式以及盒模型數據;
- Event Listeners(事件監聽):查看為當前節點綁定的事件和事件監聽函數;
- DOM Breakpoints(DOM斷點):查看為當前節點設置的DOM斷點;
- Properties(屬性):當前節點(對象)的所有屬性。
【小技巧】使用鍵盤方向鍵改變數值
查看<p>節點的樣式,如【圖2.3】所示,選中 padding 的值,按下鍵盤方向鍵(<- 和 ->)數值會跟着改變,頁面上<p>節點的樣式也立刻改變。實際開發中,會經常使用該方法來微調元素的外邊距、內補白和大小等,非常方便。
【小技巧】顏色拾取器
查看<p>節點的樣式,如【圖2.3】所示,選中 background-color 后邊的小圖標,會彈出顏色拾取器,能夠很方便的改變背景顏色,如下圖所示:

圖 2.6 顏色拾取器
實際開發中,會經常使用該方法來微調節點的顏色。
REFERENCE FROM : http://www.itxueyuan.org/view/6708.html