How to debug client-side in Visual Studio Code?

问题:

According to the Microsoft Documentation, the Visual Studio Code debugger should be able to debug typescript and javascript.

Problematically, they only provide examples for server side apps using node or python. Intellisense only suggests server languages.

Is it possible to debug client-side typescript or javascript apps with the Visual Studio Code debugger?

launch.json

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "type":"node"      <-- what if I'm building a JS / TS app?
            "request": "launch",
            "name": "Launch Program",
            "program": "${file}",
            "outFiles": [
                "${workspaceRoot}/out/**/*.js"
            ]
        }
    ]
}

回答1:

You have to install one (or more) of the browser debugger extensions: Chrome, Firefox, iOS Web or Edge.

Then you can use launch configuration like this for Chrome:

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceRoot}"
}

Depending on you build workflow, you may have to do some additional steps to get source maps to work.