如何将VS代码调试器与webpack-dev-server一起使用(忽略断点)

mum43rcc  于 2023-03-23  发布在  Webpack
关注(0)|答案(4)|浏览(146)

我只是想让VS Code的调试器与webpack-dev-server一起工作,而不忽略我的断点。
现在,webpack-dev-server从内存中提供捆绑的文件,而如果我理解正确的话,VS Code调试器会在磁盘上搜索它们(......或不是?......)
因此,每当我设置一个断点时,我都会遇到可怕的
Breakpoint ignored because generated code not found (source map problem?)
现在,我能找到的每一个相关问题都与typescript有关,而不是webpack-dev-server从内存中服务的事实。我没有使用typescript。似乎人们要么不使用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"]
nmpmafwu

nmpmafwu1#

根据我的经验(大约15分钟前),如果'webpack.config.js'有一个context属性的值,那么必须考虑'.vscode/launch.json'。
例如,如果“webpack.config.js”具有以下内容:

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

然后launch.json也需要这个context('src'):

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

我刚刚更新/修复了我的repo,所以现在TypeScript断点应该绑定。
https://github.com/marckassay/VSCodeNewProject

5w9g7ksd

5w9g7ksd2#

对于网络包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的第一行停止,如下所示:

0x6upsns

0x6upsns3#

旧的线程,但它仍然出现在搜索...
感觉打开“将生成的代码写入磁盘”可能是这里的解决方案:(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,
    },
  },
};
xesrikrc

xesrikrc4#

如果有人对webpack的start-server-webpack-plugin有问题:

我最近在同一个问题上卡住了,@MarkoBonaci的答案来拯救。然而,我在另一个错误上卡住了,这个错误是由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已被删除。10%正在构建1/1模块0活动的webpack正在查看文件...
在127.0.0.1:33538上发出StartServerPluginStarting inspector后98%失败:地址已在使用中
正如你所看到的,StartServerPlugin正在使用父进程已经占用的同一个端口33538。所以我们需要告诉StartServerPlugin使用其他端口进行检查初始化。这可以通过初始化StartServerPlugin来实现。

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

nodeArgs中,我们将inspect端口指定为5858。保存此配置后,然后通过vscode的Debugger重新启动应用程序,您将成功启动应用程序。

相关问题