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

Posted 2023-03-15

【中文标题】跟踪 Javascript 代码的最佳方法 [关闭]

【英文标题】：Best way to trace Javascript code [closed]

【发布时间】：2011-09-04 23:08:00

【问题描述】：

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

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

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

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

【问题讨论】：

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

【参考方案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