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

Posted 2023-03-30

【中文标题】调试在 JetBrains Rider 中不起作用的 React Typescript 项目

【英文标题】：Debugging of a React Typescript project not working in JetBrains Rider

【发布时间】：2021-10-16 21:00:05

【问题描述】：

我想做什么

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

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

什么工作

我目前使用webpack serve 在 webpack 开发服务器上运行我的应用程序以用于开发目的。开发服务器正在运行，我可以在 Chrome DevTools 中成功调试 typescript 代码，如您所见here。

问题

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

我尝试过的

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

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

该页面位于 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/ 链接，我会得到以下 error。

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

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

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

我的环境

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

文件

package.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"

【问题讨论】：

我遇到了一个非常相似的问题，我也遇到了类似的问题 :p 对我有一点帮助的一件事是通过创建 npm 配置并使用“调试”来运行应用程序骑手中给出的按钮，而不是手动运行命令并附加调试器。它对你有什么改变吗？

我已经使用了 npm 配置来调用 yarn start。我将在问题中添加此信息。我也按下了 Rider 中的调试按钮，但我还是得到了错误。所以我想我们被困在同一个地方。 :D

【参考方案1】：

问题的原因是 chromium 是使用 snap 安装的。这不起作用，但如果您直接从 debian 存储库安装 chromium 软件包，一切都会完美运行。

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