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

Question

我正在使用我在this guide之后构建的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。现在，断点点击了各地的函数。