Javascript Chrome开发工具:<;页面上下文>;及<;顶部框架>;?

Javascript Chrome开发工具:<;页面上下文>;及<;顶部框架>;?,javascript,google-chrome,google-chrome-devtools,Javascript,Google Chrome,Google Chrome Devtools,这些下拉列表的作用是什么?我假设它们在不同的上下文中执行控制台命令,但当我单击它们时,我会看到奇怪的、荒谬的选择 让我们以Gmail为例,从第一个下拉列表开始: 帧列表 这里可以看到嵌入到当前页面中的所有框架。每个框架都是沙盒。被沙盒意味着一个沙盒无法访问其他沙盒。在一个框架内执行的脚本无法访问另一个框架的DOM或JS变量。这是出于安全原因,我们不希望iframe中的脚本能够访问它嵌入的页面(这将允许嵌入博客的广告读取您正在键入的内容或您保存在cookie中的内容) 上下文列表 在第二个下拉列

这些下拉列表的作用是什么?我假设它们在不同的上下文中执行控制台命令,但当我单击它们时,我会看到奇怪的、荒谬的选择


让我们以Gmail为例,从第一个下拉列表开始:

帧列表

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

上下文列表 在第二个下拉列表中,我们有所选框架的上下文列表,例如,这里是Gmail的上下文列表

“>

这些是为Chrome扩展注入到所选框架的每个脚本创建的沙盒(这些脚本称为“”)但是,这些与我之前提到的框架沙盒不同。Chrome扩展注入的脚本可以无限访问它们注入到的页面的DOM,但可以在称为隔离世界的单独JS执行上下文中运行(不能访问“页面创建的JavaScript变量或函数”)。在这种情况下,更重要的是确保来自不同扩展的脚本不会相互干扰,而不是安全性:

孤立世界允许每个内容脚本对其内容进行更改 JavaScript环境,而无需担心与 页面或其他内容脚本。例如,内容脚本 可以包括jQueryV1,页面可以包括jQueryV2,它们 不会互相冲突

顺便说一句,
chrome://
后面的url部分表示扩展ID,使用它,您可以计算出注入代码的扩展的名称(在chrome://extensions/ 第页)

我们为什么需要这个?
  • 您可能希望看到iframe生成的错误/
    控制台。*
    消息
  • 调试Chrome扩展时,您可能希望看到注入脚本产生的错误/
    控制台。*
    消息
  • 您可能希望在不同于默认上下文的上下文中从控制台执行一些代码