无法在 Visual Studio 代码中调试 React.js 代码答案

【问题标题】：Unable to debug React.js code in visual studio code无法在 Visual Studio 代码中调试 React.js 代码
【发布时间】：2018-09-26 16:49:39
【问题描述】：

我有 express 后端并在前端响应 js。我想用 Visual Studio 代码调试反应代码，并且我的断点显示为灰色并带有消息 “断点被忽略，因为找不到生成的代码（源映射问题？）”。

我的捆绑文件和源映射文件位于公共文件夹中。在 chrome 中，我的项目结构如下所示

我已经为 Visual Studio 代码安装了 chrome 扩展的调试器。我的 launch.json 配置是

{
    "version": "0.1.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/public",
            "trace": true
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceFolder}/index.html"
        },
    ]
}

Webpack 配置：

module.exports = {
  mode: "development",
  entry: {
    app: "./public/javascripts/app.jsx"
  },
  devtool: "source-map",
  output: {
    devtoolLineToLine: true,
    path: __dirname + "/public",
    pathinfo: true,
    sourceMapFilename: "./app.js.map",
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["react"]
          }
        }
      }
    ]
  },
  watch: true
};

这是我的项目结构：

请向我解释我做错了什么。非常感谢任何帮助！

【问题讨论】：

您尝试在哪些文件上设置断点会产生此错误？
您可以尝试从您的 webRoot 中删除 /public 吗？而且，您能否在问题中包含.scripts 命令的输出？
@PaulMcloughlin 我要调试的文件是 app.jsx。反应文件。

标签： reactjs debugging webpack visual-studio-code source-maps

【解决方案1】：

先尝试在终端中运行“npm start”。
应用启动后，启动 chrome 调试

对我有用

这是我的 launch.json：

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Chrome",
        "request": "launch",
        "type": "pwa-chrome",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}"
    }
]
}

【讨论】：

【解决方案2】：

回复。 VSC 的扩展，最好先更新 Debugger for Chrome 扩展。您的 launch.json 配置文件应为 0.2.0 版。那么你的 VSC 也是最新的吗？ VSC 1.21.* 中存在一个错误，可能对此负责。更新到 1.23 后检查它是否仍然存在。

【讨论】：