How to Debug JavaScript in Visual Studio Code with live-server Running

Question

Trying to debug a simple HTML and JavaScript project in Visual Studio Code. In the VS Code terminal window, 'live-server' is used to launch the 'index.html'. In VS Code, the 'Debugger for Chrome' is installed and configured. Even after the page is launched in the Chrome browser, the debugger will not attach and give the error message 'Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222).'.

launch.json

"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "attach",
        "name": "Attach to Chrome",
        "port": 9222,
        "webRoot": "${workspaceRoot}",
        "urlFilter": "http://localhost:8080"
    },
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against index.html",
        "file": "${workspaceRoot}/index.html"
    }
]

The shortcut to Chrome is modified to include --remote-debugging-port=9222

Is it possible to use 'live-server' and debug or set breakpoints in VS Code on the JavaScript file?

Bibeau

It's a little old but the workflow (uses browserSync) at #40045578 may help. – Wagon

Thanks for the link. I added a new section in launch.json to launch with sourcemaps as you have in your example and it worked. – Bibeau

Answer 1

Works for me:

1. Install and activate Live Server extension on your VS Code.
2. Press F5 and select Chrome:

3. Check your Live Server port* and change the generated launch.json

4. Set your break points, run Live Server and press F5:

5. Enjoy :)

---

• To check your Live Server port:

1. Install Live Server & reload VS Code.
2. Go to Preferences > Extensions > Live Server Config
3. Scroll down to find Settings: Port and click "Edit in settings.json". Then you'll see the port number.

Saleem

Would be helpful to know how to do this step: Check your [Live Server] port. Install Live Server & reload VS Code. Go to Preferences > Extensions > Live Server Config - scroll down to find Settings: Port and click "Edit in settings.json". Then you'll see the port number. – Hesper

Step 1 has a link to a deprecated vscode extension. Maybe you can address the issue in your answer. – Hypertonic

(I removed the step 1 Timo was referring to as it is no longer needed) – Lowenstern