Chrome開發(fā)工具 編輯樣式以及 DOM

編輯樣式以及 DOM

簡(jiǎn)介

元素（Elements）面板使你可以瀏覽當(dāng)前頁(yè)面的結(jié)構(gòu)化信息，在如今的應(yīng)用中，為初始頁(yè)面載入服務(wù)的 HTML 標(biāo)記不一定是你在文檔對(duì)象模型（DOM）樹中看到的那樣。在調(diào)試以及創(chuàng)建網(wǎng)頁(yè)的時(shí)候，實(shí)時(shí)展示頁(yè)面樣式將會(huì)是非常有用的功能。

你可以使用元素面板來(lái)完成多種工作：

• 檢查網(wǎng)頁(yè)的 HTML 和 CSS 元素
• 測(cè)試不同的布局
• 實(shí)時(shí)編輯 CSS

如果想要更好地利用屏幕空間，請(qǐng)遵循下面這些有關(guān)工作區(qū)間的提示：

• 關(guān)掉你不常用的面板。
• 調(diào)整 DOM 樹和側(cè)欄之間的分隔線。

DOM

DOM 樹窗口展示了當(dāng)前頁(yè)面的 DOM 結(jié)構(gòu)。DOM 樹實(shí)際上是由 DOM 節(jié)點(diǎn)構(gòu)成的一棵樹，并且每個(gè)節(jié)點(diǎn)都表示一個(gè) HTML 元素，比如body 標(biāo)簽和 p 標(biāo)簽。為了閱讀的便捷性，DOM 樹窗口使用 HTML 元素標(biāo)簽來(lái)代替 DOM 節(jié)點(diǎn)，例如，用p標(biāo)簽來(lái)代替 HTMLParagraphElement。

DOM 樹視圖展示了樹當(dāng)前的狀態(tài)，這可能和最初加載的 HTML 頁(yè)面并不相符，原因如下：

• 你可能使用 Javascript 修改了 DOM 樹。
• 瀏覽器引擎可能嘗試著修復(fù)無(wú)效的標(biāo)簽，因而產(chǎn)生和預(yù)期不符的 DOM 樹。

審查元素

審查元素界面會(huì)展示的 負(fù)責(zé)呈現(xiàn)的元素顯示在瀏覽器中的 DOM 節(jié)點(diǎn)和 CSS 樣式表。

審查元素的方式有多種：

• 使用右鍵點(diǎn)擊頁(yè)面上的任何元素，然后選擇Inspect Element。

• 按Ctrl+Shift+C（在Mac上則是Cmd+Shift+C）以審查元素模式打開 DevTools，然后點(diǎn)擊一個(gè)元素。

• 點(diǎn)擊 DevTools 窗口頂部的 Inspect Element button，隨后會(huì)進(jìn)入審查元素模式，然后選擇元素。

• 在控制臺(tái)中使用 inspect() 方法，比如inspect(document.body)。關(guān)于如何使用 inspect 請(qǐng)參考Command-Line API

使用鼠標(biāo)或鍵盤來(lái)定位 DOM 元素

你可以使用鼠標(biāo)或者鍵盤在 DOM 結(jié)構(gòu)中進(jìn)行定位。

• 如果要展開一個(gè)收縮的節(jié)點(diǎn)，雙擊這個(gè)節(jié)點(diǎn)或者按鍵盤的右鍵。
• 如果要隱藏一個(gè)展開的節(jié)點(diǎn)，雙擊這個(gè)節(jié)點(diǎn)或者按鍵盤的左鍵。

展開一個(gè)節(jié)點(diǎn)的時(shí)候會(huì)自動(dòng)選中它的第一個(gè)孩子節(jié)點(diǎn)，因此你可以通過(guò)多次按右鍵來(lái)展開一個(gè)深度嵌套的結(jié)構(gòu)。

在你定位的時(shí)候，元素面板會(huì)在底部顯示瀏覽路徑：

當(dāng)前選中的節(jié)點(diǎn)用藍(lán)色高亮顯示，在該結(jié)構(gòu)上向下定位會(huì)展開尾部：

沿著結(jié)構(gòu)向上定位則會(huì)移動(dòng)高亮部分：

DevTools 路徑尾部會(huì)顯示盡可能多的條目：

如果整個(gè)路徑不能在狀態(tài)欄中完整顯示，那么就會(huì)用省略號(hào)（...）來(lái)表示省去的路徑，點(diǎn)擊省略號(hào)就會(huì)顯示隱藏的元素。

有空可以看看這份快捷鍵表

編輯 DOM 節(jié)點(diǎn)以及屬性

元素面板允許你修改 DOM 元素：

• 像 HTML 一樣編輯 DOM 節(jié)點(diǎn)。
• 單獨(dú)增加或刪除 DOM 節(jié)點(diǎn)。
• 編輯屬性名稱和值。
• 移動(dòng) DOM 元素。

更新內(nèi)存中的 DOM 樹并不會(huì)修改源文件，重新加載頁(yè)面的時(shí)候會(huì) DOM 樹上的全部更改都會(huì)消失。

編輯 DOM 節(jié)點(diǎn)

對(duì)于 DOM 節(jié)點(diǎn)，雙擊它可以打開元素標(biāo)記（H2,section,img）?，F(xiàn)在，該字段是可以編輯并且能重命名的，重命名后關(guān)閉標(biāo)簽就會(huì)自動(dòng)更新標(biāo)簽信息。

編輯屬性

對(duì)于 DOM 屬性，DevTools 會(huì)區(qū)分屬性名和屬性值，點(diǎn)擊這些元素相應(yīng)的部分來(lái)進(jìn)入編輯狀態(tài)。

• 雙擊屬性名來(lái)編輯屬性名，這個(gè)過(guò)程是和屬性值無(wú)關(guān)的。

• 雙擊屬性值來(lái)編輯這部分的類容而不影響屬性名。

編輯模式處于活躍狀態(tài)時(shí)，通過(guò)按 Tab 鍵可以在屬性值之間循環(huán)。一旦到達(dá)了最后一個(gè)屬性值，再按 Tab 鍵則會(huì)創(chuàng)建一個(gè)新的屬性字段。

使用 Tab 不是增加并編輯屬性的唯一方式，它只是一種常見的模式，實(shí)際上，在 DOM 節(jié)點(diǎn)的上下文菜單中，有專門的添加屬性和編輯屬性的條目。

• 選擇 Add Attribute 來(lái)在打開的標(biāo)簽結(jié)尾添加一個(gè)新的字段。
• 選擇 Edit Attribute 來(lái)修改一個(gè)已存在的屬性。這個(gè)動(dòng)作是上下文敏感的，你右鍵點(diǎn)擊的部分將決定節(jié)點(diǎn)中哪個(gè)部分會(huì)進(jìn)入可編輯狀態(tài)。

像 HTML 一樣編輯 DOM 節(jié)點(diǎn)

如果想像 HTML 一樣來(lái)編輯 DOM 節(jié)點(diǎn)及其子節(jié)點(diǎn)：

• 右鍵點(diǎn)擊相應(yīng)節(jié)點(diǎn)并選擇 Edit as HTML（在 Windows 下，按F2來(lái)使當(dāng)前選中節(jié)點(diǎn)切換到編輯狀態(tài)）

使用可編輯域來(lái)完成你的修改。

• 點(diǎn)擊可編輯域以外的地方來(lái)完成對(duì) DOM 節(jié)點(diǎn)的修改

按Esc鍵可以在不修改節(jié)點(diǎn)的情況下推出編輯。

移動(dòng)元素

你可以在元素面板中重新排列 DOM 樹節(jié)點(diǎn)來(lái)測(cè)試頁(yè)面在不同布置下的狀況。

在元素面板中拖動(dòng)節(jié)點(diǎn)來(lái)將它移動(dòng)到 DOM 樹中的其他位置。

刪除元素

使用以下技巧來(lái)刪除 DOM 節(jié)點(diǎn)：

• 右鍵點(diǎn)擊節(jié)點(diǎn)并選擇 Delete Node。
• 選擇節(jié)點(diǎn)并按Delete鍵（即刪除鍵）。

你也可以在 Edit as HTML 菜單刪除相應(yīng)標(biāo)簽來(lái)刪除元素。

如果你不小心刪除掉了某個(gè)元素，通過(guò)Ctrl+Z組合鍵回溯到最近一次動(dòng)作。（或者在Mac下按Cmd+Z）

在視圖中滑動(dòng)到相應(yīng)位置

當(dāng)你的鼠標(biāo)懸停在一個(gè) DOM 節(jié)點(diǎn)或者選中了一個(gè) DOM 節(jié)點(diǎn)時(shí)，在瀏覽器主窗口中渲染的相應(yīng)元素就會(huì)高亮顯示。如果該元素在屏幕之外顯示，瀏覽器窗口的邊緣會(huì)有一個(gè)提示告訴你，選中的元素在屏外之外。

如果想將屏幕滑動(dòng)至元素出現(xiàn)在屏幕上為止，右鍵點(diǎn)擊該元素并選擇 Scroll into View。

設(shè)置 DOM 斷點(diǎn)

DOM 斷點(diǎn)類似于源面板中的斷點(diǎn)，它用來(lái)暫停在一定條件下運(yùn)行的 JavaScript 代碼。JavaScript 斷點(diǎn)是和JavaScript 文件的特定行相關(guān)聯(lián)的，并且在執(zhí)行到該行的時(shí)候被觸發(fā)。而 DOM 斷點(diǎn)是和特定的 DOM 元素相關(guān)聯(lián)的，并且在元素被用某種方式修改時(shí)觸發(fā)。

當(dāng)你不確定 JavaScript 腳本的哪一部分會(huì)更新給定元素的時(shí)候，你可以使用 DOM 斷點(diǎn)來(lái)調(diào)試復(fù)雜的 JavaScript 應(yīng)用。

舉個(gè)例子，如果你的 JavaScript 腳本用于更改 DOM 元素的樣式，你可以設(shè)定一個(gè)在相關(guān)元素屬性被修改時(shí)觸發(fā)的 DOM 斷點(diǎn)。

子樹的修改

當(dāng)一個(gè)子元素添加，刪除或移動(dòng)時(shí)，將會(huì)觸發(fā)子樹修改斷點(diǎn)。例如，如果在 ‘main-content’ 元素上設(shè)置子樹修改斷點(diǎn)，下面的代碼會(huì)觸發(fā)斷點(diǎn)：

var element = document.getElementById('main-content');

//修改元素的子樹

var mySpan = document.createElement('span');

element.appendChild( mySpan );

屬性修改

當(dāng)元素的屬性（class,id,name）動(dòng)態(tài)發(fā)生變化時(shí)，會(huì)出現(xiàn)屬性修改：

var element = document.getElementById('main-content');

// 元素的 class 屬性被修改

element.className = 'active';

節(jié)點(diǎn)移除

當(dāng)問題提及的節(jié)點(diǎn)從 DOM 中移除時(shí)，將觸發(fā)節(jié)點(diǎn)移除修改：

document.getElementById('main-content').remove();

在上面的演示中，有下面這么幾個(gè)步驟：

• 用戶在搜索框中輸入數(shù)據(jù)，輸入框尺寸發(fā)生變化。
• 用戶在搜索框上設(shè)置了一個(gè)屬性修改斷點(diǎn)。
• 用戶繼續(xù)在搜索框中輸入數(shù)據(jù)，觸發(fā)了斷點(diǎn)，并且停止執(zhí)行。
• 用戶鼠標(biāo)懸停在 JavaScript 變量上方，相應(yīng)變量的詳細(xì)信息會(huì)展示出來(lái)。

元素和源面板都包含了一個(gè)管理 DOM 斷點(diǎn)的面板。

要查看你的 DOM 斷點(diǎn)，點(diǎn)擊斷點(diǎn)旁邊的擴(kuò)展箭頭以顯示斷點(diǎn)面板。對(duì)于每個(gè)斷點(diǎn)，其元素標(biāo)識(shí)符和斷點(diǎn)類型都會(huì)顯示出來(lái)。

你可以通過(guò)以下幾種方式來(lái)和斷點(diǎn)進(jìn)行交互：

• 在元素標(biāo)示符上懸停以顯示元素在頁(yè)面中相應(yīng)的位置（和在元素面板中的節(jié)點(diǎn)上懸停是類似的效果）。
• 點(diǎn)擊一個(gè)元素，可以跳轉(zhuǎn)到它在元素面板中的位置。
• 切換復(fù)選框來(lái)啟用或者禁用斷點(diǎn)。

當(dāng)你觸發(fā) DOM 斷點(diǎn)時(shí)，這個(gè)斷點(diǎn)會(huì)在 DOM 斷點(diǎn)面板中高亮顯示。調(diào)用棧面板會(huì)顯示調(diào)試器暫停的原因：

查看元素事件監(jiān)聽器

查看與時(shí)間監(jiān)聽器面板中 DOM 節(jié)點(diǎn)相關(guān)聯(lián)的 JavaScript 事件監(jiān)聽器。

事件監(jiān)聽器器面板中的頂級(jí)項(xiàng)目會(huì)顯示已注冊(cè)監(jiān)聽器監(jiān)聽的事件類型。

單擊事件類型旁邊的展開箭頭以查看已注冊(cè)的事件處理器列表，每個(gè)處理器其都是由 CSS 選擇器所標(biāo)記的，就像元素標(biāo)示符 "document" 或者 "button#call-toaction" 等。如果多個(gè)處理器為相同的元素而注冊(cè)，則該元素會(huì)被重復(fù)列出。

點(diǎn)擊元素標(biāo)識(shí)符旁邊的展開箭頭以查看事件處理器的屬性，事件監(jiān)聽器為每個(gè)監(jiān)聽器列出了以下屬性：

• handler：包含回調(diào)方法。右鍵點(diǎn)擊方法并選擇 Show Function Definition 來(lái)查看該方法定義的地方。（如果源代碼可用的話）
• isAttribute：如果事件是通過(guò) DOM 屬性注冊(cè)則返回 True。（例如， onclick）
• lineNumber：包含事件注冊(cè)的行號(hào)。
• listenerBody：代表回調(diào)函數(shù)的字符串。
• node：監(jiān)聽器注冊(cè)的那個(gè) DOM 節(jié)點(diǎn)。鼠標(biāo)懸停在此可以顯示它在頁(yè)面視圖中的位置。
• sourceName：包含事件監(jiān)聽器的源文件的 URL 路徑。
• type：事件所注冊(cè)的類型。（例如， click）
• useCapture：一個(gè)布爾值，表示是否已設(shè)置 addEventListener 中的 useCapture 標(biāo)志。

默認(rèn)狀態(tài)下，已注冊(cè)的事件處理器會(huì)顯示以下類型的元素：

• 當(dāng)前選中的元素。
• 當(dāng)前選中元素的祖先節(jié)點(diǎn)。

如果你覺得包括了那些使用事件委托注冊(cè)的處理器之后，視圖上顯示的事件處理器太多了，可以點(diǎn)擊 Filter 然后在菜單列表中選中 Selected Node Only 就可以只顯示那些在相應(yīng)節(jié)點(diǎn)上注冊(cè)的事件監(jiān)聽器。

注意：很多 chrome 的擴(kuò)展插件會(huì)把它們的事件監(jiān)聽器也添加到 DOM 中。

如果你發(fā)現(xiàn)了一些不是由你的代碼所設(shè)置的事件監(jiān)聽器，你可能希望在隱身模式中重新打開你的頁(yè)面，在隱身模式下，瀏覽器默認(rèn)阻止擴(kuò)展插件的運(yùn)行。

樣式

CSS 定義了你的頁(yè)面的表示層。你可以查看或者修改那些作用在當(dāng)前頁(yè)面元素上的 CSS 的聲明，級(jí)聯(lián)（在級(jí)聯(lián)樣式表中）和繼承可以理解為是為了開發(fā)和調(diào)試工作流的：

• 級(jí)聯(lián)涉及到為 CSS 聲明給定權(quán)重，以決定在不同的規(guī)則存在重合的情況下哪一條優(yōu)先執(zhí)行。
• 繼承涉及到如何讓 HTML 元素從 CSS 所包含的元素中繼承相關(guān)屬性（祖先）。

如果想了解更多，請(qǐng)參照 W3C 關(guān)于級(jí)聯(lián)和繼承的文檔：http://www.w3.org/TR/CSS2/cascade.html

樣式面板

樣式面板按照優(yōu)先級(jí)從高到底的順序顯示了對(duì)應(yīng)選定元素的 CSS 規(guī)則：

• 直接用于元素 style 屬性的元素樣式（或者在 DevTools 中使用的）。
• 匹配的 CSS 規(guī)則包括任何與元素相匹配的任何規(guī)則。例如，CSS 的選擇器span 對(duì)應(yīng) HTML\ 元素。
• 繼承的樣式包括yu選中元素的祖先節(jié)點(diǎn)相匹配的任何可繼承的樣式規(guī)則。

上圖中用數(shù)字標(biāo)記的在下面有相應(yīng)的解釋。

1. 匹配元素的選擇器相關(guān)聯(lián)的樣式。
2. 級(jí)聯(lián)規(guī)則指出，如果兩個(gè)規(guī)則的起始、權(quán)重和特性都相同，最靠近元素定義的規(guī)則優(yōu)先執(zhí)行。在這種情況下，第二個(gè)元素屬性將取得優(yōu)先權(quán)，第一個(gè)元素屬性會(huì)以被畫了刪除線的形式來(lái)顯示在文本中，表明它被復(fù)寫了。
3. User agent stylesheets 是被明確標(biāo)記的，而且通常會(huì)被你的網(wǎng)頁(yè)上的 CSS 覆蓋。
4. 這里的級(jí)聯(lián)表明，作者的樣式的優(yōu)先權(quán)是高于使用者的代理樣式的，所以樣式 display:inline-block 覆蓋了用戶定義的樣式 display:block。
5. 繼承的樣式會(huì)在 “Inherited from [node]”這一欄下面顯示。點(diǎn)擊該欄中的 DOM 節(jié)點(diǎn)就可以定位到它在 DOM 樹中的位置。（CSS 2.1 的屬性表中表明了那些屬性是可以繼承的）
6. 選擇器 :root body 比單純的 body 具有更高的特異性，所以它的樣式聲明優(yōu)先。
7. body 中的 font-family 被重寫了。font-size 也是類似的情況（由于選擇器特異性而被重寫）。

用逗號(hào)分隔的選擇器顏色是不同的，具體取決于他們是否匹配所選中的 DOM 節(jié)點(diǎn)。

灰色的選擇器，比如 audio 和 video 沒有應(yīng)用于有選定的節(jié)點(diǎn)。上述的規(guī)則和下面的 CSS 源代碼相對(duì)應(yīng)：

video, audio, div, .message, body *, time {
  /* visibility: hidden */
  margin-top: 10px;
}

如果可見的聲明被注釋掉了，那么在樣式面板中它將顯示為已禁用狀態(tài)。

使用快捷鍵 Ctrl + 點(diǎn)擊（或者在Mac上用 Cmd + 點(diǎn)擊） 樣式面板中的 CSS 屬性或者屬性值，可以定位到他們?cè)谠创a中的位置，并切換到源代碼面板。

編輯及創(chuàng)建樣式

你可以在元素面板中的樣式面板上添加或者修改樣式。除了包含樣式信息的區(qū)域顯示為灰色外（就像是 user agent stylesheets 那種情況），所有的樣式都是可編輯的?？梢酝ㄟ^(guò)以下方式來(lái)編輯樣式：

• 編輯已有的屬性名稱或者屬性值。
• 添加新的屬性聲明。
• 添加新的 CSS 規(guī)則。

想要啟用或者禁用某個(gè)樣式的聲明，勾選或者取消它旁邊的復(fù)選框。

編輯已有的屬性名或者屬性值

點(diǎn)擊 CSS 屬性的名稱來(lái)編輯其名稱：

點(diǎn)擊屬性值可以修改其值。如果你正在修改屬性名稱，按 Tab 或者 Enter 鍵可以開始編輯屬性值。

默認(rèn)情況下，你對(duì) CSS 做出的更改都是暫時(shí)的，重新加載頁(yè)面的時(shí)候所有修改都會(huì)復(fù)原。想要自定義相關(guān)行為，可以參考 <a href=""">WorkSpace

當(dāng)編輯一個(gè)屬性值為數(shù)字的 CSS 時(shí)，你可以使用以下的快捷鍵來(lái)增加或者減少 CSS 屬性的數(shù)值：

• 按 Up 或者 Down 來(lái)將相應(yīng)值增加或者減少1.（如果當(dāng)前值在-1到1之間，則每次變動(dòng)0.1）
• 按 Alt + up 或者 Alt + Down 來(lái)讓相應(yīng)值增加或者減少0.1。
• 按 Shift + Up/Down 或者 PageUp/PageDown 來(lái)讓相應(yīng)值增加或者減少10。
• 按 Shift + PageUp/PageDown 來(lái)讓相應(yīng)值增加或者減少100。

使用顏色選擇器

你可以通過(guò)使用顏色選擇器來(lái)把某個(gè)顏色修改或者設(shè)置為當(dāng)前頁(yè)面樣式面板中已經(jīng)存在的顏色。

添加新的屬性聲明

點(diǎn)擊符合可編輯 CSS 規(guī)則的空白區(qū)域就可以創(chuàng)建一個(gè)新的樣式，此時(shí)編輯模式適用于當(dāng)前 CSS 屬性字段，你可以出輸入一個(gè)新的屬性。

要添加新的屬性并且在 CSS 屬性字段中查看代碼提示，請(qǐng)執(zhí)行以下步驟：

• 在 CSS 屬性字段中輸入內(nèi)容，下拉框中會(huì)顯示建議。
• 按 Up 或者 Down 來(lái)選中某一條建議。
• 要接受建議使用 Tab 鍵，右鍵或者 Enter 鍵。

當(dāng)你選擇了一個(gè)有效的 CSS 屬性后，將光標(biāo)移動(dòng)到 CSS 屬性值字段以獲取可關(guān)于使用的 CSS 值的建議。例如，對(duì)于屬性 display，建議的值有 block，flex，none 等等。

使用 Ctrl + V（或者在Mac上使用 Cmd+ V）來(lái)把 CSS 粘貼到樣式面板中。屬性和其值會(huì)被解析并放到正確的字段中。

添加樣式規(guī)則

你可能會(huì)覺得在一個(gè)新的選擇器中添加樣式比較好。在樣式面板的頭欄中點(diǎn)擊加號(hào)來(lái)創(chuàng)建新的 CSS 規(guī)則。

在元素上觸發(fā)偽類

你可以使用偽類選擇器為你的 UI 元素提供動(dòng)態(tài)的樣式，比如：hover。然而，這些動(dòng)態(tài)的元素很難調(diào)試。所以 DevTools 允許你手動(dòng)為各個(gè)元素設(shè)置偽類。

你可以觸發(fā)下面四個(gè)偽類的任意組合：

• :active - 適用于激活過(guò)程中的鏈接（例如，單機(jī)前）。
• :hover - 適用于當(dāng)鼠標(biāo)懸停在元素上方時(shí)。
• :focus - 適用于獲得焦點(diǎn)的元素（比如，通過(guò) Tab 鍵來(lái)獲取焦點(diǎn)）。
• :visited - 適用于瀏覽器中已經(jīng)瀏覽過(guò)的鏈接。

如果要設(shè)置元素的狀態(tài)的話：

• 點(diǎn)擊樣式面板中 New Style Rule 旁邊的 Toggle Element State 按鈕。
• 右鍵點(diǎn)擊元素面板中的一個(gè) DOM 節(jié)點(diǎn)然后選中 Force Element State。

更改歷史記錄（本地修改）

本地修改包含了對(duì)源文件代碼，如 JavaScript 和 CSS 所做的修改。

用以下方式來(lái)找到本地修改面板：

• 打開源面板。
• 右鍵（或者在 Mac 上使用 Ctrl + 鼠標(biāo)點(diǎn)擊）點(diǎn)擊側(cè)欄中的某個(gè)源文件。
• 選擇 Local modifications。

要做出修改，在 Source 面板的編輯器里修改源代碼即可。

要對(duì)一個(gè)源自于外部樣式表的 CSS 規(guī)則做出修改，請(qǐng)注意本地修改面板中的變化。

注意：當(dāng)你使用 New Style Rule 按鈕的時(shí)候，新的 CSS 規(guī)則并不屬于已經(jīng)存在的樣式表中。DevTools 把它添加到一個(gè)特殊的監(jiān)視樣式表中，這個(gè)監(jiān)視樣式表可以像其他文件一樣在源面板中被修改。

關(guān)于本地修改面板：

• 展開頂層文件名，可以查看修改發(fā)生的時(shí)間
• 展開第二級(jí)的項(xiàng)目來(lái)查看對(duì)應(yīng)修改的不同之處（之前及之后的）。粉色背景的一行表示刪除的部分，綠色背景的一行表示添加的部分。
• 點(diǎn)擊文件名排旁邊的 revert 來(lái)撤銷掉在該文件上的全部修改。

你也可以使用 Ctrl + Z（或者在Mac上使用 Ctrl + Z）來(lái)迅速撤銷在元素面板上對(duì) DOM 或者樣式的細(xì)小改動(dòng)。

Metrics 面板

Metrics 面板直觀闡述了樣式是如何影響 CSS 盒子模型的。

Metrics 面板顯示了一組表示盒子維度的矩形，以此來(lái)表示 CSS 盒子模型。內(nèi)部的內(nèi)容框顯示內(nèi)容區(qū)域的尺寸，外部的邊框，比如邊界的邊框，表示每個(gè)邊緣的值：border-top（上邊框），border-right（右邊框），border-bottom（下邊框），and border-left（左邊框）。

如果邊緣沒有設(shè)定值，將會(huì)用破折號(hào)（英文的）來(lái)代替。

注意：如果你提供了一個(gè)非靜態(tài)的值給 CSS 位置屬性，那么 Metrics 面板中會(huì)顯示標(biāo)記的位置。

Boxes （盒子）顯示的內(nèi)容可能是（自外向內(nèi)）：

• position （位置）
• margin （邊距）
• border （邊界）
• padding （內(nèi)邊距）
• Content box （內(nèi)容盒子，最內(nèi)層，沒有標(biāo)記）

通過(guò)以下技巧來(lái)使用 metrics 面板：

• 鼠標(biāo)懸停在盒子上方來(lái)使瀏覽器窗口中相應(yīng)的區(qū)域高亮顯示。
• 編輯盒子內(nèi)的字段（如果沒有值則用破折號(hào)顯示），該更改會(huì)在 element.style 部分中反映出來(lái)。