元素（Elements）面板使你可以瀏覽當前頁面的結(jié)構(gòu)化信息，在如今的應(yīng)用中，為初始頁面載入服務(wù)的 HTML 標記不一定是你在文檔對象模型（DOM）樹中看到的那樣。在調(diào)試以及創(chuàng)建網(wǎng)頁的時候，實時展示頁面樣式將會是非常有用的功能。
你可以使用元素面板來完成多種工作：
如果想要更好地利用屏幕空間，請遵循下面這些有關(guān)工作區(qū)間的提示：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/divider.gif" alt="divider" />
DOM 樹窗口展示了當前頁面的 DOM 結(jié)構(gòu)。DOM 樹實際上是由 DOM 節(jié)點構(gòu)成的一棵樹，并且每個節(jié)點都表示一個 HTML 元素，比如body 標簽和 p 標簽。為了閱讀的便捷性，DOM 樹窗口使用 HTML 元素標簽來代替 DOM 節(jié)點，例如，用p標簽來代替 HTMLParagraphElement。
DOM 樹視圖展示了樹當前的狀態(tài)，這可能和最初加載的 HTML 頁面并不相符，原因如下：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/inspect.gif" alt="inspect" />
審查元素界面會展示的 負責呈現(xiàn)的元素顯示在瀏覽器中的 DOM 節(jié)點和 CSS 樣式表。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/inspect-element.gif" alt="inspect-element" />
審查元素的方式有多種：
使用右鍵點擊頁面上的任何元素，然后選擇Inspect Element。
按Ctrl+Shift+C（在Mac上則是Cmd+Shift+C）以審查元素模式打開 DevTools，然后點擊一個元素。
點擊 DevTools 窗口頂部的 Inspect Element buttonhttp://wiki.jikexueyuan.com/project/chrome-devtools/images/inspect-icon.png" alt="inspect-icon" />，隨后會進入審查元素模式，然后選擇元素。
inspect() 方法，比如inspect(document.body)。關(guān)于如何使用 inspect 請參考Command-Line APIhttp://wiki.jikexueyuan.com/project/chrome-devtools/images/inspect-element2.gif" alt="inspect-element-procedure" />
你可以使用鼠標或者鍵盤在 DOM 結(jié)構(gòu)中進行定位。
展開一個節(jié)點的時候會自動選中它的第一個孩子節(jié)點，因此你可以通過多次按右鍵來展開一個深度嵌套的結(jié)構(gòu)。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/expand-collapse.gif" alt="expand and collapse" />
在你定位的時候，元素面板會在底部顯示瀏覽路徑： http://wiki.jikexueyuan.com/project/chrome-devtools/images/breadcrumb-body.png" alt="breadcrumb-body" />
當前選中的節(jié)點用藍色高亮顯示，在該結(jié)構(gòu)上向下定位會展開尾部： http://wiki.jikexueyuan.com/project/chrome-devtools/images/breadcrumb-footer.png" alt="breadcrumb-footer" />
沿著結(jié)構(gòu)向上定位則會移動高亮部分： http://wiki.jikexueyuan.com/project/chrome-devtools/images/breadcrumb-trail.png" alt="breadcrumb-trail" />
DevTools 路徑尾部會顯示盡可能多的條目： http://wiki.jikexueyuan.com/project/chrome-devtools/images/breadcrumb-ellipsis.png" alt="breadcrumb-ellipsis" />
如果整個路徑不能在狀態(tài)欄中完整顯示，那么就會用省略號（...）來表示省去的路徑，點擊省略號就會顯示隱藏的元素。
有空可以看看這份快捷鍵表
元素面板允許你修改 DOM 元素：
更新內(nèi)存中的 DOM 樹并不會修改源文件，重新加載頁面的時候會 DOM 樹上的全部更改都會消失。
對于 DOM 節(jié)點，雙擊它可以打開元素標記（H2,section,img）。現(xiàn)在，該字段是可以編輯并且能重命名的，重命名后關(guān)閉標簽就會自動更新標簽信息。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/editable-dom-node.png" alt="editable-dom-node" />
http://wiki.jikexueyuan.com/project/chrome-devtools/images/dom-rename.gif" alt="dom-rename" />
對于 DOM 屬性，DevTools 會區(qū)分屬性名和屬性值，點擊這些元素相應(yīng)的部分來進入編輯狀態(tài)。
雙擊屬性名http://wiki.jikexueyuan.com/project/chrome-devtools/images/edit-node-attribute.png" alt="edit-node-attribte" />來編輯屬性名，這個過程是和屬性值無關(guān)的。
編輯模式處于活躍狀態(tài)時，通過按 Tab 鍵可以在屬性值之間循環(huán)。一旦到達了最后一個屬性值，再按 Tab 鍵則會創(chuàng)建一個新的屬性字段。
使用 Tab 不是增加并編輯屬性的唯一方式，它只是一種常見的模式，實際上，在 DOM 節(jié)點的上下文菜單中，有專門的添加屬性和編輯屬性的條目。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/context-menu-add-edit-attribute.png" alt="context-menu-add-edit-attribute" />
如果想像 HTML 一樣來編輯 DOM 節(jié)點及其子節(jié)點：
F2來使當前選中節(jié)點切換到編輯狀態(tài)）使用可編輯域來完成你的修改。
按Esc鍵可以在不修改節(jié)點的情況下推出編輯。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/edit-attribute.gif" alt="edit-attribute" />
你可以在元素面板中重新排列 DOM 樹節(jié)點來測試頁面在不同布置下的狀況。
在元素面板中拖動節(jié)點來將它移動到 DOM 樹中的其他位置。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/drag-element.gif" alt="drag-element" />
使用以下技巧來刪除 DOM 節(jié)點：
Delete鍵（即刪除鍵）。你也可以在 Edit as HTML 菜單刪除相應(yīng)標簽來刪除元素。
如果你不小心刪除掉了某個元素，通過Ctrl+Z組合鍵回溯到最近一次動作。（或者在Mac下按Cmd+Z）
當你的鼠標懸停在一個 DOM 節(jié)點或者選中了一個 DOM 節(jié)點時，在瀏覽器主窗口中渲染的相應(yīng)元素就會高亮顯示。如果該元素在屏幕之外顯示，瀏覽器窗口的邊緣會有一個提示告訴你，選中的元素在屏外之外。
如果想將屏幕滑動至元素出現(xiàn)在屏幕上為止，右鍵點擊該元素并選擇 Scroll into View。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/scroll-into-view-tooltip.png" alt="scroll-into-view-tooltip" />
http://wiki.jikexueyuan.com/project/chrome-devtools/images/scroll-into.gif" alt="scoll-into" />
DOM 斷點類似于源面板中的斷點，它用來暫停在一定條件下運行的 JavaScript 代碼。JavaScript 斷點是和JavaScript 文件的特定行相關(guān)聯(lián)的，并且在執(zhí)行到該行的時候被觸發(fā)。而 DOM 斷點是和特定的 DOM 元素相關(guān)聯(lián)
的，并且在元素被用某種方式修改時觸發(fā)。
當你不確定 JavaScript 腳本的哪一部分會更新給定元素的時候，你可以使用 DOM 斷點來調(diào)試復(fù)雜的 JavaScript 應(yīng)用。
舉個例子，如果你的 JavaScript 腳本用于更改 DOM 元素的樣式，你可以設(shè)定一個在相關(guān)元素屬性被修改時觸發(fā)的 DOM 斷點。
子樹的修改
當一個子元素添加，刪除或移動時，將會觸發(fā)子樹修改斷點。例如，如果在 ‘main-content’ 元素上設(shè)置子樹修改斷點，下面的代碼會觸發(fā)斷點：
var element = document.getElementById('main-content');
//修改元素的子樹
var mySpan = document.createElement('span');
element.appendChild( mySpan );屬性修改
當元素的屬性（class,id,name）動態(tài)發(fā)生變化時，會出現(xiàn)屬性修改：
var element = document.getElementById('main-content');
// 元素的 class 屬性被修改
element.className = 'active';節(jié)點移除
當問題提及的節(jié)點從 DOM 中移除時，將觸發(fā)節(jié)點移除修改：
document.getElementById('main-content').remove();http://wiki.jikexueyuan.com/project/chrome-devtools/images/breakpoint.gif" alt="breakpoint" />
在上面的演示中，有下面這么幾個步驟：
元素和源面板都包含了一個管理 DOM 斷點的面板。
要查看你的 DOM 斷點，點擊斷點旁邊的擴展箭頭以顯示斷點面板。對于每個斷點，其元素標識符和斷點類型都會顯示出來。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/active-dom-breakpoints.png" alt="active-dom-breakpoints" />
你可以通過以下幾種方式來和斷點進行交互：
當你觸發(fā) DOM 斷點時，這個斷點會在 DOM 斷點面板中高亮顯示。調(diào)用棧面板會顯示調(diào)試器暫停的原因：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/breakpoint-reason.png" alt="breakpoint-reason" />
查看與時間監(jiān)聽器面板中 DOM 節(jié)點相關(guān)聯(lián)的 JavaScript 事件監(jiān)聽器。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/view-event-listeners.png" alt="view-event-listeners" />
事件監(jiān)聽器器面板中的頂級項目會顯示已注冊監(jiān)聽器監(jiān)聽的事件類型。
單擊事件類型旁邊的展開箭頭以查看已注冊的事件處理器列表，每個處理器其都是由 CSS 選擇器所標記的，就像元素標示符 "document" 或者 "button#call-toaction" 等。如果多個處理器為相同的元素而注冊，則該元素會被重復(fù)列出。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/view-handler.gif" alt="view-handler" />
點擊元素標識符旁邊的展開箭頭以查看事件處理器的屬性，事件監(jiān)聽器為每個監(jiān)聽器列出了以下屬性：
默認狀態(tài)下，已注冊的事件處理器會顯示以下類型的元素：
如果你覺得包括了那些使用事件委托注冊的處理器之后，視圖上顯示的事件處理器太多了，可以點擊 Filterhttp://wiki.jikexueyuan.com/project/chrome-devtools/images/filters.png" alt="filter" /> 然后在菜單列表中選中 Selected Node Only 就可以只顯示那些在相應(yīng)節(jié)點上注冊的事件監(jiān)聽器。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/image_17.png" alt="selected-node-only" />
注意：很多 chrome 的擴展插件會把它們的事件監(jiān)聽器也添加到 DOM 中。
如果你發(fā)現(xiàn)了一些不是由你的代碼所設(shè)置的事件監(jiān)聽器，你可能希望在隱身模式中重新打開你的頁面，在隱身模式下，瀏覽器默認阻止擴展插件的運行。
CSS 定義了你的頁面的表示層。你可以查看或者修改那些作用在當前頁面元素上的 CSS 的聲明，級聯(lián)（在級聯(lián)樣式表中）和繼承可以理解為是為了開發(fā)和調(diào)試工作流的：
如果想了解更多，請參照 W3C 關(guān)于級聯(lián)和繼承的文檔： http://www.w3.org/TR/CSS2/cascade.html
樣式面板按照優(yōu)先級從高到底的順序顯示了對應(yīng)選定元素的 CSS 規(guī)則：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/styles-annotated.png" alt="styles-annotated" />
上圖中用數(shù)字標記的在下面有相應(yīng)的解釋。
用逗號分隔的選擇器顏色是不同的，具體取決于他們是否匹配所選中的 DOM 節(jié)點。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/selector-visibility.png" alt="selector-visibility" />
灰色的選擇器，比如 audio 和 video 沒有應(yīng)用于有選定的節(jié)點。上述的規(guī)則和下面的 CSS 源代碼相對應(yīng)：
video, audio, div, .message, body *, time {
/* visibility: hidden */
margin-top: 10px;
}如果可見的聲明被注釋掉了，那么在樣式面板中它將顯示為已禁用狀態(tài)。
使用快捷鍵 Ctrl + 點擊（或者在Mac上用 Cmd + 點擊） 樣式面板中的 CSS 屬性或者屬性值，可以定位到他們在源碼中的位置，并切換到源代碼面板。
你可以在元素面板中的樣式面板上添加或者修改樣式。除了包含樣式信息的區(qū)域顯示為灰色外（就像是 user agent stylesheets 那種情況），所有的樣式都是可編輯的?？梢酝ㄟ^以下方式來編輯樣式：
想要啟用或者禁用某個樣式的聲明，勾選或者取消它旁邊的復(fù)選框。
點擊 CSS 屬性的名稱來編輯其名稱：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/image_20.png" alt="edit-name" />
點擊屬性值可以修改其值。如果你正在修改屬性名稱，按 Tab 或者 Enter 鍵可以開始編輯屬性值。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/image_21.png" alt="edit-value" />
默認情況下，你對 CSS 做出的更改都是暫時的，重新加載頁面的時候所有修改都會復(fù)原。想要自定義相關(guān)行為，可以參考 WorkSpace
當編輯一個屬性值為數(shù)字的 CSS 時，你可以使用以下的快捷鍵來增加或者減少 CSS 屬性的數(shù)值：
Up 或者 Down 來將相應(yīng)值增加或者減少1.（如果當前值在-1到1之間，則每次變動0.1）Alt + up 或者 Alt + Down 來讓相應(yīng)值增加或者減少0.1。Shift + Up/Down 或者 PageUp/PageDown 來讓相應(yīng)值增加或者減少10。Shift + PageUp/PageDown 來讓相應(yīng)值增加或者減少100。你可以通過使用顏色選擇器來把某個顏色修改或者設(shè)置 為當前頁面樣式面板中已經(jīng)存在的顏色。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/colorpicker.gif" alt="colorpicker" />
點擊符合可編輯 CSS 規(guī)則的空白區(qū)域就可以創(chuàng)建一個新的樣式，此時編輯模式適用于當前 CSS 屬性字段，你可以出輸入一個新的屬性。
要添加新的屬性并且在 CSS 屬性字段中查看代碼提示，請執(zhí)行以下步驟：
Up 或者 Down 來選中某一條建議。Tab 鍵，右鍵或者 Enter 鍵。當你選擇了一個有效的 CSS 屬性后，將光標移動到 CSS 屬性值字段以獲取可關(guān)于使用的 CSS 值的建議。例如，對于屬性 display，建議的值有 block，flex，none 等等。
使用 Ctrl + V（或者在Mac上使用 Cmd+ V）來把 CSS 粘貼到樣式面板中。屬性和其值會被解析并放到正確的字段中。
你可能會覺得在一個新的選擇器中添加樣式比較好。在樣式面板的頭欄中點擊加號來創(chuàng)建新的 CSS 規(guī)則。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/add-CSS-rule.gif" alt="add-CSS-style" />
你可以使用偽類選擇器為你的 UI 元素提供動態(tài)的樣式，比如：hover。然而，這些動態(tài)的元素很難調(diào)試。所以 DevTools 允許你手動為各個元素設(shè)置偽類。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/pseudo.gif" alt="pseudo" />
你可以觸發(fā)下面四個偽類的任意組合：
如果要設(shè)置元素的狀態(tài)的話：
本地修改包含了對源文件代碼，如 JavaScript 和 CSS 所做的修改。
用以下方式來找到本地修改面板：
Ctrl + 鼠標點擊）點擊側(cè)欄中的某個源文件。http://wiki.jikexueyuan.com/project/chrome-devtools/images/local-modification.gif" alt="local-modification" />
要做出修改，在 Source 面板的編輯器里修改源代碼即可。
要對一個源自于外部樣式表的 CSS 規(guī)則做出修改，請注意本地修改面板中的變化。
注意：當你使用 New Style Rulehttp://wiki.jikexueyuan.com/project/chrome-devtools/images/plus.png" alt="plus" /> 按鈕的時候，新的 CSS 規(guī)則并不屬于已經(jīng)存在的樣式表中。DevTools 把它添加到一個特殊的監(jiān)視樣式表中，這個監(jiān)視樣式表可以像其他文件一樣在源面板中被修改。
關(guān)于本地修改面板：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/local-modification-panel.gif" alt="local-modification-panel" />
你也可以使用 Ctrl + Z（或者在Mac上使用 Ctrl + Z）來迅速撤銷在元素面板上對 DOM 或者樣式的細小改動。
Metrics 面板直觀闡述了樣式是如何影響 CSS 盒子模型的。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/metrics-panel.gif" alt="metrics-panel" />
Metrics 面板顯示了一組表示盒子維度的矩形，以此來表示 CSS 盒子模型。內(nèi)部的內(nèi)容框顯示內(nèi)容區(qū)域的尺寸，外部的邊框，比如邊界的邊框，表示每個邊緣的值：border-top（上邊框），border-right（右邊框），border-bottom（下邊框），and border-left（左邊框）。
如果邊緣沒有設(shè)定值，將會用破折號（英文的）來代替。
注意：如果你提供了一個非靜態(tài)的值給 CSS 位置屬性，那么 Metrics 面板中會顯示標記的位置。
Boxes （盒子）顯示的內(nèi)容可能是（自外向內(nèi)）：
通過以下技巧來使用 metrics 面板：
掃碼關(guān)注鍍金池微信號
手機訂課，優(yōu)惠多多