如何在webpack-dev-server中使用VS Code调试器(忽略断点) [英] How to use VS Code debugger with webpack-dev-server (breakpoints ignored)

问题描述

我的问题很简单.

我只想让VS Code的调试器与webpack-dev-server一起使用，而不会忽略我的断点.

I just want to make VS Code's debugger work with webpack-dev-server without ignoring my breakpoints.

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

Now, webpack-dev-server serves the bundled files from memory, while, if I understand this correctly, the VS Code debugger searches for them on disk (...or not?...)

结果，每当我设置一个断点时，我都会感到恐惧

As a result, whenever I set a breakpoint I get the dreaded

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

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

Now, every related question I could find had to do with typescript mostly, and not with the fact that webpack-dev-server serves from memory. I am not using typescript. Seems that people are either not using webpack-dev-server, or I am missing something blatantly obvious, with my money on the latter.

这是我的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进行各种修改都无济于事，所以我只是将其粘贴为原始形式.

I have tried various modifications to the launch.json to no avail, so I am just pasting it in vanilla form.

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

Note that the output.path is only used when there is a production build and the files are spewed to disk.

以下是所提供页面中文件的结构:

Here is what the structure of the files is in the served page:

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

And here is the command I am running in development

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

最后，这是跟踪文件中的一个相关块

Finally, here is a relevant chunk from the trace file

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点.

This is driving me insane, I have spent the last 3 hours scouring the Googles to no avail and it's currently 5AM.

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

UPDATE: Unfortunately, ever since making the question, I have stopped using VS Code and switched to Webstorm instead. Thanks all for the help and for your time.

推荐答案

根据我的经验(大约15分钟前)，如果"webpack.config.js"具有context属性的值，则必须考虑该值表示".vscode/launch.json".

From my experience (about 15 mins ago), if 'webpack.config.js' has a value for the context property, then that has to be accounted for for '.vscode/launch.json'.

例如，如果"webpack.config.js"具有以下内容:

For an example, if 'webpack.config.js' has the following:

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

然后launch.json也需要该上下文('src'):

Then launch.json needs that context ('src') too:

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

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

I just updated/fixed my repo so now TypeScript breakpoints should bind.

https://github.com/marckassay/VSCodeNewProject

我希望能帮上忙.

这篇关于如何在webpack-dev-server中使用VS Code调试器(忽略断点)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！