0

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

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

调试客户端点击

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

插图：

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

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

4

3 回答 3

3

You can start by pretty-fying that JavaScript code:

enter image description here

于 2013-02-01T19:38:29.247 回答
2

考虑到您仍然是新手，我建议不要使用 JQuery 的最小化 (.min.js) 版本（或任何其他 javascript 文件）。这样，您可以逐行调试并在单个语句上放置断点。

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

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

于 2013-02-01T19:40:51.147 回答
0

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

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

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

于 2013-02-01T19:40:56.070 回答