Chrome开发者工具:<页面上下文>和<顶部框架>？

Question

这些垮台做了什么？我假设他们在不同的上下文中执行控制台命令,但是当我点击它们时,我会看到奇怪的,荒谬的选择.

Answer 1

让我们以Gmail为例,首先看一下第一个下拉菜单:

框架列表

您在此处可以看到的是嵌入当前页面的所有帧.这些框架中的每一个都是沙箱.沙箱意味着从一个沙箱到其他沙箱无法访问.在一帧内执行的脚本无法访问另一帧的DOM或JS变量.这是出于安全原因,我们不希望iframe中的脚本能够访问嵌入的页面(这样可以让嵌入到博客中的广告能够读取您输入的内容或您在Cookie中保留的内容).

上下文列表

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

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

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

BTW后面的url部分chrome://代表扩展ID并使用它你可以找出注入代码的扩展名(在chrome:// extensions/page上检查'Developer mode').

我们为什么需要那个？

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