如何在Chrome DevTools中正确录制iframe的performance profile

• 打开Chrome DevTools的Performance面板，点击面板右上角的齿轮形设置按钮
• 在设置项中找到Include iframes选项并勾选，该选项默认处于未选中状态，这也是只能拿到顶层窗口数据的核心原因
• 确认Console抽屉的上下文选择器已经选中目标iframe的执行上下文
• 清除已有性能记录后点击录制按钮，复现iframe内的操作后停止录制，生成的报告就会包含iframe的完整性能数据

如果你使用的是110及以上版本的Chrome，可以使用更简单的操作：点击Performance面板录制按钮旁的下拉箭头，选择Record iframe only选项，在弹出的上下文列表中直接选中目标iframe，最终生成的性能报告只会包含该iframe的相关数据，无需额外过滤顶层窗口内容

特殊场景注意事项 #

• 如果目标iframe和顶层窗口跨域，需要先进入DevTools设置的 Experiments 页面，勾选Allow cross-origin iframe profiling实验选项，否则跨域iframe的性能数据会被浏览器默认拦截，无法正常采集
• 录制前建议点击Performance面板左上角的清除按钮清空旧数据，避免无关数据干扰分析结果

内容的提问来源于stack exchange，提问作者ribrdb