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

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

I was running into the same issue remote debugging Python, thanks the two above answers I was able to solve it.

1. as SimbalCoder suggested I saved the workspace. I suppose this is needed to set your workspace folder path.

2. 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.