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

问题

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?

回答1:

Works for me:

1. Install [Debugger for chrome] extension on your VS Code.
2. Install and activate [Live Server] extension on your VS Code.
3. Press F5 and select Chrome:

4. Check your [Live Server] port and change the generated lauch.json

5. Set your break points, run [Live Server] and press F5:

6. Enjoy :)

来源：https://stackoverflow.com/questions/46945784/how-to-debug-javascript-in-visual-studio-code-with-live-server-running