天堂…中文在线最新版在线,亚洲精品国产一区二区

🔧 6個 CSS 調(diào)試小技巧

當前位置：點晴教程→知識管理交流 →『技術(shù)文檔交流』

freeflydom

2023年8月28日 9:46 本文熱度 1955

找到所有應(yīng)用了某個樣式的元素

如果你想找到頁面中所有絕對定位的元素，或者是所有使用了Grid布局的元素，你會怎么做呢？

一種方法是在控制臺中運行幾行簡單的 JS 代碼，遍歷所有的元素并檢測他們的computedStyle來過濾出我們需要的元素。具體如下：

打開開發(fā)者工具的 控制臺 / Console 面板。
復(fù)制下面這段代碼到控制臺中，把whatToFind對象改成你所需要過濾的樣式。在這個例子中我們找的是所有絕對定位的元素。

var whatToFind = {
  property: "position",
  values: ["absolute"]
};

var walker = document.createTreeWalker(
  document.documentElement,
  NodeFilter.SHOW_ELEMENT,
  el => {
    const style = getComputedStyle(el)[whatToFind.property];
    return whatToFind.values.includes(style)
      ? NodeFilter.FILTER_ACCEPT
      : NodeFilter.FILTER_SKIP;
  }
);

while (walker.nextNode()) {
  console.log(walker.currentNode); 
}

按下回車鍵，控制臺就會打印出網(wǎng)頁中所有的絕對定位元素，如圖所示：

如果你想找到所有使用了 grid 布局的元素，把whatToFind改成下面這樣就可以：

var whatToFind = {
  property: "display",
  values: ["grid", "inline-grid"]
};

如果你不想每次都復(fù)制這段代碼到控制臺中，可以把這段代碼保存到開發(fā)者工具的 Snippets 中。

高亮所有匹配某條 CSS 規(guī)則的元素

如果你想知道除了當前選中的元素之外某條 CSS 規(guī)則還被應(yīng)用到了哪些元素上，只要把鼠標 hover 在那條 CSS 規(guī)則上面一定的時間就可以看到了。

調(diào)試 CSS 動畫

現(xiàn)代瀏覽器為調(diào)試和修改 CSS transitions 和動畫提供了很方便的工具。我們不僅可以利用這些工具查看和調(diào)試動畫，還能在其中直接修改動畫的屬性。具體的使用方法如下：

打開控制臺的命令菜單（Cmd+Shift+P 或 Ctrl+Shift+P），輸入 "Show Animations"，按下回車鍵，就可以打開 Animations 工具了。

接下來，觸發(fā)一個網(wǎng)頁中的動畫并在工具中錄制它。Animations 工具從上到下包括了四個部分：

控制 / Controls：在這個部分，你可以清除所有當前錄制的動畫，或者控制當前播放動畫的速度。
概覽 / Overview：在這里可以選擇某個動畫，從而在 詳情 / Details 面板中對其進行修改。
時間線 / Timeline：在這里可以開始和暫停某個動畫，或者跳轉(zhuǎn)到動畫中特定的時間點。
詳情 / Details：查看和修改當前選中的動畫，可以增加動畫的延遲或者修改動畫的持續(xù)時間。

復(fù)制元素樣式

你可以通過 Copy styles 功能來一次性獲取一個元素的所有樣式，不需要在 Styles 面板中查看某個元素所有的 CSS 規(guī)則，然后手動地搜集其樣式。通過這個功能，你可以直接獲取被應(yīng)用到一個元素上的所有樣式，具體方法如下：

在網(wǎng)頁中找到你想要獲取樣式的元素，右鍵點擊它，然后在菜單中選擇 Inspect / 檢查。
在開發(fā)者工具 Elements / 元素 面板中，右鍵點擊被選中的元素。
在彈出的菜單中，選擇 Copy/復(fù)制 > Copy Styles/復(fù)制樣式。
把復(fù)制的文本粘貼到代碼編輯器或者其他你想要的地方。

通過在每個元素的四周畫一個方框來調(diào)試頁面結(jié)構(gòu)

* { outline: 1px solid red; } 是一個簡單但很強大的調(diào)試小技巧，可以用來幫助你了解頁面的結(jié)構(gòu)，找到溢出的 bug 以及元素布局錯誤的原因。具體的方法如下：

打開開發(fā)者工具的 元素 / Elements 面板
點擊 樣式 / Styles 側(cè)邊欄中的 + 號
給通配符選擇器 * 添加一條規(guī)則 * { outline: 1px solid red; }

這時頁面中所有元素的輪廓就都顯示出來了！

找到導致某個樣式的 CSS 規(guī)則

想象這樣一個場景：你知道某個樣式被應(yīng)用于你的網(wǎng)頁中的某個元素，例如內(nèi)邊距，但你找不到是哪些 CSS 代碼導致的。

這在大型項目中非常常見，在這類項目中，通常會有一堆 CSS 規(guī)則被應(yīng)用于你正觀察的這個元素。

一種解決這個難題的方法是使用 Computed 面板：

打開開發(fā)者工具，在 Elements / 元素 面板選擇你感興趣的元素。
打開側(cè)邊欄中的 Computed 面板。
在列表中搜尋你感興趣的 CSS 屬性，例如padding-bottom。
點擊屬性名稱左側(cè)的箭頭展開詳情，查看導致這個屬性值的 CSS 規(guī)則。
點擊最右側(cè)的鏈接，跳轉(zhuǎn)至對應(yīng) CSS 規(guī)則在代碼中的具體位置，在 Chrome 中這會把你帶到 Sources/源代碼 面板。