怎么在谷歌浏览器中审查和调试弹出的iframe跨域子窗口？

还有个小坑：如果iframe的外层容器设置了display: none（常见于模态框），Chrome 115+可能会直接跳过它的资源加载，导致Network面板看不到请求，Elements中iframe内容也是空的。解决办法很简单——确保iframe在首次挂载时至少具备可见尺寸，或者visibility: visible。

切换DevTools执行上下文到目标iframe

在DevTools右上角，找到当前上下文名称（默认显示“top”或页面标题），点开下拉菜单，里面会列出所有已加载的iframe，名称格式类似https://xxx.com/xxx.html @ iframe#id或about:blank @ iframe。选中你要调试的那个。

切换之后，Elements面板会立即刷新成该iframe的DOM树；在Console输入document.location.href会返回iframe的实际地址；Sources面板也会自动加载它的JS文件（前提是同源或已启用调试权限）。

⚠️ 如果下拉菜单里找不到目标iframe，说明它还没完成导航（比如src为空、重定向没结束），或者被sandbox属性隔离了（比如sandbox="allow-scripts"但缺了allow-same-origin）。

强制启用跨域iframe调试（需重启浏览器）

⚠️ 这个模式下所有扩展会被禁用，不能拿它日常上网，只适合本地调试。每次启动都必须指定独立的user-data-dir，否则iframe上下文可能加载不出来。

对动态生成的iframe进行断点捕获

有时候iframe是动态创建的，比如点击按钮后才生成，常规手段抓不住。可以在Sources面板左侧文件树顶部点击Page → 展开后找到Content scripts或Snippets → 新建一个snippet（比如叫“wait-iframe”）。

粘贴以下代码，右键Run：

const observer = new MutationObserver(() => {
  const iframe = document.querySelector('iframe[src*="target-domain.com"]');
  if (iframe && iframe.contentWindow) {
    debugger;
  }
});
observer.observe(document.body, { childList: true, subtree: true });

然后触发iframe弹出的操作 → 当debugger断点命中时，立即在右上角上下文菜单中切换到该iframe，这时它已经挂载，可以正常调试了。

关键点是：必须在iframe创建后、src导航开始前捕获，否则会错过初始化时机。如果iframe用的是srcdoc，匹配条件要改成iframe.getAttribute('srcdoc')。

验证iframe是否支持postMessage调试桥接

如果不想关闭安全限制，可以在顶层页面Console里执行：
document.querySelector('iframe').contentWindow.postMessage({type:'debug-ping'}, 'https://target-domain.com');

如果子窗口监听了message事件并响应，说明通信通道畅通。这时可以在子窗口JS里主动注入调试钩子：
window.addEventListener('message', e => { if (e.data.type === 'debug-init') debugger; });

这种方式不用关闭web security，适合生产环境临时诊断。但前提是子窗口代码可控，或者已经预埋了调试接口。