跟踪 Javascript 代码的最佳方法 [关闭]答案

【问题标题】：Best way to trace Javascript code [closed]跟踪 Javascript 代码的最佳方法 [关闭]
【发布时间】：2011-09-04 23:08:00
【问题描述】：

使用任何工具调试 Javascript 代码的最佳方法是什么？我想知道当一个按钮被点击时，所有的 JS 代码被执行了什么......

我想在 Firefox 和 Safari 中测试..已经尝试过 Firebug，但想知道是否有更好的方法..

更重要的是我想知道“如何”准确地调试代码？

还可以打印我说按下按钮时调用的完整 JS 代码吗？

【问题讨论】：

我在 Firefox、Chrome 上使用 firebox ...我在 IE 上使用开发工具 ("F12")。对于 Safari，如果它可以在 Firefox 上运行......它很有可能会在 Safari 上运行......您还可以依赖框架来消除浏览器的多样性进行调试（即 jquery 等）跨度>

标签： javascript html debugging scripting firebug

【解决方案1】：

我总是使用 Google Chrome 的集成网络检查器工具（你知道，右键单击，检查元素）。它对我来说效果很好，并且具有我需要的所有功能。

【讨论】：

其次，虽然仍有一些方面 firebug 领先（网络选项卡...），但 chrome 的 javascript 调试器确实是一款很棒的软件。
在我看来，Chrome 的调试器也更加用户友好。显然还有一个适用于 Google Chrome 的 FireBug Lite：getfirebug.com/releases/lite/chrome
我想知道与原始海报相同，但 Edge 和 Chrome 中的开发工具（据我所见，完全相同）没有显示任何可能由按钮按下。如果您正在导航站点，它们将在页面上显示网络流量，任何 JS 错误到控制台，但我想看看发生某个事件时会触发什么，但我不知道可以在哪里完成。

【解决方案2】：

这篇使用 FireFox 的 FireBug 和 jQuery 的帖子可能会帮助您检测和捕获绑定到按钮的所有事件，以便您了解单击按钮时运行的 JS 代码：

How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

【讨论】：

【解决方案3】：

当然是 Chrome 开发者控制台 + Firefox Firebug（以及 IE 中的 Firebug Lite），但也可以查看 Visual Event，这是一个小书签，可以高度直观地显示附加到页面元素的事件。

【讨论】：

【解决方案4】：

嗯，我认为最好的方法是使用 Visual Studio 并将其与 Internet Explorer 挂钩。正如许多其他人指出的那样，浏览器内置工具很棒，但是 Visual Studio 允许您调试 javascript 代码并使用相同的应用程序对其进行编辑。缺点是你必须使用 Internet Explorer，但我个人认为这不是什么大问题。

【讨论】：

Internet Explorer 总是有问题：P

【解决方案5】：

Chrome 开发者控制台 + Firefox Firebug

【讨论】：