Prevent vscode node debugger from showing node_modules code

Question

I'm trying to debug a really complex Angular 9 app in VSCode using Node Debugger, browser-preview and Debugger for Chrome, and the debugger leading me to node_module internal code constantly is driving me crazy.

I've tried using both Browser Preview: Launch and ng serve with this VSCode skipFiles configuration but the first one keeps entering node_modules, and the later is only trying to start Chrome after I cancel the debugging process. (which seems like a totally unrelated problem to the current topic, but I would like any opinions on that part if you feel like it)

I've already sent an issue to the maker of the browser-preview extension, since VSCode is giving me a Property not allowed warning with skipFiles. If anyone finds a problem and/or has a suggestion for the following launch.json, will be appreciated.

{
    // 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": "browser-preview",
            "name": "Browser Preview: Attach",
            "request": "attach"
        },
        {
            "type": "browser-preview",
            "request": "launch",
            "preLaunchTask": "npm: start",
            "name": "Browser Preview: Launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "skipFiles": [
                "${workspaceRoot}/node_modules/**/*.js",
                "<node_internals>/**/*.js"
            ]
        },
        {
            "name": "ng serve",
            "type": "chrome",
            "request": "launch",
            "preLaunchTask": "npm: start",
            "url": "http://localhost:4200/",
            "webRoot": "${workspaceFolder}",
            "skipFiles": [
                "${workspaceRoot}/node_modules/**/*.js",
                "<node_internals>/**/*.js"
            ],
            "sourceMapPathOverrides": {
                "webpack:/*": "${webRoot}/*",
                "/./*": "${webRoot}/*",
                "/src/*": "${webRoot}/*",
                "/*": "*",
                "/./~/*": "${webRoot}/node_modules/*"
            }
        }
    ]
}

EDIT: My objective is to avoid breakpoint spamming, by using "Step Into (F11)" and "Step Over (F10)" to navigate the code line by line, and "Continue (F5)" to jump to the next breakpoint when needed.

You could try "/node_modules/**/*.js" from github.com/microsoft/vscode-chrome-debug/issues/634 — Mark
– Mark, Commented Mar 9, 2020 at 16:36
@Mark nope, both "Step Over" and "Step Into" are still getting into node_modules code (http, promise, observable and the like). — Pra3t0r5
– Pra3t0r5, Commented Mar 9, 2020 at 18:36

Pra3t0r5 · Accepted Answer · 2020-04-05 00:13:47Z

-1

The warning is a Typescript level bug, and it does not affects in any way the compilation. Everything works as intended after thoroughly testing it with the following dependency set:

"@types/node": "^13.7.7",
"@angular/cli": "^9.0.5",
"@angular/compiler": "^9.0.5",
"@angular/compiler-cli": "^9.0.5",
"ts-node": "^8.6.2",
"tslint": "^6.0.0",
"typescript": "^3.7.5",
...

answered Apr 5, 2020 at 0:13

Pra3t0r5

1231 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Prevent vscode node debugger from showing node_modules code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related