How to debug iframes with chrome developer tools

8 个月前提问

4 个月前修改

浏览次数208次

6个答案

在使用Chrome开发者工具（DevTools）调试iframe时，主要步骤如下：

打开Chrome DevTools： 您可以通过在Chrome浏览器中按 F12键，或者点击浏览器右上角的三个点选择“更多工具”然后点击“开发者工具”来打开DevTools。
定位到iframe元素： 在Elements面板中，可以通过DOM树状结构寻找到 <iframe>标签。如果页面中iframe较多，可能需要一些时间来定位。也可以利用DevTools顶部的元素选择工具（点击左上角的图标或按 Ctrl + Shift + C）来快速选中页面上的iframe。
审查iframe内容： 选中iframe元素后，右键点击并选择“Show as tab”。这样会在Elements面板中打开一个新的标签页，显示被选中的iframe的DOM结构。在这个新标签页中，您可以像审查常规的HTML元素一样来审查和修改iframe的内容。
使用Console面板与iframe交互： 在Console面板中，您可以通过 frames数组访问各个iframe的window对象。例如，frames[0]代表第一个iframe的window对象。您可以执行JavaScript代码来与iframe内部的脚本交互。
调试JavaScript： 如果要调试iframe中的JavaScript代码，您可以在Sources面板中找到iframe的JavaScript文件。在文件中设置断点，然后通过与网页交互或者触发事件来激活断点，之后就可以逐行调试代码。
网络请求分析： 在Network面板中查看iframe加载期间的网络请求。您可以过滤显示仅限于iframe的请求，这样就可以分析iframe的资源加载情况、网络延迟等问题。
性能分析： 使用Performance面板来分析iframe中网页的加载和运行性能。您可以记录一个性能会话然后分析各种事件，例如JavaScript的执行时间、样式的计算、布局的重排等。
跨域iframe调试： 如果iframe内容是从另一个域加载的，可能会因为同源策略受到限制。在这种情况下，如果您有权限，可以在服务器端设置CORS（跨源资源共享）策略来允许调试。否则，您只能调试在同一源（即相同的协议、域名和端口）上加载的iframe。

举个例子，假设您正在开发一个集成了多个第三方服务的仪表盘，每个服务都通过一个独立的iframe来加载。您可能需要调试其中一个服务的登录流程，这时您可以通过上述步骤来打开DevTools，选择相应的iframe标签，然后在Sources面板中设置断点来观察登录过程中触发的函数调用和变量状态。

使用Chrome开发者工具调试iframe时，耐心和细心是非常重要的。确保您有适当的权限和访问控制，特别是在处理跨域iframe时。

2024年6月29日 12:07 回复

在 Chrome 的开发者工具中，顶部有一个栏，称为Execution Context Selector(h/t felipe-sabino )，位于“元素”选项卡下方，该栏根据当前选项卡的上下文而变化。在“控制台”选项卡中时，该栏中有一个下拉列表，允许您选择控制台将在其中运行的框架上下文。在此下拉列表中选择您的框架，您将发现自己处于适当的框架上下文中。：D

铬 v59

Chrome 版本 59

铬 v33

Chrome 版本 33

Chrome v32 及更低版本

Chrome 32 之前版本

2024年6月29日 12:07 回复

目前，控制台中的评估是在页面主框架的上下文中执行的，并且它遵循与主框架本身相同的跨域策略。这意味着除非主框架可以访问 iframe 中的元素，否则您无法访问。不过，您仍然可以使用“脚本”面板设置断点并调试代码。

**更新：**这不再是真的。请参阅Metagrapher 的回答。

2024年6月29日 12:07 回复

当 iFrame 像这样指向您的网站时：

shell
<html>
  <head>
    <script type="text/javascript" src="/jquery.js"></script>
  </head>
  <body>
    <iframe id="my_frame" src="/wherev"></iframe>
  </body>
</html>

你可以通过这种东西访问iFrame DOM。

shell
var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));

2024年6月29日 12:07 回复

在我相当复杂的场景中，关于如何在 Chrome 中执行此操作的公认答案对我来说不起作用。您可能想尝试使用 Firefox 调试器（Firefox 开发人员工具的一部分），它显示所有“源”，包括那些属于 iFrame 的部分

2024年6月29日 12:07 回复

在使用Chrome开发者工具（DevTools）调试iframe时，主要步骤如下：

打开Chrome DevTools： 您可以通过在Chrome浏览器中按 F12键，或者点击浏览器右上角的三个点选择“更多工具”然后点击“开发者工具”来打开DevTools。
定位到iframe元素： 在Elements面板中，可以通过DOM树状结构寻找到 <iframe>标签。如果页面中iframe较多，可能需要一些时间来定位。也可以利用DevTools顶部的元素选择工具（点击左上角的图标或按 Ctrl + Shift + C）来快速选中页面上的iframe。
审查iframe内容： 选中iframe元素后，右键点击并选择“Show as tab”。这样会在Elements面板中打开一个新的标签页，显示被选中的iframe的DOM结构。在这个新标签页中，您可以像审查常规的HTML元素一样来审查和修改iframe的内容。
使用Console面板与iframe交互： 在Console面板中，您可以通过 frames数组访问各个iframe的window对象。例如，frames[0]代表第一个iframe的window对象。您可以执行JavaScript代码来与iframe内部的脚本交互。
调试JavaScript： 如果要调试iframe中的JavaScript代码，您可以在Sources面板中找到iframe的JavaScript文件。在文件中设置断点，然后通过与网页交互或者触发事件来激活断点，之后就可以逐行调试代码。
网络请求分析： 在Network面板中查看iframe加载期间的网络请求。您可以过滤显示仅限于iframe的请求，这样就可以分析iframe的资源加载情况、网络延迟等问题。
性能分析： 使用Performance面板来分析iframe中网页的加载和运行性能。您可以记录一个性能会话然后分析各种事件，例如JavaScript的执行时间、样式的计算、布局的重排等。
跨域iframe调试： 如果iframe内容是从另一个域加载的，可能会因为同源策略受到限制。在这种情况下，如果您有权限，可以在服务器端设置CORS（跨源资源共享）策略来允许调试。否则，您只能调试在同一源（即相同的协议、域名和端口）上加载的iframe。

使用Chrome开发者工具调试iframe时，耐心和细心是非常重要的。确保您有适当的权限和访问控制，特别是在处理跨域iframe时。

2024年6月29日 12:07 回复

How to debug iframes with chrome developer tools

6个答案

你的答案