放置在Chrome上的VSCode/Javascript中时断点会中断

Question

我正在使用我按照本指南构建的javascript和webpack运行node.js webapp .我已经安装了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" }
        ]
    }
};

Answer 1

问题解决了!

需要添加:

 devtool: 'inline-source-map'

到我的webpack.config.js module.exports.现在,断点点击了各地的功能.