json 如何在 webpack-dev-server 中使用 VS Code 调试器（忽略断点）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46438471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use VS Code debugger with webpack-dev-server (breakpoints ignored)
提问by Dimitris Karagiannis
My problem is simple.
我的问题很简单。
I just want to make VS Code's debugger work with webpack-dev-server without ignoring my breakpoints.
我只想让 VS Code 的调试器与 webpack-dev-server 一起工作，而不会忽略我的断点。
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?...)
现在，webpack-dev-server 从内存中提供捆绑的文件，而如果我理解正确，VS Code 调试器会在磁盘上搜索它们（...或不是？...）
As a result, whenever I set a breakpoint I get the dreaded
结果，每当我设置断点时，我都会感到害怕
Breakpoint ignored because generated code not found (source map problem?)
Breakpoint ignored because generated code not found (source map problem?)
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.
现在，我能找到的每个相关问题都主要与打字稿有关，而不是与 webpack-dev-server 从内存中提供服务的事实有关。我没有使用打字稿。似乎人们要么没有使用 webpack-dev-server，要么我遗漏了一些显而易见的东西，而我的钱却花在了后者上。
This is my VS Code launch.json
这是我的 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
}
]
}
and these are the related lines from my webpack.config.js
这些是我的相关线路 webpack.config.js
devtool: 'cheap-module-source-map',
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
I have tried various modifications to the launch.jsonto no avail, so I am just pasting it in vanilla form.
我尝试了各种修改launch.json都无济于事，所以我只是将它粘贴为香草形式。
Note that the output.pathis only used when there is a production build and the files are spewed to disk.
请注意，output.path只有在有生产构建并且文件被喷到磁盘时才使用。
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"]
This is driving me insane, I have spent the last 3 hours scouring the Googles to no avail and it's currently 5AM.
这让我发疯了，过去 3 个小时我一直在搜索 Google，但无济于事，现在是凌晨 5 点。
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.
更新：不幸的是，自从提出这个问题以来，我已经停止使用 VS Code 并改用 Webstorm。感谢大家的帮助和您的时间。
回答by marckassay
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'.
根据我的经验（大约 15 分钟前），如果 'webpack.config.js' 具有上下文属性的值，那么必须考虑到 '.vscode/launch.json'。
For an example, if 'webpack.config.js' has the following:
例如，如果 'webpack.config.js' 具有以下内容：
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: './index.ts',
Then launch.json needs that context ('src') too:
然后 launch.json 也需要该上下文 ('src')：
"url": "http://localhost:8080/",
"webRoot": "${workspaceRoot}/src",
"sourceMaps": true,
I just updated/fixed my repo so now TypeScript breakpoints should bind.
我刚刚更新/修复了我的 repo，所以现在应该绑定 TypeScript 断点。
https://github.com/marckassay/VSCodeNewProject
https://github.com/marckassay/VSCodeNewProject
I hope that helps.
我希望这有帮助。
回答by Marko Bonaci
For Webpack 4:
Install webpack-clilocally if you don't already have it installed (it has been pulled out of webpack).
对于 Webpack 4：如果您还没有
安装，请webpack-cli在本地安装（已从 中拉出webpack）。
Add the following VSCode debug configuration to your .vscode/launch.json(that's the file that VSCode opens when you click on the wheel icon in Debug view):
将以下 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
}
stopOnEntrywill make debugger stop in the very first (shebang) line of webpack.js, like this:
stopOnEntry将使调试器在 的第一行（shebang）停止webpack.js，如下所示：
回答by Gyuri
Old thread, but it still comes up in searches...
旧线程，但它仍然出现在搜索中...
It feels like turning on "writing the generated code to disk" might be the solution here: As per https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-, add this to webpack.config.js:
感觉打开“将生成的代码写入磁盘”可能是这里的解决方案：根据https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-，将其添加到 webpack.config.js：
module.exports = {
//...
devServer: {
writeToDisk: true
}
};
回答by Rajeev K Tomy
If in case someone troubling with start-server-webpack-pluginof webpack:
如果有人start-server-webpack-plugin对 webpack感到困扰：
I have recently stuck on the same issue and @MarkoBonaci's answercame to rescue. However, I stuck on another error which is produced by the webpack plugin: start-server-webpack-plugin.
我最近遇到了同样的问题，@MarkoBonaci 的回答就派上用场了。但是，我遇到了另一个由 webpack 插件产生的错误：start-server-webpack-plugin.
Below is the error I got, when I launched by application via debugger of vscode:
下面是我得到的错误，当我通过 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 Debugger listening on ws://127.0.0.1:33538/d8bb6d64-a1a1-466e-9501-6313a3dc8bcf For help, see: https://nodejs.org/en/docs/inspectorDebugger attached. clean-webpack-plugin: /home/rajeev/projects/villager-topics/dist has been removed. 10% building 1/1 modules 0 active webpack is watching the files…
98% after emitting StartServerPluginStarting inspector on 127.0.0.1:33538 failed: address already in use
cd /home/me/projects/village-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 Debugger 监听 ws://127.0.0.1:33538/d8bb6d64-a1a1-466e-9501-6313a3dc8bcf 如需帮助，请参阅：https://nodejs.org/en/docs/inspector Debugger。clean-webpack-plugin: /home/rajeev/projects/village-topics/dist 已被删除。10% 构建 1/1 模块 0 活跃的 webpack 正在监视文件……
在 127.0.0.1:33538 上发出 StartServerPluginStarting 检查器后 98% 失败：地址已在使用中
As you can see StartServerPluginis using the same port 33538which is already taken by the parent process. So we need to tell StartServerPluginto use some other port for its inspection initialization. This, we can achieve through the initialization of StartServerPlugin.
如您所见，StartServerPlugin正在使用33538父进程已占用的相同端口。所以我们需要告诉StartServerPlugin使用其他端口进行检查初始化。这一点，我们可以通过初始化来实现StartServerPlugin。
new StartServerPlugin({
name: 'server.js',
nodeArgs: ['--inspect=5858'], // allow debugging),
})
Here in nodeArgswe are specifying the inspect port as 5858. After this configuration is saved and then relaunch the application through Debugger of vscode, you will successfully start the application.
在这里，nodeArgs我们将检查端口指定为5858. 这个配置保存后，再通过vscode的Debugger重新启动应用程序，就可以成功启动应用程序了。
