Javascript:如何单步站点初始化？

Question

简短背景:我对 Javascript 还很陌生，目前对根据我的需求定制第三方网站感兴趣 - 即为 Greasemonkey 等编写脚本。通常这些网站都充斥着 Jquery、Bootstrap 等库，这使得弄清楚它们到底是如何工作的变得更加困难。

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

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

Answer 1

如果足以让您在页面的加载事件处停止(通常在该事件之前执行一些代码)，您可以执行以下操作:

1. 切换到 HTML 面板，然后切换到事件侧面板。
2. 向下滚动到窗口的其他监听器部分

3. 右键单击“load”事件下的函数(可能旁边有一个箭头)，然后从上下文菜单中选择设置断点。

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

4. 重新加载页面。

这是该菜单的屏幕截图:

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

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