Chrome DevTools — Elements

1、編輯DOM

查看元素

• 頁面上的任意元素，在其上面右鍵，選擇「Inspect"

• 在Elements面板上，用鼠標手動選擇某個DOM節點

• 點擊審查元素按鈕，而後去頁面上選擇DOM

• 在console裏面使用inspect(dom)查看某一元素

導航DOM節點

使用鼠標 >>>
1.在DOM節點上單擊一次，高亮此節點
2.展開一個節點：在節點上的任意處雙擊或者單擊左邊的箭頭
3.收起一個節點：點擊左邊的箭頭

使用鍵盤 >>>
1.向上箭頭選擇此節點以前的一個節點（在Elements面板內可見的節點，有多是父節點、兄弟節點、或者兄弟節點的子節點等）
2.向下箭頭選擇此節點以後的一個節點（同上）
3.向右箭頭能夠展開一個節點，再次按向右箭頭會選擇到這個展開節點的第一個子元素，依此論推
4.向左箭頭能夠收起一個節點，再次按向左箭頭會選擇到這個收起節點的父元素，依此論推

在Elements面板的最下方是一個麪包屑路徑，當前選中的節點以藍色高亮表示，藍色高亮節點的左側是它的父節點，右側是其子節點。

編輯DOM節點和屬性

編輯一個DOM節點的名字或者屬性

• 在節點名字或屬性的上方直接雙擊

• 選擇一個節點，按Enter鍵，而後（重複）按Tab鍵，去選擇節點名字或者屬性

• 右鍵選擇「增長屬性」或者「編輯屬性」

當修改節點名字的時候，完成時，其對應的閉合標籤會自動更新

以html文本的形式編輯DOM節點及其子元素

有時候涉及到編輯的內容較多時，能夠右鍵選擇以html文本的形式編輯，方便、簡潔。

移動一個DOM節點

單擊節點不放，而後直接拖動便可

刪除一個DOM節點

在節點上面右鍵，選擇「刪除元素」

讓節點出如今當前窗口

咱們在Elements面板選擇一個元素時，這個元素可能並不在當前視窗內，此時，右鍵選擇「Scroll Into View」就能自動定位到這個節點了，至關於錨點的效果。

顯示/隱藏HTML註釋

Settings > Preferences > Elements > Show HTML comments

顯示更多操做菜單

爲了查看更多操做，咱們通常都是右鍵，實際上還有另外一個入口。在當前選擇的節點上，最左側有三個點，點擊這三個點，就能達到鼠標右鍵的效果。

關於DOM還有其餘操做，如在DOM上設置斷點、監聽DOM上綁定的事件等，這些我把它歸到js調試的內容中去了，有興趣的能夠查看下一篇《Chrome DevTools - JS調試》

2、編輯樣式

查看某個元素上的樣式

選擇一個元素，Styles窗口顯示着全部這個元素上的樣式，優先級從高到低：

• 最上面是：element.style，這些是直接寫在HTML中的行內樣式或者是在console中動態設置的

• 其次是直接匹配這個元素的css

• 而後是一些繼承的css，有從父元素繼承過來的，也有從瀏覽器默認樣式中繼承的

上圖中：
1.元素的樣式所對應的選擇器
2.瀏覽器默認的樣式，一般會被覆蓋
3.被覆蓋的樣式會有一個刪除線
4.繼承的樣式會被顯示在一個個的組裏面，其頭部爲Inherited from <NODE>
5.灰色的樣式表示未定義，可是在運行的時候會去計算相應的值

查看被某一選擇器影響的元素

在Styles面板中，把鼠標懸停在選擇器上，就能看到此選擇器對應的css應用在了哪些元素上面。

類生效與否以及增長新類

點擊.cls按鈕，能夠查看到加在當前元素上的全部類名，也能夠在輸入框中增長一個新的類名（輸入完，按Enter鍵）

編輯屬性名及屬性值

在屬性名或者屬性值上點擊便可進入編輯狀態，當某個屬性名或屬性值高亮時，按Tab鍵能夠選擇後面的屬性名、屬性值、選擇器，或者新加屬性，Shift + Tab反向。
當一個屬性值是與數字相關的時候，有一些快捷鍵：

• 上下方向鍵，±1

• Alt + 上下方向鍵，±0.1

• Shift + 上下方向鍵，±10

• Shift + Page Up/Page Down（Windows、Linux）或者Shift + Function + Up/Down（Mac），±100

增長一個新的屬性聲明

在css規則可編輯區域的空白處，單擊便可以建立一條css聲明。

增長一條css規則

單擊按鈕，便可新增一條樣式規則。單擊此按鈕不鬆，能夠選擇在哪一個樣式表中新增css規則。

查看僞類的樣式

• Elements面板中，在節點上右鍵選擇僞類

• 在Styles窗口內，點擊:hov按鈕，在複選框中選擇

快速爲元素添加字體顏色、背景色、陰影等

當鼠標懸浮在某個樣式規則上，右下角會有一個「三個點」的按鈕，鼠標移動到此按鈕上，能夠看到幾種不一樣的圖標，能夠快捷地爲元素添加不一樣的樣式。

利用顏色拾取器去修改顏色值

在某些狀況下用顏色拾取器去查看某些顏色值仍是很方便的，可是通常狀況下，頁面上的顏色值UI已經標註好，前端不須要本身再去設計，直接修改更爲方便，此部份內容不在闡述。

Shift + 單擊能夠改變顏色值的格式，如rgb、十六進制等。