我想做什么
我有一个React Typescript项目，我想在Rider中设置一个调试配置，它满足以下条件:
- 一个开发服务器是通过热加载启动的，所以当我改变文件时，应用程序会自动更新
- 一个javascript调试器得到附加到运行的应用程序，所以我可以在jsx文件中的Rider(不在Chrome DevTools)设置断点，应用程序实际上停止在断点 我更喜欢直接使用webpack而不是通过create-react-app
工作是什么我目前在webpack开发服务器上运行我的应用程序，webpack serve用于开发目的。开发服务器正在运行，我可以在Chrome DevTools中成功调试typescript代码，如图所示。
如上所述，现在我想从Rider内部附加一个调试器，这样我就可以直接在IDE中设置断点——这就是我失败的地方。
我已经试过了
在Jetbrains调试webpack应用程序的文档(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+click http://localhost:9000/链接，我得到以下错误:
我的客户端应用程序文件夹位于c#项目(SolutionName/AppliationName/ClientApp)的子文件夹内，我将其用作后端。这可能导致问题吗?
我有点困在这里，所以我很高兴所有的帮助。:)下面是关于我的系统和相关文件的更多信息。
<标题>我的环境- 操作系统:Ubuntu 20.04.2
- IDE: Rider 2021.2.2
- 版本的依赖项列在包中。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"
}
出现问题的原因是chromium是与snap一起安装的． 这不起作用，但是如果你直接从debian存储库安装chromium包，一切都可以完美地工作。
更多细节在这里:https://rider-support.jetbrains.com/hc/en-us/community/posts/4409573673746-Javascript-Debugging-not-working-in-Rider