javascript - 在 Chrome 上的 VSCode/Javascript 中放置断点

Question

我正在使用我在 this guide 之后构建的 javascript 和 webpack 运行一个 node.js webapp .我已经安装了 chrome 调试器扩展程序。

我使用以下命令运行 Node 服务器:

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 中运行 webpack-dev-server --progress --colors 并在 VSCode 中按 F5 Chrome 加载网页后，我所有的断点都显示为纯红色，但是当放置它们时，它们会比我放置它们的位置跳得低一些(包括正在执行代码的行)。断点也没有命中，这让我相信调试映射有问题。当我偶尔放置断点时，会加载随机文件并命中其中的不可见断点，例如在 node_modules/firebase/index.js 中，命中注释掉的行上的不可见断点。

我还应该注意在 vscode 中运行 .scripts 确实会产生(在所有模块中)我试图在其中设置断点的 entry.js 文件，即:-webpack:///./entry.js (d :\我的项目\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。现在，断点在函数中随处可见。