我安装了 chrome 扩展调试器。我使用
运行我的应用程序webpack-dev-server -d --config webpack.dev.js --inline
我正在运行一个 React 应用程序,所有源代码都在/src 文件夹下。我有 js、ts 和 tsx 文件。当我在渲染函数上放置断点时,编辑器会正确地中断执行,但是当我在按钮的 onClick 事件上放置断点时,它不会中断,它只是继续执行代码。
我的webpack配置的相关部分如下:
mode: 'development',
devtool: 'source-map',
entry: {
bundle: [
'@babel/polyfill',
'react-hot-loader/patch',
`webpack-dev-server/client?http://${host}:${devPort}`,
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/index.js'),
],
},
output: {
path: path.resolve(__dirname, 'public'),
publicPath: '/',
filename: '[name].[hash:16].js',
chunkFilename: '[id].[hash:16].js',
},
devServer: {
inline: true,
port: devPort,
contentBase: path.resolve(__dirname, 'public'),
hot: true,
writeToDisk: true,
publicPath: '/',
historyApiFallback: true,
host,
}
我的 launch.json 如下:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./src/*.js": "${workspaceRoot}/src/*.js",
"webpack:///./src/*.tsx": "${workspaceRoot}/src/*.tsx",
"webpack:///./src/*.ts": "${workspaceRoot}/src/*.ts",
"webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*"
}
}
我错过了什么?
最佳答案
我通过在我的配置文件中使用 inline-source-map
让它工作:
{
devtool: 'inline-source-map',
// ....
}
现在它可以正常工作并在我放置断点的任何地方中断。
关于reactjs - 运行 webpack-dev-server 时的 VSCode 调试,跳过断点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60693079/