reactjs - 无法在 Visual Studio 代码中调试 React.js 代码

Question

我有express后端和react js前端。我想使用 Visual Studio 代码调试 React 代码，但断点显示为灰色并带有消息“断点被忽略，因为找不到生成的代码(源映射问题？)”。

我的捆绑文件和源映射文件位于公共(public)文件夹中。在 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
};

这是我的项目结构:

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

Answer 1

1. 首先尝试在终端中运行“npm start”。
2. 应用启动时，启动 Chrome 调试

这对我有用

这是我的 launch.json:

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