JavaScript Debugger Not Connecting When Running Vite Project on Remote/WSL in IntelliJ IDEA
Description
When trying to debug a Vite React project running on a remote machine or WSL using IntelliJ IDEA, the JavaScript debugger fails to connect. The issue appears specifically when running the project remotely - the same configuration works perfectly on local Windows.
Environment:
- Local: Windows with Chrome
- Remote: Ubuntu (headless) or WSL2
- IntelliJ IDEA 2024.3
- Node 20.15.0
- npm 10.7.0
Exact Steps to Reproduce:
- Create a new Vite project:
- Open IntelliJ IDEA
- Click "New Project"
- Select "Vite" from the left sidebar
- Configure project:
- Name: test-js-debugger
- Location: [your path]
- Node interpreter: Project node 20.15.0
- Vite: npx create-vite 6.1.1
- Template: react
- Click Create
- Create npm run configuration:
- package.json: path to project's package.json
- Command: run
- Scripts: dev
- Node interpreter: Project 20.15.0
- Package manager: Project npm 10.7.0
- In the same configuration, set up Browser/Live Edit:
- Check "After launch"
- Select "Default" or "Chrome" from dropdown
- Check "with JavaScript debugger"
- URL: http://localhost:5173
- Results when running the configuration:
On Local Windows:
- Works perfectly:
- npm starts Vite server
- Chrome launches automatically
- JavaScript debugger connects
On Remote/WSL:
- Fails with error:
Waiting for connection to localhost:35429. Please ensure that the browser was started successfully with remote debugging port opened. Port cannot be opened if Chrome having the same User Data Directory is already launched.
Important Notes:
- Port forwarding works (can access localhost:5173 in browser)
- Chrome settings include
--remote-allow-origins=*
- WebBrowser settings in IntelliJ point to correct Windows Chrome path
- Issue occurs on both WSL2 and remote Ubuntu setups
Expected Behavior:
JavaScript debugger should connect and work when running the Vite application on remote/WSL, just as it does locally.
请先登录再写评论。