如何将 VS Code 调试器与 webpack-dev-server 一起使用（忽略断点）

Posted 2023-02-16

【中文标题】如何将 VS Code 调试器与 webpack-dev-server 一起使用（忽略断点）

【英文标题】：How to use VS Code debugger with webpack-dev-server (breakpoints ignored)

【发布时间】：2018-03-08 09:16:50

【问题描述】：

我的问题很简单。

我只想让 VS Code 的调试器与 webpack-dev-server 一起工作，而不忽略我的断点。

现在，webpack-dev-server 从内存中提供捆绑的文件，而如果我理解正确的话，VS Code 调试器会在磁盘上搜索它们（...或者不是？...）

因此，每当我设置断点时，我都会感到害怕

Breakpoint ignored because generated code not found (source map problem?)

现在，我能找到的每个相关问题都主要与 typescript 有关，而不是 webpack-dev-server 从内存中提供服务这一事实。我没有使用打字稿。似乎人们要么没有使用 webpack-dev-server，要么我错过了一些明显的东西，我的钱花在了后者上。

这是我的 VS 代码launch.json

  // 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": "$workspaceRoot",
      "sourceMaps": true,
      "trace": true
    
  ]

这些是来自我的webpack.config.js的相关行

  devtool: 'cheap-module-source-map',
  output: 
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  ,

我尝试了对launch.json 的各种修改，但都无济于事，所以我只是将其粘贴为原版形式。

请注意，output.path 仅在有生产版本并且文件被喷到磁盘时使用。

以下是服务页面中文件的结构：

这是我在开发中运行的命令

  "scripts": 
    "start": "webpack-dev-server --host 0.0.0.0 --config ./webpack.config.js"
  ,

最后，这是来自跟踪文件的相关块

From target: "method":"Debugger.scriptParsed","params":"scriptId":"30","url":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js","startLine":0,"startColumn":0,"endLine":150,"endColumn":57,"executionContextId":2,"hash":"216099518F33D6091EC12795265804FB35669A30","executionContextAuxData":"isDefault":true,"frameId":"18228.1","isLiveEdit":false,"sourceMapURL":"manifest.0ec68ebd5f0abf9b4cd4.js.map","hasSourceURL":false,"isModule":false,"length":5906
Paths.scriptParsed: could not resolve http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js to a file under webRoot: e:\Mitch\Workspace\Projects\project-name. It may be external or served directly from the server's memory (and that's OK).
SourceMaps.getMapForGeneratedPath: Finding SourceMap for http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js by URI: manifest.0ec68ebd5f0abf9b4cd4.js.map and webRoot: e:\Mitch\Workspace\Projects\project-name
SourceMaps.loadSourceMapContents: Downloading sourcemap file from http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js.map
To client: "seq":0,"type":"event","event":"script","body":"reason":"new","script":"id":1,"source":"name":"manifest.0ec68ebd5f0abf9b4cd4.js","path":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js","sourceReference":1001
To client: "seq":0,"type":"event","event":"scriptLoaded","body":"path":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js"
SourceMap: creating for http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js
SourceMap: sourceRoot: 
SourceMap: sources: ["webpack:///webpack/bootstrap 7617f9bf7c8b0bc95159"]
SourceMap: webRoot: e:\Mitch\Workspace\Projects\project-name
SourceMap: no sourceRoot specified, using webRoot + script path dirname: e:\Mitch\Workspace\Projects\project-name\
SourceMap: mapping webpack:///webpack/bootstrap 7617f9bf7c8b0bc95159 => webpack\bootstrap 7617f9bf7c8b0bc95159, via sourceMapPathOverrides entry - "webpack:///*": "*"
SourceMaps.scriptParsed: http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js was just loaded and has mapped sources: ["webpack\\bootstrap 7617f9bf7c8b0bc95159"]

这让我发疯了，我在过去的 3 个小时里搜索了 Google，但无济于事，现在是凌晨 5 点。

更新：不幸的是，自从提出问题以来，我已经停止使用 VS Code 并改用 Webstorm。感谢大家的帮助和您的时间。

【问题讨论】：

刚刚在my project 上试过这个，它还通过添加 Chrome 启动 sn-p 来使用 webpack-dev-server，你只做了最少的修改 - "type": "chrome", "request": " launch", "name": "Launch Chrome against localhost", "url": "localhost:3000", "webRoot": "$workspaceRoot", "sourceMaps": true, "trace": true 我能调试。你能在最后试试吗？我通过yarn run start-ui 在 cmd 会话中运行该项目以启动 wds。然后我用vscode启动chrome。

不，我在 React 组件中添加的任何断点都会随着 Breakpoint ignored because generated code not found (source map problem?) 消息而丢失

这也可能有助于测试我的 repo。否则，如果您可以共享一个最小的 repo，我可以在最后尝试一下。这将排除任何与机器相关的问题。

好的，今晚晚些时候我会创建一个最小的 repo，届时我将有一些时间。

@DimitrisKaragiannis：你的理解是正确的。 Webpack-dev-server 不会将文件写入磁盘，因此在 Source 中放置任何断点都无济于事。您可以探索以下 2 个插件并尝试：github.com/gajus/write-file-webpack-plugingithub.com/FormidableLabs/webpack-disk-plugin

【参考方案1】：

根据我的经验（大约 15 分钟前），如果 'webpack.config.js' 具有上下文属性的值，则必须考虑 '.vscode/launch.json'。

例如，如果 'webpack.config.js' 有以下内容：

module.exports = 
  context: path.resolve(__dirname, 'src'),
  entry: './index.ts',

那么 launch.json 也需要那个上下文（'src'）：

"url": "http://localhost:8080/",
"webRoot": "$workspaceRoot/src",
"sourceMaps": true,

我刚刚更新/修复了我的 repo，所以现在应该绑定 TypeScript 断点。

https://github.com/marckassay/VSCodeNewProject

希望对你有帮助。

【讨论】：

这对我有用。我在 webpack.config.js 中有 context: resolve(__dirname, "app")，所以我必须将 '/app' 添加到 'webRoot' 键。这些是我的设置。 ` "配置": [ "type": "chrome", "request": "attach", "name": "附加到 Chrome", "port": 9222, "webRoot": "$workspaceFolder/app " , "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "localhost:5000", "webRoot": "$workspaceFolder /app" ]` 我使用 'Launch Chrome against localhost' 进行了调试。`

而且我还必须将 devtool 值更改为：devtool: "source-map"

在 webpack-config 中的关键变化是 devtool: "source-map"。

【参考方案2】：

对于 Webpack 4： 如果您还没有安装webpack-cli，请在本地安装它（它已从webpack 中拉出）。

将以下 VSCode 调试配置添加到您的 .vscode/launch.json（这是 VSCode 在调试视图中单击滚轮图标时打开的文件）：

  "type": "node",
  "request": "launch",
  "name": "build",
  "program": "$workspaceFolder/node_modules/.bin/webpack-cli",
  "args": [
    "--config",
    "webpack.config.prod.js"
  ],
  "autoAttachChildProcesses": true,
  "stopOnEntry": true

stopOnEntry 将使调试器停止在webpack.js 的第一行（shebang），如下所示：

【讨论】：

这样我就可以调试webpack源代码了。但是我想调试webpack.config.prod.js，你能给我什么建议吗？

除了挖掘webpack源之外别无他法。我对它不够熟悉，无法给你更好的建议。

无论如何谢谢你。

@TomIsion 我可以向您保证，您正在尝试做的事情不值得花时间，我怀疑它是否可以实现。使用 node ./your-file.webpack.js 或 try-n-fail 对其进行调试。

这对我来说非常有效。然而，我没有使用 webpack-cli，而是使用了 webpack-dev-server。然后我刚刚在我想要的文件上放置了断点。事实上，我正在调试我的 Postcss 插件。它工作得很好！

【参考方案3】：

旧线程，但它仍然出现在搜索...

感觉打开“将生成的代码写入磁盘”可能是这里的解决方案： 根据https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-，将其添加到 webpack.config.js：

module.exports = 
  //...
  devServer: 
    writeToDisk: true
  
;

【讨论】：

这是正确的答案。它对我有用，无需更改从官方文档中获取的任何配置。

就是这样！终于找到解决办法了

【参考方案4】：

如果有人对 webpack 的 start-server-webpack-plugin 感到困扰：

我最近遇到了同样的问题，@MarkoBonaci's answer 前来救援。但是，我遇到了 webpack 插件产生的另一个错误：start-server-webpack-plugin。

以下是我通过应用程序通过 vscode 的调试器启动时遇到的错误：

cd /home/me/projects/villager-topics ;环境“NODE_ENV=发展” /home/me/.nvm/versions/node/v11.6.0/bin/node --inspect-brk=33538 node_modules/.bin/webpack-cli --colors --progress --config ./webpack.dev.js 调试器正在监听 ws://127.0.0.1:33538/d8bb6d64-a1a1-466e-9501-6313a3dc8bcf 如需帮助， 请参阅：https://nodejs.org/en/docs/inspector 附加调试器。 clean-webpack-plugin: /home/rajeev/projects/villager-topics/dist 有 被移除。 10% 构建 1/1 模块 0 个活跃的 webpack 正在观看 文件……

在发出 StartServerPluginStarting 检查器后 98% 127.0.0.1:33538 失败：地址已在使用中

如您所见，StartServerPlugin 正在使用相同的端口 33538，该端口已被父进程占用。所以我们需要告诉StartServerPlugin 使用其他端口进行检查初始化。这个，我们可以通过StartServerPlugin的初始化来实现。

new StartServerPlugin(
  name: 'server.js',
  nodeArgs: ['--inspect=5858'], // allow debugging),
)

在nodeArgs 中，我们将检查端口指定为5858。保存此配置后，再通过vscode的Debugger重新启动应用，即可成功启动应用。

【讨论】：

我看不出这条评论与问题有什么关系