🔧 6個(gè) CSS 調(diào)試小技巧
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
找到所有應(yīng)用了某個(gè)樣式的元素如果你想找到頁面中所有絕對(duì)定位的元素，或者是所有使用了 一種方法是在控制臺(tái)中運(yùn)行幾行簡(jiǎn)單的 JS 代碼，遍歷所有的元素并檢測(cè)他們的
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); }
var whatToFind = { property: "display", values: ["grid", "inline-grid"] }; 如果你不想每次都復(fù)制這段代碼到控制臺(tá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)畫的屬性。具體的使用方法如下： 打開控制臺(tái)的命令菜單（ 接下來，觸發(fā)一個(gè)網(wǎng)頁中的動(dòng)畫并在工具中錄制它。Animations 工具從上到下包括了四個(gè)部分：
復(fù)制元素樣式你可以通過 Copy styles 功能來一次性獲取一個(gè)元素的所有樣式，不需要在 Styles 面板中查看某個(gè)元素所有的 CSS 規(guī)則，然后手動(dòng)地搜集其樣式。通過這個(gè)功能，你可以直接獲取被應(yīng)用到一個(gè)元素上的所有樣式，具體方法如下：
通過在每個(gè)元素的四周畫一個(gè)方框來調(diào)試頁面結(jié)構(gòu)
這時(shí)頁面中所有元素的輪廓就都顯示出來了！
找到導(dǎo)致某個(gè)樣式的 CSS 規(guī)則想象這樣一個(gè)場(chǎng)景：你知道某個(gè)樣式被應(yīng)用于你的網(wǎng)頁中的某個(gè)元素，例如內(nèi)邊距，但你找不到是哪些 CSS 代碼導(dǎo)致的。 這在大型項(xiàng)目中非常常見，在這類項(xiàng)目中，通常會(huì)有一堆 CSS 規(guī)則被應(yīng)用于你正觀察的這個(gè)元素。 一種解決這個(gè)難題的方法是使用 Computed 面板：
你也可以通過點(diǎn)擊屬性名稱右側(cè)的按鈕來跳轉(zhuǎn)到 Styles/樣式 面板中該 CSS 規(guī)則對(duì)應(yīng)的位置。
該文章在 2023/8/28 9:52:51 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
