Chrome开发者工具:<page context =“”>和<top frame =“”>?</top> </page>

时间:2013-09-25 20:01:53

标签: javascript google-chrome google-chrome-devtools

这些堕落有什么作用?我假设他们在不同的上下文中执行控制台命令,但是当我点击它们时,我会看到奇怪的,荒谬的选择。

Frame and context drop downs in the DevTools

1 个答案:

答案 0 :(得分:15)

让我们以Gmail为例,首先查看第一个下拉列表:

框架列表

List of frames of Gmail main page

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

上下文列表

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

List of contexts of the <top frame>

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

  

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

BTW chrome://代表扩展ID后使用它的部分网址,你可以找出注入代码的扩展名(在chrome:// extensions / page上查看'开发者模式')。

为什么我们需要它?

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