javascript - Chrome 开发工具 : and ?

Question

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

Answer 1

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

帧列表

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

上下文列表

在第二个下拉列表中，我们有所选帧的上下文列表，例如这是 Gmail 的上下文列表 <top frame> :

这些是为每个脚本创建的沙箱，这些脚本由 Chrome 扩展注入(inject)到选定的框架(这些脚本称为“content scripts”)。但是，这些与我之前提到的框架沙箱不同。 Chrome 扩展注入(inject)的脚本可以无限制地访问它们被注入(inject)页面的 DOM，但在称为孤立世界 的单独 JS 执行上下文中运行(不能访问“JavaScript 变量或函数创建的这一页”)。在这种情况下，更多的是确保来自不同扩展的脚本不会相互干扰，而不是安全问题:

Isolated worlds allow each content script to make changes to its JavaScript environment without worrying about conflicting with the page or with other content scripts. For example, a content script could include JQuery v1 and the page could include JQuery v2, and they wouldn't conflict with each other.

BTW chrome:// 之后的部分 url代表扩展程序 ID，使用它您可以找出注入(inject)代码的扩展程序的名称(检查 chrome://extensions/页面上的“开发人员模式”)。

我们为什么需要它？

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