React DevTools中Open In Editor按钮突然禁用问题求助

排查与修复步骤 #

• 确认项目source map已开启
  React DevTools依赖source map关联DOM组件与源代码，需确保项目配置正确：

  • Create React App项目：检查package.json的start命令未添加GENERATE_SOURCEMAP=false，或.env文件无该变量设置。
  • 自定义Webpack配置：将devtool设置为eval-source-map（开发环境推荐）或source-map等有效值。

• 配置VS Code的命令行关联
  确保VS Code能通过协议被调用：

  1. 打开VS Code，按Ctrl+Shift+P调出命令面板，执行Shell Command: Install 'code' command in PATH。
  2. 重启浏览器和React DevTools，验证协议关联生效。

• 检查React DevTools设置
  打开DevTools右上角齿轮图标进入设置：

  • 确认"Automatically reveal components in editor"选项已开启。
  • 确保编辑器选择为"VS Code"（若有手动选择项）。

• 验证开发服务器配置
  避免开发服务器禁用source map传递或重写文件路径：比如Webpack中不要将output.pathinfo设为false（开发环境默认值为true）。

• 清除缓存

  1. 浏览器开发者工具中，右键刷新按钮选择"清空缓存并硬性重新加载"。
  2. 在React DevTools组件树区域右键，选择"Reload DevTools"。

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