使用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调试器跟踪事件

回答

相关问题