能否在基于React JS的Tauri桌面应用中使用React Developer Tools？

一、直接在Tauri桌面应用中启用React Dev Tools #

完全可以在Tauri应用内使用React Dev Tools，针对不同Tauri版本操作如下：

Tauri v2 #

1. 打开项目根目录的tauri.conf.json，确保tauri > devtools配置为true：

{
  "tauri": {
    "devtools": true
  }
}

2. 启动Tauri开发服务后，打开应用内置开发者工具（快捷键Ctrl+Shift+I（Windows/Linux）或Cmd+Opt+I（Mac）），在扩展面板中添加React Dev Tools即可，操作流程和Chrome浏览器中安装扩展一致，安装完成后就能直接查看组件树、状态等信息。

Tauri v1 #

v1版本需要额外安装官方插件来支持：

1. 安装插件依赖：

npm install @tauri-apps/plugin-devtools

2. 在src-tauri/src/main.rs中初始化插件：

fn main() {
  tauri::Builder::default()
    .plugin(tauri_plugin_devtools::init())
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

3. 启动应用后打开开发者工具，添加React Dev Tools扩展即可正常使用。

二、配置本地服务器让浏览器前端调用Rust后端 #

如果想在浏览器中运行前端的同时调用Tauri的Rust后端，可按以下步骤配置：

1. 配置Tauri跨域权限
   在tauri.conf.json的tauri > allowlist > http中，将本地前端服务器的域名（比如http://localhost:3000）加入scope数组，并开启相关权限：

{
  "tauri": {
    "allowlist": {
      "http": {
        "scope": ["http://localhost:3000/*", "http://localhost:1420/*"],
        "request": true
      }
    }
  }
}

2. 配置前端代理转发请求
   将前端项目中调用后端的API请求转发到Tauri开发服务器端口（默认1420）：

• 若使用Vite，在vite.config.js中添加：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:1420',
        changeOrigin: true
      }
    }
  }
})

• 若使用Create React App，在package.json中添加：

"proxy": "http://localhost:1420"

3. 确保后端API兼容跨域
   如果你的Rust后端是通过Tauri命令或自定义API handler实现的，只要在allowlist中配置了正确的域名范围，Tauri会自动处理基础的跨域响应头，无需额外手动配置。

完成以上配置后，浏览器中的前端就能正常调用Rust后端接口，同时你可以直接在浏览器中使用React Dev Tools调试组件。

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