調試 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