Debugging 断点和调试语句打开"；只读内联内容“； 背景：

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

网页包配置将

内联源代码映射指定为其
devtool
选项。但我也在使用热重新加载。因此，源地图实际上是通过这个
webpack://
协议进入浏览器的

我正在使用以下
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:"
    ]
}

我正在使用


问题
因此，这通常工作得很好，除非我在某处放置断点，否则它会在标记为源地图中的只读内联内容的新选项卡中打开该选项卡：


我只想能够直接调试和处理我的文件
我使用这个launch.json配置获得了它。希望它能帮助你

{
  "name": "Launch localhost",
  "type": "chrome",
  "request": "attach",
  "url": "http://localhost:8080",
  "port": 9222,
  "webRoot": "${workspaceFolder}/src",
  "sourceMapPathOverrides": { "webpack:///./src/*": "${workspaceFolder}/src/*" },
  "sourceMaps": true,
}

这是因为VC无法在文件系统上找到源代码，所以它求助于使用从web服务器获得的副本

这在跨服务器端和客户端代码的项目中是典型的，因此，web（HTML/JS/CSS）根嵌套在工作区根中。它可以很容易地修复：

在VC中，打开项目的根文件夹。转到“文件->将工作区另存为”并保存工作区。继续，始终使用工作区（而不是文件夹）输入项目


在launch.json中，设置webRoot值以反映webRoot的相对路径（通常为index.html文件夹）。如果您的webRoot位于“UI”下，则应如下所示：

     "webRoot": "${workspaceFolder}/UI"


你有没有想过如何解决这个问题？这个答案可以通过解释你对配置所做更改背后的原因来增强，以使其成功运行。我有一个docker Next.js项目…当我尝试添加“webRoot”时，VC告诉我“不允许使用Property webRoot”。相反，我指定了“localRoot”和“remoteRoot”。我正在将保存的工作区用于项目的根目录。只有使用
debugger
语句，我才能使调试器工作。