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