断点和调试语句打开"只读内联内容"

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

而我正在使用它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,
}