如何调试JavaScript事件？或者如何使所有函数调用都能追踪？

Question

如何调试JavaScript事件？或者如何使所有函数调用都能追踪？

26

例如有一个按钮。它被包裹在 <div> 中。当点击该按钮时，会发生 Javascript 函数调用，然后是另一个函数，并通过 ajax 调用服务器，如果一切正常，Javascript 会将此页面重定向到另一个页面。这很难调试。是否可能“捕获”此事件？也就是说，要知道在单击按钮后调用哪个函数？按钮没有属性 onclick，即事件侦听器是在 Javascript 中连接的。如果不可能，那么是否可能进行跟踪？也就是查看所有被调用的函数调用，以及接下来调用哪些函数？最好是以可视化方式呈现，虽然文本方式也可以 :)

- gennad

4个回答

1

除了被接受的答案（点赞）提到的开发者工具中可用的事件监听器之外，我想强调一个简单但潜在有用的观点。如果预期的事件未出现在列表中，那么一个替代调试器的好方法就是使用老实可靠的console.log()来找出问题所在。

作为一个实际的例子，在正确的位置记录相关的element.innerHTML帮助我直接看到了问题的原因。在对DOM进行更改后特别有帮助。

- Nagev

0

你可以使用 firebug 来追踪 javascript 代码。它是 Firefox 的插件，可以追踪样式（css）、js，并允许编辑。

Opera 提供了类似于 firebug 的工具 dragonfly。

- ArK

-2

请查看Firebug中的调试功能，它可以让您添加JavaScript断点并逐步执行代码。

- Chris Fulstow

2

这也没有回答问题。 - antinome

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- desau · Accepted Answer

是的，这种事情并不像你想的那么简单。

Google Chrome、Edge和Opera浏览器都有一个事件监听器面板。右键单击按钮，然后选择检查元素。确保选择了正确的元素，然后在右侧检查事件监听器面板。

Firefox中实现这个功能的方法不同:

检查器在HTML面板中显示与绑定到它们的事件监听器相关的单词“event”旁边的元素。单击该图标，然后将会弹出一个窗口，列出所有绑定到此元素的事件监听器。

您还可以使用debugger关键字在调用堆栈中设置断点。然后使用您喜欢的JavaScript调试器（Safari、Google Chrome和IE8内置的开发工具，Firefox的firebug）。在每个工具中，都有一个调用堆栈，可让您导航当前的调用堆栈。