调试 JavaScript 匿名函数

Question

我正在试图逆向工程一个微软CRM 2011网页。该页面加载了大量的脚本和HTML。我目前的开发重点是页面上复选框元素的单击事件。单击该元素会导致页面行为发生变化，我想走过处理此事件的代码。

问题在于，复选框的单击处理程序是通过匿名方法在页面加载时添加的。所以代码已经存在，但要找到它就像大海捞针一样困难。

是否有一种技术可以使用Internet Explorer调试工具，在单击复选框时使调试器停止？可能没有，但我想问一下。

- John Livermore

---

你可以在点击处理程序的代码块中设置断点。至于捕获实际的点击事件... 没有头绪。 - Marc B

你能给出你想要检查和复制的页面链接吗？ - Devin Rhode

Answer 1

看起来你没有办法修改与复选框点击事件相关联的匿名函数。如果不行，也许你可以创建第二个事件处理程序，但要在现有事件处理程序的定义之前定义。

浏览器中的事件处理程序通常按照它们被定义的顺序触发。参见http://jsfiddle.net/aroder/kkYfX/2/。如果你定义了自己的事件处理程序，它将为你提供一个地方，在接近你尝试步进的匿名函数的位置上附加调试器。

此外，使用调试器语句自动中断你的代码。如果你使用IE，请确保在“工具”>“选项”>“高级”>“禁用脚本调试（Internet Explorer）”下取消勾选选项。

<script>
  // the debugger statement will automatically break in IE dev tools, Firebug, and Chrome dev tools
  debugger;
</script>

- Adam Roderick

Answer 2

你最好的选择是在控制台中运行以下命令：

document.getElementById('theCheckBoxId').onclick

如果在控制台中出现null，你可以继续阅读。否则，点击事件处理程序及其代码应该会直接出现在控制台中。

---

使用Chrome的开发工具: 右键单击页面上的某个内容->检查元素。你会看到这个：

转到“源”（不再称为“脚本”），并找到像屏幕截图中看到的‘||’暂停按钮。如果页面没有失败，您可以勾选复选框，因为脚本已暂停，您将看到匿名函数的代码变为高亮显示，页面将被冻结。然后，您可以使用工具逐步执行代码。

但是，我们肯定可以更好地帮助您了解您实际想要从页面中获取的内容...

您还可以使用控制台附加onbeforescriptexecute事件： https://developer.mozilla.org/en/DOM/element.onbeforescriptexecute 您可以在控制台中输入类似以下内容：

document.getElementById('theCheckBoxId').onbeforescriptexecute = function (e) {
  alert('hey same thing as pausing the script!');
  console.error('script with this id about to run: ' + e.target.id);
  //Could also try .src .innerText etc. 
  //Reference this: https://developer.mozilla.org/en/DOM/element.onbeforescriptexecute

  //the full argument to checkout in the console:
  console.error(e);
};

你还可以尝试使用currentScript方法进行调试: https://developer.mozilla.org/en/DOM/document.currentScript 你也可以右键点击并检查复选框，然后在开发者工具的右侧面板查看'Click'事件监听器代码，但通常这很混乱且难以使用。

- Devin Rhode

---

我可能错了，但是微软动态客户关系管理系统（Microsoft Dynamics CRM）可能只能在Internet Explorer中运行。如果是这样的话，你该如何进行调试？ - icktoofay

那是我不确定的一件事...如果它是一个网页，你肯定应该能够检查一些东西...我想他们使用Jscript（微软的JavaScript版本...）所以这可能是一个障碍。 - Devin Rhode

Answer 3

老版本的 IE 在调试 AJAX 应用程序时非常糟糕。Firebug 是我见过的最好的工具。它允许您使用自己的 JavaScript 函数来替换现有的函数。这就是我的建议。

1. 在 Firefox 中打开 Web 应用程序
2. 复制现有函数的源代码
3. 格式化代码，并在想要停止和检查变量的位置添加以下语句：
4. debugger;
5. 将新代码粘贴到 Firebug 的控制台窗口中，然后点击“运行”即可！

- RHT

---

要复制现有函数的源代码，您需要运行我上面提到的命令 document.getElementById('checkBoxId').onclick，它应该输出到控制台。如果函数被命名，您会看到 theFuncName();，您可以使用开发工具搜索它。 - Devin Rhode

是的，那也可以，你可以在Firebug中点击Finder箭头，它会直接带你到HTML组件，然后你就可以从那里找到脚本。 - RHT

哦，在DOM检查选项卡中吗？我不记得有看到过...你是指onclick属性对吧？ - Devin Rhode

是的，我能够在DOM检查器选项卡中看到onclick属性。 - RHT