Chrome开发工具：< page context>和< top frame&gt ;? [英] Chrome Dev Tools: <page context> and <top frame>?

问题描述

这些下降是做什么的？我假设他们在不同的上下文中执行控制台命令，但是当我点击它们时，我看到了奇怪的，无意义的选择。

.com / YiwmE.pngalt =DevTools中的框架和上下文下拉菜单>

解决方案

让Gmail成为例如，首先看第一个下拉列表：

框架列表

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

上下文列表

在第二个下拉列表中，我们列出了所选框架的上下文列表，例如以下是Gmail的上下文列表< top frame> ： $ b

这些是为每个脚本创建的沙箱这是由Chrome扩展插入选定的框架（这些脚本被称为'内容脚本'）。但是，这些与我之前提到的框架沙盒不同。 Chrome扩展程序注入的脚本无限制地访问它们被注入到的页面的DOM，但是在独立的JS执行上下文中运行，该上下文称为 isolated world （不能访问由JavaScript变量或由这一页）。在这种情况下，更重要的是确保来自不同扩展的脚本不会互相干扰而不是安全：

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

BTW chrome：// 后面的部分网址代表扩展名，并使用它可以计算出注入的扩展名代码（在chrome：// extensions / page上检查'Developer mode'）。

b

• 您可能想要查看由iframe生成的错误/ console。* 。


• 在调试Chrome扩展时，您可能希望看到您的注入脚本产生的错误/ console。*
。

• 希望在不同于默认值的环境中执行一些代码。

What do these drop downs do? I assume they execute console commands in different contexts but I see weird, nonsensical choices when I click them.

解决方案

Lets take Gmail as an example and start by looking at the first drop down:

List of frames

What you can see here are all frames that are embedded into the current page. Each of these frames is sandboxed. Being sandboxed means that there is no access from one sandbox to the other sandboxes. Scripts executed inside one frame can't access DOM or JS variables of the other frame. This is due to security reasons, we don't want a script inside an iframe to have access to the page it was embedded in (this would allow e.g. ads embedded into a blog to read what you are typing or what you keep in your cookies).

List of contexts

In the second drop down we have list of contexts for selected frame e.g. here is a list of contexts for Gmails <top frame>:

These are sandboxes created for each script that was injected by Chrome extension to the selected frame (these scripts are known as 'content scripts'). However, these are different from the frame sandboxes that I've mentioned before. Scripts injected by Chrome extensions have unlimited access to the DOM of the page they were injected to but operate in a separate JS execution context called isolated world (don't have access to "JavaScript variables or functions created by the page"). In this case it's more about making sure that scripts from different extensions don't interfere with each other than about the security:

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 Part of the url after chrome:// represents extension ID and using it you can figure out the name of the extension that injected the code (check 'Developer mode' on the chrome://extensions/ page).

Why do we need that?

• You may want to see errors / console.* messages generated by an iframe.
• While debugging your Chrome extension you may want to see errors / console.* messages that your injected script have produced.
• You may want to execute some code from console in context different than the default one.

这篇关于Chrome开发工具：< page context>和< top frame&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！