Summary
I have a unique situation where we have created a (for lack of better term) "micro-ui" as a React component. The UI receives props so it can dynamically configure itself to work within several of our larger applications. Due to the nature of it being used in several applications, we have made the decision to distribute it as a component library that exports a single component. The implementation of it works really well, but the debugging has become a bit difficult/non-existent.
Currently we are using npm link
to develop the dependency application locally, while running it within the host application. This has worked well, but we have had some issues with source mapping and getting breakpoints to catch. We have solved the source mapping problem with some Webpack configurations, but the breakpoints still won't catch within the linked dependency application. Currently the debugger is attached to the running host application, and the dependency application is simply linked as a local dependency. In an ideal world I would be able to find a solution that allows me to place a breakpoint either in the host application or the dependency application, and it would catch within the debugger.
Attempts So Far
My current attempt is to debug directly within vscode, and I think I am almost there. So far I have tried several versions of a launch.json file, and have settled on one that works really well when attaching the host application (shown below).
As you can see, I have attempted to add mapping to the sourceMapOverrides key to see if I can explicitly point the node_modules
folder for the dependency to the build folder in the root of my dependency project. I have tried this mapping a couple of different ways, but it doesn't catch the break point within the linked application. In addition there are no obvious errors that are thrown, so I am unable to tell if my configuration is invalid. I am certain that I am missing something obvious, but after searching all day I can't seem to find a good solution.
Thanks all in advance for your time and help, and please let me know if you need additional information.
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"runtimeArgs": ["--preserve-symlinks"],
"sourceMapPathOverrides": {
"${webRoot}/node_modules/<dependency_project>/build": "/Users/<USER>/<path_to_dependency_project>/build",
}
}
]
}