使用Chrome瀏覽器的JavaScript調試器跟蹤事件

我沒有一個特定的用例，但偶爾我一直在幫助SO上的人或在網站上看到一個很酷的JavaScript效果，並對驅動它的代碼感到好奇。但是，驅動代碼的事件可能不會立即顯而易見。如果我找不到事件處理程序，那麼可能很難找到負責我感興趣的效果的js。調試器中是否有一種快速方法來識別附加到元素的事件並刪除斷點在什麼時候發生火災？使用Chrome瀏覽器的JavaScript調試器跟蹤事件

因此，例如，一個事件可以在結構上存在的東西，像這樣

<div> 
    <ul> 
    <li><span><img /></span></li> 
    </ul> 
</div>

現在我不知道是否該事件被綁定到IMG，跨度，李，UL或DIV本身。 Chrome有Event Listeners區域，但我覺得它並不總是包含事件。你們所做的任何事情都可以讓你快速找到事件並在其中放置一個斷點？

來源

2011-08-14 mrtsherman

是的！

發現，然後從上下文菜單中檢查正在被重新加載的元素，然後右鍵單擊，然後用鼠標右鍵單擊該元素的HTML（在底部firebugish窗格），在上下文菜單中有選項：

上的子樹

斷裂修改上的屬性的修改
斷裂
斷裂

文章真棒新開發的功能在Chrome： http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

來源

2011-08-14 03:02:01 Matthew

愛鏈接的文章！ –

+1真棒。難道你不想討厭你使用了多年的工具而只能接受它嗎？大聲笑。 – cbmeeks

儘管我看到提問者已經接受了這個答案，但是當我第一次看到這個問題時，我的印象是他正在尋找類似於Firebug中的「日誌事件」，它將事件記錄到控制檯，即使對於沒有處理程序的元素使用JS明確附加（包括其子元素具有它們的元素）。我還沒有發現任何類似的Chrome，Firebug Lite Chrome擴展也沒有。有誰知道另一種選擇？ – ack

如果您有機會獲得.js文件，只需添加「調試器;」在自己的路線上。每當Chrome（或FF）擊中時，它都會觸發調試器並讓您通過。如果你有一些一般的想法，哪些代碼將觸發事件，則ESP非常有用。有關更多信息，請參閱http://beerpla.net/2009/12/17/how-to-make-firebugs-javascript-debugger-break-inside-dynamic-javascript-using-the-debugger-keyword-ie-chrome-too/。

來源

2012-01-22 06:23:48 BrianFreud

調試器！真棒..我需要一段時間回到動態JS .. – ppumkin

右鍵單擊chrome dev工具中的元素，然後單擊'break on'，然後您會看到多個選項，如子樹修改。或者你也可以去鉻//：跟蹤

來源

2013-12-14 04:24:25

使用Chrome瀏覽器的JavaScript調試器跟蹤事件

回答

相關問題