Chrome Devtools: Elements篇

演示簡介

環境

• Chrome瀏覽器
• 版本 90.0.4430.93

操做釋義

• 聚焦控制檯

  • 鼠標在控制檯範圍內點擊一下，使後續操做上下文綁定在控制檯中。

打開控制檯

以掘金爲示例講述：

經過連接打開頁面，經過F12或鼠標右鍵【檢查】打開開發者工具控制檯。

默認佈局

1. 佈局渲染

   • Render Tree的視覺表現

2. Elements面板

   • DOM Tree摺疊形式展現

3. Styles面板

   • CSSOM彙總

4. Console面板

   • 默認隱藏，鍵盤 Esc 鍵切換展示狀態

Elements面板

錨點

執行步驟

1. 選擇如圖紅色標記工具點擊掘金的頁面菜單，能夠看到Elements面板聚焦到選中展現對應的DOM結構。
2. 在對應的DOM結構後，有 $0 的特殊標識，能夠在 Console 面板直接使用 $0 引用當前選中元素

應用場景

• 檢查動態插入的DOM樹是否正確
• 檢查動態編輯的節點屬性是否正確

嵌套結構

執行步驟

1. 經過錨點工具選中某DOM元素
2. 在Elements面板底部，展示當前選中元素的祖先選擇器
3. 點擊對應的選擇器，Elements面板聚焦對應的DOM元素

應用場景

• 檢查元素嵌套關係

響應式佈局

執行步驟

1. 經過按鈕1開啓響應視圖模式
2. 自定義或使用預置視圖尺寸
3. 定義網絡狀態
4. 橫豎屏切換
5. 更多細節展現

應用場景

• Mobile H5開發：不一樣手機尺寸下的佈局適配調試
• PC Web開發：在不一樣斷點範圍內的佈局差別化展現調試
• PC & Mobile開發：不一樣視圖模式下的適配調試

Flex佈局

若是足夠仔細，能夠看到選中頁面菜單對應的DOM結構中，有一個差別化的展現形式：

執行步驟

1. 聚焦控制檯， Ctrl + P 輸入 > experiments 選中 Settings Show Experiments 回車 或 直接點擊位置2，選擇 Experiments
2. 開啓Flex調試

1. 點擊 Elements 面板中DOM結構後的 flex 標識，當前頁面渲染會高亮展現Flexbox中的子項佈局

1. 點擊 Styles 面板中對應樣式後的標識，能夠快捷修改當前Flexbox的佈局屬性

應用場景

• 檢查Flexbox佈局是否正確
• 快速調試Flexbox佈局

Styles面板

樣式來源

• 用戶代理內置的樣式

  • 瀏覽器默認樣式

• 站點開發者定義的樣式

  • 網站開發者內聯、外聯樣式

• 站點用戶指定的樣式

  • 用戶在控制檯編寫的樣式
  • 用戶經過抓包工具重定向的樣式
  • 用戶經過瀏覽器插件(如: Stylus)指定的樣式

樣式聲明

在Styles面板展示的樣式聲明是默認狀態下的聲明樣式，即頁面初始化渲染後的樣式，不包含交互狀態樣式。

Computed面板

該面板彙總瀏覽器最終應用到元素上的樣式。

鎖定交互僞類

案例場景

鼠標在掘金頁面菜單懸停時，能夠看到菜單文字樣式發生變化，如何調試懸停樣式？

執行步驟

1. 經過錨點工具聚焦當前變化的DOM節點
2. 經過Styles面板的 :hov 按鈕切換節點交互狀態
3. 便可在Styles面板查看交互狀態下的樣式

應用場景

• 調試經過僞類產生交互樣式的場景

動態修改元素樣式類名

執行步驟

1. 點擊 .cls 按鈕
2. 經過點擊class複選框動態增刪類名
3. 能夠看到刪除 active 類名時，樣式發生改變
4. 在其它同級節點上添加 active 類名，驗證猜測

應用場景

• 調試在條件邏輯場景中，經過動態增刪類名改變的樣式

用戶自定義樣式

執行步驟

1. 選中DOM元素
2. 點擊 + 按鈕
3. 在增長的選擇器後添加樣式聲明

應用場景

• 調試樣式時，編寫實驗性質的樣式聲明

DOM斷點

案例場景

Elements面板能夠查看固定/動態插入的節點，現有這樣一個場景：

在維持某交互的狀態下才會插入節點，取消該交互狀態時，刪除節點；

這時，如何覈對DOM節點的正確性呢？

案例分析

• 初始化時，浮層DOM結構並不存在 —— 不是經過樣式隱藏的結構，而是動態添加的
• 沒法經過交互僞類調試
• 浮層DOM結構在元素範圍懸浮時才展現，沒法鎖定該狀態去查看浮層結構
• 聚焦父級DOM，經過Event Listeners面板可知父級DOM綁定鼠標事件 —— 代碼邏輯生成浮層結構

執行步驟

1. 聚焦動態添加元素的直接父級DOM
2. 鼠標右鍵選中 Break on —> subtree modifications

1. 這時鼠標停留在父級節點時，會觸發斷點

1. 經過F10執行下一步，直至浮層展現出來

1. 經過錨點工具聚焦浮層結構，便可檢閱當前DOM結構的正確性

應用場景

• 調試在代碼邏輯中，經過交互事件切換DOM結構的應用場景

觸發時機

• Break on 二級菜單是複選框，意味着不一樣時機觸發斷點

• subtree modifications

  • 僅在子元素增刪時觸發斷點

• attribute modifications

  • 僅聚焦的DOM節點屬性變化時觸發斷點

• node removal

  • 僅聚焦的DOM節點被移除時觸發斷點

• subtree modifications & attribute modifications

  • 子元素改變(增刪、屬性變化)時觸發斷點

• attribute modifications & node removal

  • 聚焦的DOM節點發生變化(屬性變化、被移除)時觸發斷點

斷點管理

• DOM Breakpoints面板管理當前頁面的斷點

DOM快照

執行步驟

1. 經過錨點工具選中對應的DOM元素
2. 右鍵選擇 Capture node screenshot
3. 瀏覽器將當前DOM元素渲染結構以圖片的形式下載

應用場景

• 獲取快照

滾動到視圖範圍

執行步驟

1. 在Elements面板選擇一個視窗內不可見的DOM元素
2. 右鍵選擇 Scroll into view
3. 瀏覽器將滾動頁面直至當前DOM元素出如今視窗內