May 12 '22 ~ 10 ~ 2 mins

VS Code: It's taking a while to configure your breakpoints"

I love using VS Code to run and debug local scripts. However, I had noticed that starting up the task in debug mode sometimes took a really long time.

I also got the warning pictured here with the text, "It's taking a while to configure your breakpoints. You can speed this up by updating the 'outFiles' in your launch.json."

VS Code Warning

This is likely because, when working in a mono repo, there are a lot of files that the task runner tries to load into the debugger so that it can configure your breakpoints.

Javascript Task Configuration

This was the task configuration from my launch.json file. This task just ran a Javascript file, meaning for debugging, I did not require any source maps.

 {
    "type": "node",
    "request": "launch",
    "name": "Generate Cypress Config",
    "runtimeExecutable": "npm",
    "cwd": "${workspaceRoot}/grid-packages/ag-grid-docs/documentation",
    "runtimeArgs": [
        "run-script",
        "generate-cypress-config"
    ],
    "port": 9229,
    "skipFiles": [
        "<node_internals>/**"
    ],           
    "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
    ]
}

Simply setting sourceMaps to false caused the task to startup pretty much immediately saving me a lot of time!

"sourceMaps": false, 

Typescript Task

However, if you are running a Typescript task you will need source maps loaded if you want to debug it. This is when we need to follow the instructions of the warning and set the outfiles config property.

I set this to the folder containing all the files that would be included in the given task run. Even if this still included some extra files, restricting to a small subset and ignoring node_modules gave a huge boost in startup speed.

"outFiles": [
    "${workspaceFolder}/grid-packages/ag-grid-docs/**/*.js",
    "!**/node_modules/**"
],

You should match the .js files and not the sourcemap files directly.

Conclusion

Don't ignore warnings when they are giving you a hint that could improve your productivity!

You can read how VS Code does source map discovery from their documentation for a more complete picture.


Headshot of Stephen Cooper

Hi, I'm Stephen. I'm a senior software engineer at AG Grid. If you like my content then please follow / contact me on 🦋 Bluesky or 𝕏 (X) and say hello!