断点和调试语句打开＆＃34;只读内联内容＆＃34;

Question

上下文：

我正在使用一个使用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。

问题

所以这种方法效果很好，除非我在某处放置断点，它会在标签为来自源地图的只读内联内容的新标签页中打开标签：

我只是希望能够直接调试和处理我的文件！

Answer 1

我使用了这个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,
}

Answer 2

这是因为VC在文件系统上找不到源，因此它诉诸于使用从Web服务器获得的副本。

这在跨越服务器和客户端代码的项目中很常见，因此，Web（HTML / JS / CSS）根嵌套在工作区根中。可以轻松解决：

在VC中

1. ，打开项目的根文件夹。转到“文件->将工作空间另存为”，然后保存工作空间。向前，始终使用工作区（而不是文件夹）进入您的项目。

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

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