Debug multiple files in typescript

Viewed 207

I've recently experimented with the debbuging tools in vscode. Everything seems to be working fine, I've set up the launch.json and set my program property. The problem is, breakpoints only work in the index.ts file, and I've got a commands folder as well with a file called champion.ts, in which the breakpoints stay as unbound. How can I make vscode debug those files aswell?

File structure

myapp/
├─ commands/
│  ├─ champion.ts
├─ index.ts
├─ out/
│  ├─ commands/
│  │  ├─ champion.js
│  ├─ index.js

launch.json

{
    // Use IntelliSense to learn about possible 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",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/index.ts",
            "sourceMaps": true,
            
            "outFiles": [
                "${workspaceFolder}/out/*.js"
            ]
        }
    ]
}
1 Answers

You need to change the glob in the outFiles array in your launch.json so that it also includes javascript (and, implicitly, source maps) that are located in subdirectories of the out directory (e.g. out/commands/..., etc.)

Instead of...

 "outFiles": ["${workspaceFolder}/out/*.js"]

...write...

 "outFiles": ["${workspaceFolder}/out/**/*.js"]

See this example in the VSCode documentation.

Related