无法在VS Code中调试React Typescript

Question

我正在尝试在VS Code中调试一个React Typescript应用程序，但我无法弄清楚如何配置launch.json以使TSX调试工作。

我使用webpack将所有内容打包成一个js文件。

这是我的package.json

 {
  "name": "reactts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "magic": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/react": "^16.7.20",
    "@types/react-dom": "^16.0.11",
    "axios": "^0.18.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "ts-loader": "^5.3.3",
    "typescript": "^3.2.4"
  }
}

这是我的tsconfig.json文件

{
    "compilerOptions": {
      "target": "es6",
      "jsx": "react",
      "module": "commonjs"
    },
    "exclude": [
      "node_modules"
    ]
}

这是我的webpack.config.js文件

var path = require("path");
var config = {
  entry: ["./src/app.tsx"],
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/
      }
    ]
  }
};

module.exports = config;

我使用npm run magic将tsx代码编译成打包的js文件。

- wolfman928

Answer 1

我没有使用webpack，而仅使用由react create-app提供的脚本（npm start=react-scripts start），然后使用VS Code调试配置启动Chrome Debugger：

直接指向应用程序的源代码/src，其中包含app.tsx和index.ts。

React -v 16.8.6 Node -v 10.16.0

{
    "type": "chrome",
    "request": "launch",
    "name": "Debug React Run",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceFolder}/src"
}

如果我找到了webpack的解决方案，我会进行更新。

- xIsra

Answer 2

在 .vscode 文件夹中的 launch.json 文件中添加以下内容。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

在 VSC 终端中运行 npm start 命令，浏览器应该会加载，在 VSC 中按 F5 键，你就可以连接并进行调试了。

请参见Ref！

希望这能帮到你。

- Patrick Hume

---

对我来说有效。但别忘了在每次启动之前重新构建你的源文件。 - David Fischer