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

【问题标题】：Breakpoints broken when placed in VSCode/Javascript on Chrome放置在 Chrome 上的 VSCode/Javascript 中时断点中断
【发布时间】：2018-06-02 11:58:29
【问题描述】：

我正在使用我在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 Chrome 中按 F5 后会加载网页，我的所有断点都显示为纯红色，但放置时它们会从我放置它们的位置跳得更低（包括正在执行代码的行）。断点也没有命中，这让我相信调试映射有问题。当我偶尔放置断点时，随机文件会被加载并且其中的不可见断点被命中，例如在 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" }
        ]
    }
};

【问题讨论】：

能否请您显示根目录结构，例如捆绑文件的放置位置？
@AjayGupta 我刚刚附上了根目录文件夹的图片，如果你想看到的话，请告诉我:)
那么Build 是所有捆绑资产的去向吗？
@AjayGupta 哦不，事实并非如此，Build 是一个包含 Unity 项目文件的文件夹。也许我不太明白 webpack 是如何工作的，是否有一个构建目录应该写入所有内容？我以为 webpack 文件是内置到我的 bundle.js 文件中的：module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { 测试：/\.css$/，加载器：“style-loader！css-loader” } ] } };
哦，抱歉，我没有仔细查看 bundle.js 文件。无论如何，你到底在哪里放置断点？例如在一行只有{ 或类似的东西？

标签： javascript node.js google-chrome webpack visual-studio-code

【解决方案1】：

问题解决了！

需要补充：

 devtool: 'inline-source-map'

到我的 webpack.config.js module.exports。现在断点在任何地方的函数上都内联。

【讨论】：