[英]Debugging of a React Typescript project not working in JetBrains Rider
I have a React Typescript project and I want to setup a debug configuration in Rider, which fulfills the following criteria:我有一个 React Typescript 项目,我想在 Rider 中设置一个调试配置,它满足以下条件:
I currently run my application on the webpack dev server with webpack serve
for development purposes.我目前在 webpack 开发服务器上运行我的应用程序,
webpack serve
用于开发目的。 The dev server is running and I can debug the typescript code in Chrome DevTools successfully as you can see here .开发服务器正在运行,我可以成功地调试在Chrome DevTools的打字稿代码,你可以看到在这里。
As mentioned above, now I want to attach a debugger from inside Rider, so I can set breakpoints directly in my IDE - and that's where I failed.如上所述,现在我想从 Rider 内部附加一个调试器,这样我就可以直接在我的 IDE 中设置断点 - 这就是我失败的地方。
In the Jetbrains documentation for debugging a webpack application ( https://www.jetbrains.com/help/rider/Using_Webpack.html#debug_application_that_uses_webpack ) I was told that the debugging should work the same as for React applications that were setup with create-react-app.在用于调试 webpack 应用程序的 Jetbrains 文档( https://www.jetbrains.com/help/rider/Using_Webpack.html#debug_application_that_uses_webpack )中,我被告知调试应该与使用 create- 设置的 React 应用程序相同反应应用程序。 So I followed the instructions here: https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/?_ga=2.129883279.2614435.1634130690-1852059688.1626293073 .
所以我按照这里的说明操作: https : //blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/?_ga=2.129883279.2614435.1634130690-1852059688.1626293073 。
yarn start
from within the run configuration in debug mode.yarn start
。 This executed webpack serve
as defined in my package.json.webpack serve
在我的 package.json 中定义。 The page was available at http://localhost:9000 and I got the following output in the process console:该页面在 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/
[...]
However, if I ctrl+shift+click on the http://localhost:9000/ link from the console, I get the following error .但是,如果我在控制台中按 ctrl+shift+单击 http://localhost:9000/ 链接,则会收到以下错误。
My client app folder is located inside of a sub folder of a C# project (SolutionName/AppliationName/ClientApp), which I use as a backend.我的客户端应用程序文件夹位于我用作后端的 C# 项目 (SolutionName/AppliationName/ClientApp) 的子文件夹内。 Can this maybe cause the problem?
这可能会导致问题吗?
I'm kinda stuck here, so I'm happy for all help.我有点被困在这里,所以我很高兴得到所有帮助。 :)
:)
Below you will find further information about my system and the relevant files.您将在下面找到有关我的系统和相关文件的更多信息。
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 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"
}
The reason for the problems was that chromium was installed with snap .出现问题的原因是铬是用 snap 安装的。 This doesn't work, but if you install the chromium packages directly from the debian repository everything works perfectly.
这不起作用,但如果您直接从 debian 存储库安装 Chromium 软件包,一切正常。
More details here: https://rider-support.jetbrains.com/hc/en-us/community/posts/4409573673746-Javascript-Debugging-not-working-in-Rider更多详情: https : //rider-support.jetbrains.com/hc/en-us/community/posts/4409573673746-Javascript-Debugging-not-working-in-Rider
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.