日本大胆人体视频,久久99精品免费视频,香草草莓茄子丝瓜榴莲大全

🔧 6個 CSS 調試小技巧

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

freeflydom

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

找到所有應用了某個樣式的元素

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

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

打開開發者工具的 控制臺 / Console 面板。
復制下面這段代碼到控制臺中，把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); 
}

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

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

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

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

高亮所有匹配某條 CSS 規則的元素

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

調試 CSS 動畫

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

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

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

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

復制元素樣式

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

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

通過在每個元素的四周畫一個方框來調試頁面結構

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

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

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

找到導致某個樣式的 CSS 規則

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

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

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

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

你也可以通過點擊屬性名稱右側的按鈕來跳轉到 Styles/樣式 面板中該 CSS 規則對應的位置。

查看原文

該文章在 2023/8/28 9:52:51 編輯過

關鍵字查詢

CSS

技巧

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。