33

我在这里没有具体的用例，但有时我要么在 SO 上帮助某人，要么在网站上看到很酷的 javascript 效果，并对驱动它的代码感到好奇。但是，驱动代码的事件可能不会立即显而易见。如果我找不到事件处理程序，那么很难找到负责我感兴趣的效果的 js。调试器中是否有快速方法来识别附加到元素的事件并删除断点在什么时候开火？

因此，例如，一个事件可能存在于类似这样的结构上

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

现在我不知道事件是否绑定到 img、span、li、ul 或 div 本身。Chrome 有 Event Listeners 区域，但我觉得它并不总是包含事件。你们做了什么可以让你快速找到事件并在其中设置断点的方法吗？

4

3 回答 3

41

就在这里！

找到正在重新加载的元素并右键单击，从上下文菜单中选择检查，然后右键单击元素的 html（在底部的 firebugish 窗格中），在上下文菜单中有以下选项：

  • 中断子树修改
  • 打破属性修改
  • 节点删除中断

关于 chrome 中令人敬畏的新开发功能的文章：http: //elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

于 2011-08-14T03:02:01.503 回答
7

如果您有权访问 .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-22T06:23:48.907 回答
0

在 chrome 开发工具中右键单击该元素，然后单击 'break on' ，然后您会看到多个选择，例如子树修改。或者你也可以去 chrome//:tracing

于 2013-12-14T04:24:25.017 回答