logo标签列表

如何在webpack-dev-server中使用VS Code调试器（忽略断点）

jsondebuggingwebpackvisual-studio-codewebpack-dev-server
58

我希望能让VS Code的调试器在不忽略我的断点的情况下与webpack-dev-server一起工作。

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

结果，每当我设置断点时，就会出现可怕的

断点被忽略，因为找不到生成的代码（源映射问题？）

现在，我能找到的所有相关问题主要涉及TypeScript，而与webpack-dev-server从内存中提供服务无关。 我没有使用TypeScript。 似乎人们要么不使用webpack-dev-server，要么我错过了一些明显的东西，我认为应该是后者。

这是我的VS Code 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相关代码：


并且这些是来自我的webpack.config.js相关代码。
  devtool: 'cheap-module-source-map',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },

我已经尝试了各种修改launch.json的方法，但都无济于事，所以现在我只是将其原样粘贴。

请注意，只有在生成构建并将文件输出到磁盘时才会使用output.path。

以下是页面中所呈现文件的结构：

enter image description here

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

  "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"]
1
我刚刚在我的项目上尝试了一下，该项目也使用了webpack-dev-server，并添加了你分享的Chrome启动片段，只进行了最小的修改 -{ "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceRoot}", "sourceMaps": true, "trace": true }我成功地进行了调试。你能否在你的端上尝试一下？我通过yarn run start-ui在cmd会话中运行项目以启动wds。然后我使用vscode启动了chrome。 - hazardous
不行，我在React组件中添加的任何断点都会丢失，并显示“断点被忽略，因为未找到生成的代码（源映射问题？）”的消息。 - Dimitris Karagiannis
1
也许使用我的存储库进行测试会有所帮助。否则，如果您可以共享一个最小的存储库，我可以在我的端尝试一下。这将排除任何与机器相关的问题。 - hazardous
好的，我今晚稍晚一些会有点时间，我会创建一个最小化代码库。 - Dimitris Karagiannis
@DimitrisKaragiannis：你的理解是正确的。 Webpack-dev-server不会将文件写入磁盘，因此在源代码中设置任何断点都没有帮助。您可以尝试使用以下两个插件进行探索： https://github.com/gajus/write-file-webpack-plugin https://github.com/FormidableLabs/webpack-disk-plugin - Ravi Roshan
显示剩余2条评论
4个回答
25

根据我的经验（大约15分钟前），如果'webpack.config.js'有一个context属性的值，那么就必须在'.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,

我刚刚更新/修复了我的存储库，现在TypeScript断点应该会绑定。

https://github.com/marckassay/VSCodeNewProject

这对我有用。在webpack.config.js中，我有context: resolve(__dirname, "app")，所以我必须将'/app'添加到'webRoot'键中。这是我的设置。"configurations": [ { "type": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, "webRoot": "${workspaceFolder}/app" }, { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:5000", "webRoot": "${workspaceFolder}/app" } ] 我使用“Launch Chrome against localhost”进行了调试。 - frogec
我还必须将devtool的值更改为：devtool: "source-map"。 - frogec
1
关键更改是在webpack配置中的devtool: "source-map"。 - Mark
12

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

将以下 VSCode 调试配置添加到您的 .vscode/launch.json 文件中（这是在 Debug 视图中单击轮子图标时 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），如下所示：

VSCode debugger stops without any breakpoints

通过这种方式，我可以调试webpack源代码。但是我想要调试webpack.config.prod.js，你能给我一些建议吗？ - tomision
除了深入研究 webpack 源代码，我没有足够的熟悉度来给你更好的建议。 - Marko Bonaci
1
那对我来说完美地运作了。不过，我使用的是webpack-dev-server而不是webpack-cli。然后，我只是在我想要的文件上设置了断点。事实上，我正在调试我的Postcss插件。它工作得很好！ - Andre Evangelista
@AndreEvangelista很高兴听到它有所帮助 :) - Marko Bonaci
@AndreEvangelista 我尝试模仿你的步骤，但是当我尝试在.vue文件中设置断点时，仍然会出现“断点被忽略，因为找不到生成的代码（源映射问题？）”。 有什么解决办法吗？ 但是它确实像预期的那样在第一个shebang处中断。 - lukkyjoe
显示剩余2条评论
7

虽然是旧线程，但它仍然会出现在搜索结果中...

感觉打开“将生成的代码写入磁盘”可能是解决方案： (v4及以前版本) 按照 https://v4.webpack.js.org/configuration/dev-server/#devserverwritetodisk-，将其添加到webpack.config.js中：

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

v5及以后版本： https://webpack.js.org/configuration/dev-server/#devserverdevmiddleware

module.exports = {
  devServer: {
    devMiddleware: {
      ...
      writeToDisk: true,
    },
  },
};
现在这个属于 devServer.devMiddleware 下面。 - Torque
0

如果有人在使用webpack的start-server-webpack-plugin时遇到问题：

最近我也遇到了同样的问题，@MarkoBonaci's answer帮了我很大的忙。但是，我又遇到了由webpack插件start-server-webpack-plugin产生的另一个错误。

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

cd /home/me/projects/villager-topics ; env "NODE_ENV=development" /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已被删除。正在构建1/1个模块，共10%。webpack正在监视文件... 在发出StartServerPlugin时，98%的开始检查器失败了 127.0.0.1:33538已经在使用中

正如您所看到的，StartServerPlugin 正在使用与父进程已占用的端口 33538 相同的端口。因此，我们需要告诉 StartServerPlugin 使用其他端口进行检查初始化。我们可以通过初始化 StartServerPlugin 来实现这一点。

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

在这里，我们在nodeArgs中指定了检查端口为5858。保存此配置后，通过vscode的调试器重新启动应用程序，您将成功启动应用程序。

我不明白这条评论与问题有什么关联。 - Gyuri
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接