我正在使用javascript和webpack运行node.js webapp,这是我在this guide之后构建的。我已经安装了chrome调试器扩展。
我使用以下命令运行节点服务器:
webpack-dev-server --progress --colors
我也运行webpack --devtool source-map
我的启动配置如下所示:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
在运行webpack-dev-server --progress --colors并在VSCode中点击F5后,Chrome加载了网页,我的所有断点都显示为红色,但放置时它们从我放置它们的位置稍微低一些(包括在线条上)执行代码)。断点也没有击中,这让我相信调试映射有问题。当我偶尔放置断点时,随机文件会被加载并且其中的不可见断点被命中,就像在node_modules / firebase / index.js中一样,在命中注释行上会出现一个不可见的断点。
我还应该注意,在vscode中运行.scripts会产生(在所有模块中)我的entry.js文件,我试图在其中找到断点,即:-webpack:///./entry.js(d:\ myproject) \ entry.js)
一切都放在我的目录的根目录(如果我错误地转换目录,屏幕截图);
我的webpack.config.js文件:
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};
问题解决了!
需要添加:
devtool: 'inline-source-map'
到我的webpack.config.js module.exports。现在,断点点击了各地的功能。