Chrome浏览器下iframe内的React应用无法使用React DevTools如何解决？

React DevTools支持iframe内应用调试操作方案 #

快速生效方案（无需编译） #

• 打开Chrome扩展管理页chrome://extensions/，开启右上角开发者模式
• 找到React DevTools扩展，进入「详情」页，在「站点访问」设置中选择「所有站点」，同时记下扩展ID
• 进入Chrome扩展本地存放目录：
  • Windows路径：C:\Users\你的用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions\
  • macOS路径：~/Library/Application Support/Google/Chrome/Default/Extensions/
• 进入对应扩展ID的文件夹，再进入当前版本号子目录，找到manifest.json文件打开编辑
• 在JSON根配置下添加"all_frames": true，保存后回到扩展管理页刷新React DevTools扩展即可生效

注意：Chrome自动更新扩展后该配置会被重置，需要重新操作。

永久生效方案（自行编译） #

如果不想每次更新后重新修改，可手动编译自定义版本：

• 拉取react-devtools源码，进入packages/react-devtools-extensions目录
• 找到对应浏览器的manifest配置模板，添加"all_frames": true到根配置项
• 执行官方构建命令完成打包，在build目录下生成编译好的扩展包
• 回到Chrome扩展管理页，点击「加载已解压的扩展程序」，选择打包生成的对应浏览器目录即可

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