Javascript：如何单步初始化网站？

Question

背景简介：我对 Javascript 还很陌生，目前有兴趣根据我的需要定制第三方网站——即为 Greasemonkey 等编写脚本。通常这些网站都充斥着 Jquery、Bootstrap 等库，这使得弄清楚它们的工作原理变得更加困难。

当我分析一个新网站并想知道执行了哪些代码时，我可以使用 Firebug 创建断点或观察点，然后单步执行代码。但是，这不适用于在网站首次加载时已经运行的代码。我如何单步完成这部分？基本上，我正在寻找一种在执行第一个 Javascript 代码之前设置断点的方法。

如果有比 Firebug 更好的工具，我愿意接受建议。请记住，我不控制网站，所以更改网站的代码是不可能的。

Answer 1

如果您在页面的加载事件处停下来就足够了（通常一些代码会在该事件之前执行），您可以执行以下操作：

1. 切换到 HTML 面板，然后切换到 Events 侧面板。
2. 向下滚动到 Window 的其他侦听器部分

3. 右键单击“加载”事件下的函数（可能是旁边带有箭头的函数），然后从上下文菜单中选择设置断点。

   注意：可能有一个 'DOMContentLoaded' 事件处理程序，它在 'load' 事件之前被调用。因此，如果存在，请在该函数处设置断点。

4. 重新加载页面。

这是该菜单的屏幕截图：

如上所述，通常在触发 'load' 事件之前已经执行了一些代码，例如加载库或初始化一些全局变量。尽管据我所知，Firebug（或其他浏览器开发工具）中没有选项可以在第一个执行的 JavaScript 语句处停止脚本执行。 但是在该行设置断点通常仍然很容易。它只需要一些手动搜索：

1. 在 Script 面板中，从 Script Location Menu（左起第三个工具栏按钮）中选择名为 Inline 的第一个脚本。
2. 搜索第一行 JavaScript，或者，如果没有内联 JavaScript，则从 脚本位置菜单中选择第一个 <script> 元素内的脚本。
3. 在脚本的第一行设置断点。
4. 重新加载页面。