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

編輯樣式以及 DOM

簡介

元素（Elements）面板使你可以瀏覽當前頁面的結構化信息，在如今的應用中，為初始頁面載入服務的 HTML 標記不一定是你在文檔對象模型（DOM）樹中看到的那樣。在調試以及創(chuàng)建網頁的時候，實時展示頁面樣式將會是非常有用的功能。

你可以使用元素面板來完成多種工作：

• 檢查網頁的 HTML 和 CSS 元素
• 測試不同的布局
• 實時編輯 CSS

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

• 關掉你不常用的面板。
• 調整 DOM 樹和側欄之間的分隔線。

DOM

DOM 樹窗口展示了當前頁面的 DOM 結構。DOM 樹實際上是由 DOM 節(jié)點構成的一棵樹，并且每個節(jié)點都表示一個 HTML 元素，比如body 標簽和 p 標簽。為了閱讀的便捷性，DOM 樹窗口使用 HTML 元素標簽來代替 DOM 節(jié)點，例如，用p標簽來代替 HTMLParagraphElement。

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

• 你可能使用 Javascript 修改了 DOM 樹。
• 瀏覽器引擎可能嘗試著修復無效的標簽，因而產生和預期不符的 DOM 樹。

審查元素

審查元素界面會展示的 負責呈現的元素顯示在瀏覽器中的 DOM 節(jié)點和 CSS 樣式表。

審查元素的方式有多種：

• 使用右鍵點擊頁面上的任何元素，然后選擇Inspect Element。

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

• 點擊 DevTools 窗口頂部的 Inspect Element button，隨后會進入審查元素模式，然后選擇元素。

• 在控制臺中使用 inspect() 方法，比如inspect(document.body)。關于如何使用 inspect 請參考Command-Line API

使用鼠標或鍵盤來定位 DOM 元素

你可以使用鼠標或者鍵盤在 DOM 結構中進行定位。

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

展開一個節(jié)點的時候會自動選中它的第一個孩子節(jié)點，因此你可以通過多次按右鍵來展開一個深度嵌套的結構。

在你定位的時候，元素面板會在底部顯示瀏覽路徑：

當前選中的節(jié)點用藍色高亮顯示，在該結構上向下定位會展開尾部：

沿著結構向上定位則會移動高亮部分：

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

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

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

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

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

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

更新內存中的 DOM 樹并不會修改源文件，重新加載頁面的時候會 DOM 樹上的全部更改都會消失。

編輯 DOM 節(jié)點

對于 DOM 節(jié)點，雙擊它可以打開元素標記（H2,section,img）?，F在，該字段是可以編輯并且能重命名的，重命名后關閉標簽就會自動更新標簽信息。

編輯屬性

對于 DOM 屬性，DevTools 會區(qū)分屬性名和屬性值，點擊這些元素相應的部分來進入編輯狀態(tài)。

• 雙擊屬性名來編輯屬性名，這個過程是和屬性值無關的。

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

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

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

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

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

如果想像 HTML 一樣來編輯 DOM 節(jié)點及其子節(jié)點：

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

使用可編輯域來完成你的修改。

• 點擊可編輯域以外的地方來完成對 DOM 節(jié)點的修改

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

移動元素

你可以在元素面板中重新排列 DOM 樹節(jié)點來測試頁面在不同布置下的狀況。

在元素面板中拖動節(jié)點來將它移動到 DOM 樹中的其他位置。

刪除元素

使用以下技巧來刪除 DOM 節(jié)點：

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

你也可以在 Edit as HTML 菜單刪除相應標簽來刪除元素。

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

在視圖中滑動到相應位置

當你的鼠標懸停在一個 DOM 節(jié)點或者選中了一個 DOM 節(jié)點時，在瀏覽器主窗口中渲染的相應元素就會高亮顯示。如果該元素在屏幕之外顯示，瀏覽器窗口的邊緣會有一個提示告訴你，選中的元素在屏外之外。

如果想將屏幕滑動至元素出現在屏幕上為止，右鍵點擊該元素并選擇 Scroll into View。

設置 DOM 斷點

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

當你不確定 JavaScript 腳本的哪一部分會更新給定元素的時候，你可以使用 DOM 斷點來調試復雜的 JavaScript 應用。

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

子樹的修改

當一個子元素添加，刪除或移動時，將會觸發(fā)子樹修改斷點。例如，如果在 ‘main-content’ 元素上設置子樹修改斷點，下面的代碼會觸發(fā)斷點：

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

//修改元素的子樹

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

element.appendChild( mySpan );

屬性修改

當元素的屬性（class,id,name）動態(tài)發(fā)生變化時，會出現屬性修改：

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

// 元素的 class 屬性被修改

element.className = 'active';

節(jié)點移除

當問題提及的節(jié)點從 DOM 中移除時，將觸發(fā)節(jié)點移除修改：

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

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

• 用戶在搜索框中輸入數據，輸入框尺寸發(fā)生變化。
• 用戶在搜索框上設置了一個屬性修改斷點。
• 用戶繼續(xù)在搜索框中輸入數據，觸發(fā)了斷點，并且停止執(zhí)行。
• 用戶鼠標懸停在 JavaScript 變量上方，相應變量的詳細信息會展示出來。

元素和源面板都包含了一個管理 DOM 斷點的面板。

要查看你的 DOM 斷點，點擊斷點旁邊的擴展箭頭以顯示斷點面板。對于每個斷點，其元素標識符和斷點類型都會顯示出來。

你可以通過以下幾種方式來和斷點進行交互：

• 在元素標示符上懸停以顯示元素在頁面中相應的位置（和在元素面板中的節(jié)點上懸停是類似的效果）。
• 點擊一個元素，可以跳轉到它在元素面板中的位置。
• 切換復選框來啟用或者禁用斷點。

當你觸發(fā) DOM 斷點時，這個斷點會在 DOM 斷點面板中高亮顯示。調用棧面板會顯示調試器暫停的原因：

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

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

事件監(jiān)聽器器面板中的頂級項目會顯示已注冊監(jiān)聽器監(jiān)聽的事件類型。

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

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

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

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

• 當前選中的元素。
• 當前選中元素的祖先節(jié)點。

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

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

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

樣式

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

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

如果想了解更多，請參照 W3C 關于級聯和繼承的文檔：http://www.w3.org/TR/CSS2/cascade.html

樣式面板

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

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

上圖中用數字標記的在下面有相應的解釋。

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

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

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

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

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

使用快捷鍵 Ctrl + 點擊（或者在Mac上用 Cmd + 點擊） 樣式面板中的 CSS 屬性或者屬性值，可以定位到他們在源碼中的位置，并切換到源代碼面板。

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

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

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

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

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

點擊 CSS 屬性的名稱來編輯其名稱：

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

默認情況下，你對 CSS 做出的更改都是暫時的，重新加載頁面的時候所有修改都會復原。想要自定義相關行為，可以參考 <a href=""">WorkSpace

當編輯一個屬性值為數字的 CSS 時，你可以使用以下的快捷鍵來增加或者減少 CSS 屬性的數值：

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

使用顏色選擇器

你可以通過使用顏色選擇器來把某個顏色修改或者設置為當前頁面樣式面板中已經存在的顏色。

添加新的屬性聲明

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

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

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

當你選擇了一個有效的 CSS 屬性后，將光標移動到 CSS 屬性值字段以獲取可關于使用的 CSS 值的建議。例如，對于屬性 display，建議的值有 block，flex，none 等等。

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

添加樣式規(guī)則

你可能會覺得在一個新的選擇器中添加樣式比較好。在樣式面板的頭欄中點擊加號來創(chuàng)建新的 CSS 規(guī)則。

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

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

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

• :active - 適用于激活過程中的鏈接（例如，單機前）。
• :hover - 適用于當鼠標懸停在元素上方時。
• :focus - 適用于獲得焦點的元素（比如，通過 Tab 鍵來獲取焦點）。
• :visited - 適用于瀏覽器中已經瀏覽過的鏈接。

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

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

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

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

用以下方式來找到本地修改面板：

• 打開源面板。
• 右鍵（或者在 Mac 上使用 Ctrl + 鼠標點擊）點擊側欄中的某個源文件。
• 選擇 Local modifications。

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

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

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

關于本地修改面板：

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

你也可以使用 Ctrl + Z（或者在Mac上使用 Ctrl + Z）來迅速撤銷在元素面板上對 DOM 或者樣式的細小改動。

Metrics 面板

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

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

如果邊緣沒有設定值，將會用破折號（英文的）來代替。

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

Boxes （盒子）顯示的內容可能是（自外向內）：

• position （位置）
• margin （邊距）
• border （邊界）
• padding （內邊距）
• Content box （內容盒子，最內層，沒有標記）

通過以下技巧來使用 metrics 面板：

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