调试 React Typescript 项目在 JetBrains Rider 中不起作用

Question

我想做的事

我有一个 React Typescript 项目，我想在 Rider 中设置一个调试配置，它满足以下条件：

• 开发服务器通过热重载启动，因此当我更改文件时，应用程序会自动更新
• javascript 调试器附加到正在运行的应用程序，因此我可以在 Rider 内部的 jsx 文件中设置断点（而不是在 Chrome DevTools 中），并且应用程序实际上会在断点处停止
• 我更喜欢直接使用 webpack 而不是通过 create-react-app 间接使用

什么在起作用

我目前在 webpack 开发服务器上运行我的应用程序， webpack serve用于开发目的。 开发服务器正在运行，我可以成功地调试在Chrome DevTools的打字稿代码，你可以看到在这里。

问题

如上所述，现在我想从 Rider 内部附加一个调试器，这样我就可以直接在我的 IDE 中设置断点 - 这就是我失败的地方。

我试过的

在用于调试 webpack 应用程序的 Jetbrains 文档（ https://www.jetbrains.com/help/rider/Using_Webpack.html#debug_application_that_uses_webpack ）中，我被告知调试应该与使用 create- 设置的 React 应用程序相同反应应用程序。 所以我按照这里的说明操作： https : //blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/?_ga=2.129883279.2614435.1634130690-1852059688.1626293073 。

1. 我在调试模式下从运行配置中运行yarn start 。 这个执行的webpack serve在我的 package.json 中定义。

该页面在 http://localhost:9000 上可用，我在流程控制台中得到以下输出：

/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run start --scripts-prepend-node-path=auto
Debugger listening on ws://127.0.0.1:42631/294d3b20-969f-486e-917e-22c6350d23e4
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.

> applicationName@1.0.0 start
> webpack serve

Debugger listening on ws://127.0.0.1:33159/3b5cb2c1-674a-4d9c-888f-b3bdf6f3d3a6
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9000/
[...]

但是，如果我在控制台中按 ctrl+shift+单击 http://localhost:9000/ 链接，则会收到以下错误。

我的客户端应用程序文件夹位于我用作后端的 C# 项目 (SolutionName/AppliationName/ClientApp) 的子文件夹内。 这可能会导致问题吗？

我有点被困在这里，所以我很高兴得到所有帮助。 :)

您将在下面找到有关我的系统和相关文件的更多信息。

我的环境

• 操作系统：Ubuntu 20.04.2
• IDE：骑士 2021.2.2
• 依赖项的版本在下面的 package.json 中列出

文件

包.json

{
   [...]
   "scripts": {
        "start": "webpack serve",
        "watch": "webpack --watch",
        "build": "tsc && NODE_ENV=production webpack",
        "build-dev": "webpack"
    },
    "dependencies": {
        "@types/react": "^17.0.21",
        "@types/react-dom": "^17.0.9",
        "@types/typescript": "^2.0.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    },
    "devDependencies": {
        "@babel/core": "^7.15.8",
        "@babel/preset-env": "^7.15.8",
        "@babel/preset-react": "^7.14.5",
        "@babel/preset-typescript": "^7.15.0",
        "@webpack-cli/generators": "^2.4.0",
        "webpack": "^5.58.1",
        "webpack-cli": "^4.9.0",
        "webpack-dev-server": "^4.3.1",
        "workbox-webpack-plugin": "^6.3.0",
        "babel-loader": "^8.2.2",
        "css-loader": "^6.4.0",
        "file-loader": "^6.2.0",
        "style-loader": "^3.3.0",
        "ts-loader": "^9.2.6",
        "html-webpack-plugin": "^5.3.2",
        "mini-css-extract-plugin": "^2.4.2",
        "prettier": "^2.4.1",
        "typescript": "^4.4.3"
    }
}

webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')

let mode = "development";
if (process.env.NODE_ENV === "production") {
  mode = "production";
}

module.exports = {
  mode: mode,
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            cacheDirectory: true,
            presets: [
              ["@babel/preset-env", { targets: { node: "8" } }],
              "@babel/preset-typescript",
              "@babel/preset-react"
            ]
          }
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
    ]
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: [".tsx", ".ts", ".jsx", ".js", "..."],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
    open: true,
    hot: true
  },
  // generate source maps to debug the initial source files
  devtool: "source-map"
}

Answer 1

出现问题的原因是铬是用 snap 安装的。 这不起作用，但如果您直接从 debian 存储库安装 Chromium 软件包，一切正常。

更多详情： https : //rider-support.jetbrains.com/hc/en-us/community/posts/4409573673746-Javascript-Debugging-not-working-in-Rider