Firebug：如何檢查隨鼠標移動而變化的元素？

有時我需要檢查只有在某個區域放置鼠標時才顯示在頁面上的元素。問題是，如果您開始將鼠標移動到螢幕控制檯以查看更改，則會觸發鼠標移出事件，並且我嘗試檢查的所有更改都會消失。如何處理這種情況？Firebug：如何檢查隨鼠標移動而變化的元素？

基本上我找的東西，要麼：

切換到螢火蟲控制檯無需移動鼠標（使用鍵盤快捷鍵也許，但我無法弄清楚如何使用Firebug與鍵盤而已？）
有能力「凍結」頁面，以便您的鼠標移動不再觸發任何事件。

感謝。

來源

2009-11-04 serg

我想你也可以這樣做：

選擇Firebugs檢查模式
將鼠標懸停在彈出你希望檢查，然後使用標籤元素的項目關鍵的幾個次螢火蟲活躍（我發現很難看到什麼時候Firebug是活動組件，但沒有像試驗和錯誤 - 當我看到Firefoxes Find工具欄被激活時，我會然後Shift + Tab向後兩次進入Firebug。
然後，我使用L/R箭頭鍵來縮小/擴大元素和U/d箭頭鍵Firebugs控制檯

爲我工作反正導航！

來源

2010-01-20 07:03:26 Meerkatlookout

感謝TAB提示，這就是我一直在尋找的。只是它還不完美，我不能使用鍵盤在螢火蟲標籤之間切換，也無法編輯CSS屬性和內容。我想螢火蟲只是沒有良好的鍵盤導航。 – serg 2010-01-20 07:30:27

如果頁面上有表單，則滾動位置更改時不起作用。 – Keyo 2010-07-20 04:35:36

查看Stefan的回答。 – RayLoveless 2012-03-09 20:56:47

您可以在mouseout事件處理程序的開始插入一個斷點。它的代碼在你繼續執行之前不會被執行，並且你可以在執行停止時使用DOM檢查器等等。

來源

2009-11-04 17:33:54 NickFitz

如果JS太複雜以致無法確定它被觸發的位置怎麼辦？ – serg 2009-11-04 17:36:28

然後啓動firebug分析器，觸發mouseover，停止分析器並嘗試縮小觸發事件處理器的位置 – mkoryak 2009-11-04 17:38:44

安裝FireQuery插件，您將獲得Handler與HTML，點擊它將獲得一個事件的函數。 – Brij 2010-12-02 08:00:41

HTML工具提示（螢火蟲）

選擇與該檢查器或在DOM元素。轉到螢火蟲中的「樣式」選項卡，然後單擊選項卡上的小箭頭並選擇「：hover」（也可用「：active」）。狀態將保持「懸停」狀態，您可以選擇其他元素使其懸停。

HTML工具提示（Firefox的開發者工具）

單擊該按鈕可看到三個複選框，你可以用它來設置的：hover，：active和：focus僞類的所選元素

該功能還可以從在HTML視圖彈出菜單訪問。

如果設置了這些僞類的節點之一，橙色點出現在標記視圖旁邊的是已經應用了僞類的所有節點：

的JQuery提示

打開控制檯，然後輸入jQuery('.css-class').trigger('mouseover')

常規的JavaScript工具提示

打開控制檯，然後輸入document.getElementById('yourId').dispatchEvent(new Event('mouseover'));

來源

2011-08-30 05:19:39 Stefan

我一直在使用Firebug多年，並且讓它變得非常有用。謝謝！ – kasperwf 2013-02-22 10:42:53

@serg，選定的答案應該更改爲這個。 – 2013-11-20 17:40:05

+11

'：hover' firebug css狀態不會觸發javascript懸停事件。只需使用'jQuery（'.css-class'）。trigger（'mouseover'）'並且不需要破解任何東西。 – machineaddict 2014-07-07 09:03:02

在Firebug的樣式面板有一個下拉菜單，你可以選擇:active或:hover狀態。

enter image description here

來源

2012-06-30 07:08:14

這應該被接受。非常感謝你！ :) – Tream 2015-04-09 13:11:21

我已經進入網頁設計多年，這個提示只是改變了我的生活。謝謝，大起來！ – INElutTabile 2015-06-30 12:41:31

的jQuery UI提示，我終於建立了元素的隱藏很長的延遲，所以我有時間去檢查它纔會刪除。例如，我用這個來檢查提示：

$(document).tooltip({ hide: {duration: 100000 } });

代替：

$(document).tooltip();

來源

2013-06-10 10:57:31

簡單天才！ – Constanta 2013-06-13 09:48:43

我發現鉻確實工作有點不同於火狐。特別是，當在菜單外點擊鼠標時關閉的菜單在Chrome（並且在檢查它們時用Firebug檢查它們時檢查它們時）檢查它們時保持打開狀態。所以建議是嘗試在不同的瀏覽器中使用不同的開發工具，以查看它是否有所作爲。

來源

2013-10-25 16:26:27 Amiramix

同意。當您需要編輯懸停菜單時，Chrome比Firebug更有用。 – DawnPaladin 2014-08-28 16:16:19

Firebug的熱鍵用於檢查的元件是Ctrl鍵 + 移 + Ç（視窗/ Linux）的。

請點擊此處查看所有Firebug keyboard shortcuts的列表。

來源

2013-10-27 16:26:11

對於引導提示：

$(document).tooltip({delay: { show: 0, hide: 100000 }});

來源

2014-01-20 08:51:47 jpprade

而在CSS菜單中選擇:hover可能是好的，如果你只是要檢查一些CSS代碼，它不會，如果任何你想檢查使用改變工作JavaScript的。

在這種情況下，一個簡單的黑客攻擊就是在另一個窗口（Firebug欄的右上角）打開Firebug，而不是將鼠標移動到所需位置，然後從瀏覽器窗口中拖放某些內容。現在您可以檢查Firebug窗口中的任何內容。只要不要將鼠標移回瀏覽器窗口。

來源

2014-11-02 10:42:45 jpath

對於Javascript事件如鼠標懸停在上。

打開Firebug /檢查一個元素。
在鼠標懸停事件（例如，鼠標懸停）之前點擊元素。點擊一個div。它會變成藍色以顯示它被選中。
把你的鼠標移過元素和不要移動它從這一點出發。
使用您↑/↓箭頭鍵在Firebug操縱。
使用您←/→箭頭鍵膨脹/收縮代碼+或 - 。
雙擊選項卡進入CSS窗格。
使用箭頭鍵導航。使用移位和箭頭鍵選擇文本。 Ctrl & C複製。
保持移和雙擊標籤要回的HTML窗格。

來源

2015-01-27 15:27:53 Eoin

打開控制檯：

如果您有基於JavaScript的提示，找到控制檯應用元素與適當的選擇。如下所示，並確認你能夠通過選擇器找到合適的元素。

$('your selector')

在上面寫上javascript並按回車。你將有元素列表。

現在例如如果庫添加的事件上的mouseenter輸入下面的腳本：

$('your selector').mouseenter()

按回車鍵。

這種方式可以模擬鼠標移動事件，而不需要真正的鼠標。並且可以使用實際的鼠標指針在調試器工具中調查東西。

來源

2015-02-19 11:02:47 yogs

這是一個非常古老的問題，但我找到了一個答案，直接回答了「凍結瀏覽器」部分的問題。

Control + Alt + B.這是「break on mutate」。也就是說，當你將鼠標懸停在一個有螢火蟲的元素上時（Control + Shift + C），當HTML屬性發生改變時，他們會碰到一個斷點，讓你可以輕鬆導航以檢查路徑等。

來源

2015-12-04 05:05:26

您也可以在計時器上啓動調試器。輸入以下命令到控制檯：

setTimeout(function(){ debugger; }, 10000);

這會給你10秒內使用鼠標，使頁面看起來你想要的方式，以檢查它。調試器啓動時，頁面將凍結，您將能夠瀏覽開發人員工具選項卡中的元素，而不會更改DOM或響應任何其他鼠標事件。

來源

2016-06-20 19:36:55 Casey

Firebug：如何檢查隨鼠標移動而變化的元素？

回答

相關問題