调试到 javascript 匿名函数

Question

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

问题是复选框的点击处理程序是在页面加载期间通过匿名方法附加的。所以代码在那里，但试图找到它是要求人们在大海捞针中找到一根针。

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

Answer 1

最好的办法是在控制台中运行它：

document.getElementById('theCheckBoxId').onclick

如果null出现在控制台中，你可以继续阅读。否则，onclick 处理程序及其代码应出现在控制台中。

---

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

转到“SOURCES”（不再称为“Scripts”）并且有一个“||”如您在屏幕截图中看到的暂停按钮。如果页面没有失败，您可以选中复选框，并且由于脚本已暂停，您将看到匿名函数的代码被突出显示并且页面将被冻结。然后，您可以使用这些工具单步执行代码。

但是，我们当然可以更好地帮助您从页面中获得真正想要的内容...

您还可以从控制台使用附加 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

您也可以右键单击并检查复选框，然后在开发工具的右侧面板上查看“单击”事件侦听器代码，但这通常是乱码且难以处理。

Answer 2

听起来您无法修改与复选框单击事件相关的匿名函数。如果没有，也许您可​​以创建第二个事件处理程序，但在现有事件处理程序的定义之前定义它。

浏览器中的事件处理程序通常按照定义的顺序触发。见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>

Answer 3

旧版本的 IE 特别是在调试 AJAX 应用程序时非常糟糕。 Firebug 是我见过的最好的。它允许您用自己的替换现有的 javascript 函数。这是我的建议。

1. 在 Firefox 中打开 Web 应用程序
2. 复制现有函数的源代码
3. 对其进行格式化并将以下语句添加到函数中您希望它停止并检查变量的位置。
4. debugger;
5. 将新代码粘贴到 Firebug 的控制台窗口中，然后单击 Run .. 就是这样！