2023/2024年IntelliJ调试React应用连接失败求助

可行的排查与解决步骤 #

• 彻底终止Chrome所有进程
  关闭Chrome窗口后，打开任务管理器（Windows）或活动监视器（Mac），找到所有含Chrome/Google Chrome的进程，全部结束。后台残留进程可能会占用用户数据目录或调试端口，导致无法建立新连接。

• 检查调试端口是否被占用
  打开终端执行对应命令，确认端口45836是否被其他进程占用：

  # Windows系统
  netstat -ano | findstr :45836
  # Mac/Linux系统
  lsof -i :45836
  

  若端口被占用，可杀死对应进程，或在Javascript-Debug配置中更换一个未被使用的端口。

• 验证独立用户数据目录配置
  确认Javascript-Debug配置里的Chrome用户数据目录路径正确，且该目录未被其他Chrome实例使用。可以尝试新建一个空目录作为独立数据目录，重新配置到调试项中。

• 手动启动Chrome并指定调试参数
  先通过命令行启动Chrome，明确指定调试端口和独立数据目录，再启动IntelliJ调试：

  # Windows示例（需根据实际Chrome安装路径调整）
  "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=45836 --user-data-dir="C:\temp\chrome-debug-profile"
  # Mac示例
  /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=45836 --user-data-dir="/tmp/chrome-debug-profile"
  

• 核对IntelliJ调试配置细节
  确保Javascript-Debug配置的URL指向React应用的正确启动地址（如http://localhost:3000），且Browser选项选中的是配置好独立数据目录的Chrome实例，而非系统默认Chrome。

• 重置调试配置
  删除现有Javascript-Debug配置，重新创建新配置，严格按照步骤设置独立数据目录和调试端口，避免旧配置残留问题。

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