在客户端调试 Javascript答案

【问题标题】：Debugging Javascript on the client在客户端调试 Javascript
【发布时间】：2013-01-17 04:52:14
【问题描述】：

我是一个 JS 菜鸟，想成为一个 JS 怪物，这意味着大量的调试。

我正在使用 Chrome 调试器工具。摆在我面前的是一大堆意大利面条式的 JS 代码，看起来像是要破译的达芬奇的代码。我需要调试它并了解正在发生的事情。本质上，我想找出 .js 文件中的哪个函数在特定事件上被调用。为此，我设置了 'Event Listener Breakpoints' 以记录任何鼠标单击事件。当我点击有问题的按钮时，这就是我得到的：

如您所见，调试器确实暂停了相应 jQuery 函数上的脚本，该函数即将在这一轮事件中执行。不幸的是，这对于所有基于 jQuery 的函数来说都是非常通用的，并且对事情没有多大帮助。我真正感兴趣的是我的 JS 文件中触发 jQuery 函数的函数，而不是 jQuery 库中调用的函数。

插图：

$('#myButton').live('click', function(){
$('#popUpMenu').close();
});

这是调试浏览器事件的正确方法吗？如果这还不够清楚，请让我详细说明。

【问题讨论】：

如果您的函数触发了 jQuery 函数，您应该能够通过堆栈跟踪向后导航到您的函数（顺便说一句。您的调用堆栈在哪里）。但在我看来，jQuery 函数已经注册并被浏览器调用。

标签： javascript jquery debugging browser google-chrome-devtools

【解决方案1】：

您可以从漂亮的 JavaScript 代码开始：

【讨论】：

【解决方案2】：

考虑到你还是个菜鸟，我建议不要使用 JQuery 的最小化 (.min.js) 版本（或任何其他 javascript 文件）。通过这种方式，您可以逐行调试并在单个语句上放置断点。

仅建议在生产环境中使用最小化代码，以减少文件的加载时间/带宽。在开发过程中，明智的做法是使用完整（尽管速度较慢）版本。

您可以在http://code.jquery.com/jquery-1.9.0.js下载它

【讨论】：

如果我知道正在调用哪个函数，那么设置断点是有意义的。在这种情况下，JS 文件有点神秘，这就是我设置鼠标单击事件断点然后单击所需按钮的原因。有意义吗？
在这种情况下，您可能需要在自己的 JS 文件中设置断点以查看它们何时被调用。另一种不使用断点的方法是使用 console.log("message goes here"); 编写一些日志消息。您想监控的任何地方。

【解决方案3】：

嗯，首先，您需要确保您的来源是正确的。现在，您正在查看缩小的 Jquery 库。查看源上方的选项卡列表吗？这会显示你所在的脚本文件。

你需要选择正确的文件（你的），然后你可以通过点击最左边的边距来添加一个断点。

使用左上角的小三角形（看起来像 [>]）查看所有加载的源代码。

【讨论】：

是的，我知道它显示了 jQuery 缩小版和其他 js 文件也存在。只有当我知道在鼠标单击按钮上调用了哪个函数时，添加断点才有意义。我的 JS 很神秘，所以我不知道，这就是为什么我要设置调试器来记录鼠标单击事件，然后单击按钮。