javascript - Chrome 开发工具：和?

Question

这些下拉菜单有什么作用？我假设它们在不同的上下文中执行控制台命令，但是当我单击它们时我看到了奇怪的、无意义的选择。

Answer 1

让我们以 Gmail 为例，从第一个下拉菜单开始：

帧列表

您可以在此处看到所有嵌入到当前页面的框架。这些框架中的每一个都经过沙盒处理。被沙箱化意味着无法从一个沙箱访问其他沙箱。在一帧内执行的脚本无法访问另一帧的 DOM 或 JS 变量。这是出于安全原因，我们不希望 iframe 中的脚本访问它所嵌入的页面（这将允许嵌入到博客中的广告读取您正在输入的内容或保存在 cookie 中的内容）。

上下文列表

在第二个下拉列表中，我们有选定框架的上下文列表，例如这里是 Gmail 的上下文列表<top frame>：

这些是为每个脚本创建的沙箱，这些脚本由 Chrome 扩展程序注入到所选框架（这些脚本称为“内容脚本”）。但是，这些与我之前提到的框架沙箱不同。由 Chrome 扩展注入的脚本可以无限制地访问它们被注入的页面的 DOM，但在称为隔离世界的单独 JS 执行上下文中运行（无权访问“页面创建的 JavaScript 变量或函数”）。在这种情况下，更多的是确保来自不同扩展的脚本不会相互干扰，而不是关于安全性：

独立世界允许每个内容脚本对其 JavaScript 环境进行更改，而不必担心与页面或其他内容脚本发生冲突。例如，内容脚本可以包含 JQuery v1，页面可以包含 JQuery v2，它们不会相互冲突。

顺便说一句，后面的部分 urlchrome://代表扩展 ID，使用它您可以找出注入代码的扩展的名称（检查 chrome://extensions/ 页面上的“开发人员模式”）。

为什么我们需要那个？

• 您可能希望查看console.*iframe 生成的错误/消息。
• 在调试 Chrome 扩展程序时，您可能希望查看console.*注入脚本产生的错误/消息。
• 您可能希望在不同于默认上下文的上下文中从控制台执行一些代码。