Question

我已经表达后端并在前端对js作出反应。我想调试使用visual studio代码的反应代码，并使用消息使灰色断点变灰＆＃34;断点被忽略，因为找不到生成的代码（源映射问题？）＆＃34;。

我的捆绑文件和源地图文件位于公共文件夹中。在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

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

Answer 2

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

对我有用

这是我的launch.json：

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

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

2 个答案: