Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

檢查和編輯頁面與樣式

使用 Chrome DevTools 的 Elements 面板檢查和實時編輯頁面的 HTML 與 CSS。

Chrome DevTools 的 Elements 面板

TL;DR

  • 在 Elements 面板中檢查和實時編輯 DOM 樹中的任何元素。
  • 在 Styles 窗格中查看和更改應用到任何選定元素的 CSS 規則。
  • 在 Computed 窗格中查看和修改選定元素的框模型。
  • 在 Sources 面板中查看在本地對頁面所做的更改。

實時編輯 DOM 節點

要實時編輯 DOM 節點,只需雙擊選定元素,然後進行更改:

DOM 樹視圖會顯示樹的當前狀態;可能會與最初因其他原因加載的 HTML 不匹配。 例如,您可以使用 JavaScript 修改 DOM 樹;瀏覽器引擎會嘗試修正無效的作者標記並生成意外的 DOM。

實時編輯樣式

Styles 窗格中實時編輯樣式屬性名稱和值。所有樣式均可修改,除了灰色部分(與 User Agent 樣式表一樣)。

要編輯名稱或值,請點擊它,進行更改,然後按 TabEnter 保存更改。

編輯屬性名稱

默認情況下,您的 CSS 修改不是永久的,重新加載頁面時更改會丟失。 如果您想要在頁面加載時保留更改,請設置永久製作

檢查和編輯框模型參數

使用 Computed 窗格檢查和編輯當前元素的框模型參數。 框模型中的所有值均可修改,只需點擊它們即可。

Computed 窗格

同軸矩形包含當前元素 paddingbordermargin 屬性的 topbottomleftright 值。

對於位置爲非靜態的元素,還會顯示 position 矩形,包含 toprightbottomleft 屬性的值。

非靜態計算元素

對於 position: fixedposition: absolute 元素,中心域包含選定元素實際的 offsetWidth × offsetHeight 像素尺寸。所有值都可以通過雙擊修改,就像 Styles 窗格中的屬性值一樣。 不過,無法保證這些更改能夠生效,因爲這要取決於具體的元素定位詳情。

固定計算元素

查看本地更改

要查看對頁面所做實時編輯的歷史記錄,請執行以下操作:

  1. Styles 窗格中,點擊您修改的文件。DevTools 會將您帶到 Sources 面板。
  2. 右鍵點擊文件。
  3. 選擇 Local modifications

要探索所做的更改,請執行以下操作:

  • 展開頂級文件名查看做出修改的時間 做出修改的時間
  • 展開第二級項目查看修改相應的不同(前和後)。

粉色背景的線表示移除,綠色背景的線表示添加。

撤消更改

如果您未設置永久製作,每次您重新加載頁面時,所有的實時編輯都會丟失。

假設您已設置了永久製作,要撤消更改,請執行以下操作:

  • 使用 Ctrl+Z (Windows) 或 Cmd+Z (Mac) 通過 Elements 面板快速撤消對 DOM 或樣式所做的細微更改。

  • 要撤消對文件所做的所有本地修改,請打開 Sources 面板,然後選擇文件名旁的 revert