久草亚洲视频,久久亚洲精品23p,尻逼久久

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

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

freeflydom

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

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

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

一種方法是在控制臺(tái)中運(yùn)行幾行簡(jiǎn)單的 JS 代碼，遍歷所有的元素并檢測(cè)他們的computedStyle來(lái)過(guò)濾出我們需要的元素。具體如下：

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

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); 
}

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

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

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

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

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

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

調(diào)試 CSS 動(dòng)畫

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

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

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

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

復(fù)制元素樣式

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

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

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

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

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

這時(shí)頁(yè)面中所有元素的輪廓就都顯示出來(lái)了！

找到導(dǎo)致某個(gè)樣式的 CSS 規(guī)則

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

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

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

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