使用 typescript、nodemon 和外部项目在 vscode 中调试问题

Question

Thank you for anyone who is able to offer some insight about what is going on. VS Code debugging has always been finicky, but I've got a situation that I think should work and it isn't.

Issue: I can set breakpoints in typescript and debug in 2 of my projects (server and common-internal), but not the 3rd (common-external). Why can't I debug common-external, and how do I set it up so I can? VS Code cannot find the source to bind the breakpoint.

I've created a simple repo to reproduce the issue I'm seeing: https://github.com/snotmare/debug-issue

Steps to reproduce:

1. Clone repo
2. Run 3 init tasks (for common-internal, common-external, and server)
3. Run 2 watch tasks (for common-internal and common-external)
4. Run the start server task
5. Run the debugger by attaching to the process
6. Set a breakpoint in server/src/index.ts (works)
7. Set a breakpoint in common-internal/src/utils.ts (works)
8. Set a breakpoint in common-external/src/external-utils.ts (does not work)

Project setup:

• Typescript project with a utils class (common-internal).
• NodeJS server project that imports common-internal and common-external.
• Both of these projects are within the same folder, with a.vscode folder at the same root for task and launch config.

External project setup:

• Typescript project with utils class (common-external).
• This is setup exactly the same as common-internal, just renamed.
• This has its own.vscode folder for task config.

The server project depends on the 2 common projects like this:

    "dependencies": {
        "common-internal": "file:../common-internal",
        "common-external": "file:../../common-external/common-external",
        "express": "4.18.2"
    },

I believe the issue is related to the folder structure, which looks like this:

root folder
- test-app
- - .vscode
- - common-internal
- - server
- common-external
- - .vscode
- - common-external

The folder structure needs to be this way because I want test-app to be in a git repo while common-external is in a separate git repo.

When I debug the server, why can't I set a breakpoint in common-external and debug it? Thank you for your help!

Github issue for vscode: https://github.com/microsoft/vscode/issues/169033

Ben

Answer 1

I found the solution for this by accident. I was able to update the outFiles for my launch.json file to look for files outside of the workspace folder...

"outFiles": [
    "${workspaceFolder}/**/*.js",
    "${workspaceFolder}/../common-external/**/*.js",
    "!**/node_modules/**"
]

The vs code debugger is still finicky when it comes to my real (larger) project. Sometimes it finds the source files, sometimes it doesn't. Has anyone else experienced performance issues with the debugger?