如何让Chrome Angular Dev Tools定位跨源iframe中的开发态Angular应用？

以下是几个可行的方案，帮你让Angular Dev Tools定位到iframe内的开发模式应用：

1. 切换Chrome Dev Tools的上下文到目标iframe #

Chrome开发者工具支持直接切换到iframe的执行上下文，让Angular Dev Tools优先识别该iframe内的应用：

• 打开Chrome开发者工具（F12），切换到Angular DevTools标签
• 在DevTools顶部的域名下拉菜单中，选择你的https://localhost:4200对应的iframe选项（如果没显示，先刷新页面）
• 选择后，Angular DevTools会重新检测该iframe内的Angular应用，只要你的应用是开发模式构建的，就能正常加载

2. 强制标记iframe环境为开发模式 #

如果切换上下文后还是无法识别，可以手动在iframe的控制台中设置开发模式标记：

• 打开Chrome开发者工具的Console标签
• 在Console顶部的上下文下拉菜单中，选择https://localhost:4200的iframe
• 执行以下代码：

  window.ngDevMode = true;
  

• 刷新iframe页面，再切换到Angular DevTools标签，即可正常识别

3. 绕过跨源限制（如果第三方网站有CSP/X-Frame限制） #

如果第三方网站的安全策略阻止了iframe的调试，可以临时用Chrome的启动参数绕过：

• 关闭所有Chrome窗口
• 在Chrome的快捷方式属性中，修改目标路径，添加启动参数：

  --disable-web-security --user-data-dir="C:/ChromeDevSession"
  

  （注意：C:/ChromeDevSession是临时用户数据目录，避免影响正常浏览器会话）
• 启动Chrome后打开第三方网站，此时iframe的跨源限制会被解除，再按前面的方法切换上下文即可

关键注意事项 #

• 确保你的应用是开发模式构建：用ng serve启动的默认就是开发模式，不要添加--prod或--configuration production参数
• 操作完成后，记得恢复Chrome的正常启动参数，避免安全风险

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