debugging - 断点和调试语句打开 "read-only inlined content"

Question

语境:

我正在开发一个使用 Webpack 的 React.js 应用程序，并且我使用 VS Code 作为我的编辑器。

Webpack 配置指定 inline-source-map作为它的devtool选项。但我也在使用热重装。因此，源映射实际上是通过 webpack:// 进入浏览器的。协议(protocol)。

我正在使用以下 launch.json配置:

{
    "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:"
    ]
}

我正在使用 this tasks.json .

问题

所以这通常效果很好，除非我在某处放置断点，它会在标记为 的新选项卡中打开选项卡来自源映射的只读内联内容 :



我只想能够直接调试和处理我的文件!

Answer 1

我在远程调试 Python 时遇到了同样的问题，感谢上面的两个答案，我能够解决它。

作为 SimbalCoder建议我保存工作区。我想这是设置您的工作区文件夹路径所必需的。

然后我修改了我的launch.json如:

{
            "name": "Python: Remote Attach",
            "type": "python",
            "request": "attach",
            "connect": {
                "host": "localhost",
                "port": 5678
            },
            "pathMappings": [
                {
                    "localRoot": "${workspaceFolder}/Scripts/MyScripts/"
                }
            ],            
        }

现在 pathMappings 指向正确的文件，并且在调试器进入时它正在打开正确的文件。