放置在Chrome上的VSCodeJavascript中时断点会中断-电脑我帮您

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

我正在使用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: /?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。现在，断点点击了各地的功能。