javascript - Debugger.getScriptSource 如何工作？

Question

我正在尝试运行 chrome 调试器来收集经过去混淆处理的 JavaScript，但它会为脚本返回大量 block 。我想知道 chrome 是如何将一个 JavaScript 文件分成多个 block 的？一段脚本到底是什么？

我知道对于每个脚本文件、脚本标签和 eval() 函数，都会创建单独的 block 。我只想查明创建 block 的所有可能情况。例如，lazy parsing还为某些功能创建 block ？

如果有人能指出一些关于该过程如何工作的文档，那就太好了。

Chrome debugging protocol API used

Answer 1

Debugger.scriptParsed 事件是生成 scriptId 的原因对于找到的每个脚本。解析的每个脚本文件都会触发事件，并且应该收到一个唯一的 ID。除了单独的脚本文件，<script> 的每个实例页面源中的标签也将获得自己的 ID。

事件回调会传递许多参数。您可以通过注销 arguments 检查所有参数目的。例如，您将获得 url返回脚本文件和 startLine为您提供 <script> 的偏移量出现在 HTML 资源中的标签。

on('Debugger.scriptParsed', function() {
    console.log(JSON.stringify(arguments, null, 2)(
});

调查

针对您更新的问题，我的理解是，在调试器模式下，它将尝试进行完整解析，而不是尝试使用预解析进行优化。我无法真正理解 v8 代码库，但我做了一些测试。

我创建了一个带有按钮的 HTML 页面和一个单独的脚本文件。我在页面加载后立即执行了一个功能。另一个功能在点击按钮时执行。

document.addEventListener("DOMContentLoaded", () => {
    document.getElementById('clickMe').addEventListener('click', () => clicked);
});

我检查了 Debugger.scriptParsed 的输出.它立即解析脚本文件。单击按钮后，没有其他输出条目。如果我更改处理程序以调用 clicked使用 eval 动态调用，它确实输出了一个新的脚本 block 。

eval('clicked()');

这是有道理的，因为解析器在执行之前无法知道它。这同样适用于内联处理程序，例如onclick="doSomething()"

我注意到的其他 block 是 Chrome 扩展 URI 和来自 chrome 的内部 URI。