Breakpoints and debugging statements open "read-only inlined content" - debugging

Question

Context:
I am working on a React.js app that uses Webpack, and I'm using VS Code as my editor.
The Webpack config is specifying inline-source-map as its devtool option. but I am using hot reloading, too. So, source maps actually come into the browser via this webpack:// protocol.
I am using the following launch.json config:
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url" : "https://myapp.local/", // This is not the real app URL
"trace" : true,
"sourceMaps": true,
"webRoot": "${workspaceRoot}/build",
"sourceMapPathOverrides": {
"webpack:///*" : "${webRoot}/*"
},
"preLaunchTask" : "development",
"internalConsoleOptions": "openOnSessionStart",
"smartStep": true,
"skipFiles": [
"node_modules/**",
"extensions:"
]
}
and I'm using this tasks.json.
Problem
So this mostly works well, except when I put a breakpoint somewhere, it opens the tab in a new tab marked as read-only inlined content from source map:
I just want to be able to debug and work on my files directly!

Answer 1

This is because VC can't find the sources on the file system, so it resorts to using the copy it got from the web server.
This is typical in projects that span both server and client side code, and as a result, the web (HTML/JS/CSS) root is nested inside the workspace root. It can be easily fixed:
in VC, open the root folder of your project. go to "File -> Save workspace as" and save the workspace. Going forward always use the workspace (rather than folder) to enter your project.
In launch.json, set the webRoot value to reflect the relative path of the webRoot (typically folder with index.html). If your webRoot is under "UI", then it should look like this:
"webRoot": "${workspaceFolder}/UI"

Answer 2

I got it working with this launch.json config. Hopefully it helps you.
{
"name": "Launch localhost",
"type": "chrome",
"request": "attach",
"url": "http://localhost:8080",
"port": 9222,
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": { "webpack:///./src/*": "${workspaceFolder}/src/*" },
"sourceMaps": true,
}

Answer 3

I was running into the same issue remote debugging Python, thanks the two above answers I was able to solve it.
as SimbalCoder suggested I saved the workspace. I suppose this is needed to set your workspace folder path.
I then modified my launch.json as such:
{
"name": "Python: Remote Attach",
"type": "python",
"request": "attach",
"connect": {
"host": "localhost",
"port": 5678
},
"pathMappings": [
{
"localRoot": "${workspaceFolder}/Scripts/MyScripts/"
}
],
}
Now the pathMappings are pointing to the correct file and upon debugger entry it is opening the correct file.