IntelliJ IDEA中JavaScript调试断点失效问题求助

1. 修正Vite配置与端口设置 #

别强行让Rails和Vite共用3000端口，这会导致端口冲突（后启动的服务根本无法正常运行），正确配置是让Vite做请求代理：

• 打开vite.config.js/vite.config.ts，添加或确认以下配置：

  export default defineConfig({
    server: {
      sourcemap: true, // 必须开启，否则IDEA无法映射源码断点
      port: 5173, // Vite默认端口，与Rails的3000端口区分开
      proxy: {
        '/': {
          target: 'http://0.0.0.0:3000',
          changeOrigin: true,
          ws: true // 支持WebSocket，避免热重载和调试连接中断
        }
      }
    }
  })
  

2. 配置IDEA的JavaScript调试会话 #

• 打开IDEA的「Run/Debug Configurations」，新增「JavaScript Debug」配置：
  • URL填写http://localhost:5173（对应Vite的服务端口）
  • 勾选「Allow unsigned certificates」（如果使用HTTPS协议）
  • 浏览器选择你常用的类型，确保已安装JetBrains IDE Support插件（Chrome/Edge应用商店可直接搜索安装）
• 需要单独启动这个JS调试会话，同时保持Rails服务器在后台运行，不能仅依赖Rails的调试会话触发React断点

3. 确保源码被IDEA正确识别 #

• 右键React源码所在目录（比如app/javascript），选择「Mark Directory as > Sources Root」，让IDEA将其标记为可调试的源码根目录
• 重启Vite服务和IDEA的调试会话，让源码映射重新生成，若文件右上角出现「Source maps detected」提示，说明配置生效

4. 验证完整调试流程 #

• 先启动Rails服务器：rails s -b 0.0.0.0 -p 3000
• 再启动Vite服务：bin/vite dev
• 启动IDEA的JS调试会话，访问http://localhost:5173，触发对应的React代码逻辑，检查断点是否正常触发

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