【问题标题】：Breakpoints and debugging statements open "read-only inlined content"断点和调试语句打开“只读内联内容”
【发布时间】：2017-10-08 09:38:29
【问题描述】：

上下文：

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

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

我正在使用以下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。

问题

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

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

【问题讨论】：

你有没有想过如何解决这个问题？

标签： debugging webpack visual-studio-code

【解决方案1】：

这是因为 VC 在文件系统上找不到源，所以它求助于使用从 Web 服务器获取的副本。

这在跨越服务器端和客户端代码的项目中很常见，因此，Web (HTML/JS/CSS) 根嵌套在工作区根中。它可以很容易地修复：

在 VC 中，打开项目的根文件夹。转到“文件->将工作区另存为”并保存工作区。以后始终使用工作区（而不是文件夹）进入您的项目。
在 launch.json 中，设置 webRoot 值以反映 webRoot 的相对路径（通常是带有 index.html 的文件夹）。如果您的 webRoot 在“UI”下，那么它应该如下所示：
```
     "webRoot": "${workspaceFolder}/UI"
```

【讨论】：

我有一个 docker Next.js 项目...当我尝试添加“webRoot”时，VC 告诉我“不允许使用 Propety Webroot”。相反，我指定了“localRoot”和“remoteRoot”。我正在使用保存的工作区到我的项目的根目录。如果我使用debugger 语句，我只能让调试器工作。

【解决方案2】：

我让它与这个 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,
}

【讨论】：

这个答案可以通过解释您对配置进行更改以使其成功运行的原因来增强。