如何調試CSS/Javascript懸停問題

我經常發現自己希望調試CSS佈局問題，這些CSS佈局問題涉及Javascript引起的DOM更改，以響應懸停事件或由於懸停選擇器而應用的不同CSS規則。如何調試CSS/Javascript懸停問題

通常情況下，我會使用Firebug檢查給我麻煩的元素，看看它的CSS屬性是什麼，以及這些屬性來自哪裏。但是，當涉及懸停時，它變得不可能，因爲只要將鼠標移動到Firebug面板，您感興趣的元素就不再徘徊，所應用的CSS規則就會不同，並且（在這種情況下JS懸停）DOM被改變。

有什麼辦法可以「凍結」DOM的狀態和應用：懸停以檢查DOM，因爲它是期間懸停事件？

當然，歡迎任何關於如何調試這類問題的其他想法。

來源

2009-07-03 Jason Creighton

可怕的時刻，當你移動你的光標對在螢火蟲的文本，但它消失。 – 2012-12-28 21:42:40

轉到信息源選項卡 - >懸停在任何東西上 - >按F8鍵 - 它會「凍結」你的屏幕，這樣你就可以看到什麼發生在DOM中，當你徘徊 – 2015-09-15 08:34:34

將onmouseover函數處理函數添加到正在採用:hover的元素。在該函數內部，請致電console.info(element)，無論您想了解哪些元素。

myHoverElement.onmouseover = function() { 
    console.info(document.getElementById("someotherelementofinterest")); 
};

當您使用螢火蟲激活時運行此元素將可用於在螢火蟲控制檯中檢查。

來源

2009-07-03 21:08:31

這很好，你提到的「信息」讓我看起來第一次在Firebug控制檯API中，我發現還有「console.dir」（DOM屬性轉儲）和「console.dirxml」（HTML源代碼樹轉儲）。不幸的是，它沒有解決準確顯示問題現場視圖可以應用哪些CSS規則，但也許我希望太多。 – 2009-07-03 21:23:01

我發現Neum的方法更簡單，更實用。 – 2010-08-18 03:04:17

是的，我也是 - 但在原來的問題和答案這個功能不存在於螢火蟲:) – 2011-04-11 19:37:24

對CSS的問題，我覺得web開發插件寶貴：

http://chrispederick.com/work/web-developer/

加載它，那麼你有2個可能的工具，在您的處置。

從任何鼠標懸停元件上的文件
繼承的CSS，使用移位CTRL-Y
計算的CSS（incuding任何內嵌樣式=施加不在.css文件 - 或通過.css方法從jquery等） - 按shift-ctrl -f

後者也將返回應用於該元素的所有類。

，當然它也有其他偉大的用途，例如，形式精湛的調試，包括

來源

2009-07-03 22:35:07

我有同樣的問題，並發現隱藏字段和cookie（可用於滲透測試）的編輯，雖然我無法使用Firebug檢查Firefox中的懸停對象，Safari的Web Inspector會凍結當前狀態並允許檢查。要激活Safari的網絡督察剛進入下面一行到終端，並重新啓動Safari瀏覽器：

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

激活懸停元素在瀏覽器中，然後點擊右鍵並選擇「檢查元素」。該頁面將凍結在當前狀態，允許您檢查短暫的對象以查看您心中的內容。

來源

2010-02-23 09:19:09

你可以在Firebug中做到這一點，但它有點「越野車」。如果你檢查元素，然後點擊html標籤，例如DOM標籤，當你回到html標籤時，右邊的「style」css標籤會有一個箭頭下拉選擇器，你可以在其中選擇：懸停該元素的狀態爲活動狀態。吮吸不得不切換標籤來讓它顯示，但它適用於我。

來源

2010-04-21 19:51:56 Neum

在firebug中沒有完美的解決方案（mouseover/hover-simulation effect）。

然而，有一對夫婦方式螢火編輯您的懸停狀態：

下添加:active狀態，伴隨着你的:hover

a:hover, a:active { ... }

如果你的鼠標在你的元素，拖出並釋放，它仍然活躍。
打開:hover狀態轉變爲.hover類

您可以通過點擊源文件（在Firebug的樣式選項卡）

然後，當然，你會添加編輯CSS規則（和刪除）元素中的.hover類。