使用Chrome javascript调试程序跟踪事件

Question

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

因此,例如,事件可能存在于类似的结构上

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

现在我不知道事件是否绑定到img,span,li,ul或div本身.Chrome有"事件监听器"区域,但我觉得它并不总是包含事件.你们做的任何事情都可以让你快速找到事件并给它留下一个断点？

Answer 1

就在这里!

找到正在重新加载的元素并右键单击,从上下文菜单中选择inspect,然后右键单击元素的html(在底部firebugish窗格中),在上下文菜单中有以下选项:

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

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

Answer 2

如果您有权访问.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/为更多.