web-dev-qa-db-ja.com

VS Codeデバッガーをwebpack-dev-serverで使用する方法（ブレークポイントは無視されます）

私の問題は簡単です。

ブレークポイントを無視せずに、VS Codeのデバッガをwebpack-dev-serverで動作させたいだけです。

これで、webpack-dev-serverはメモリからバンドルされたファイルを提供しますが、これを正しく理解していれば、VS Codeデバッガーはディスク上でそれらを検索します（...かどうか？）

その結果、ブレークポイントを設定するたびに恐ろしい

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

今、私が見つけることができるすべての関連する質問は、webpack-dev-serverがメモリから提供されるという事実ではなく、ほとんどTypeScriptに関係していました。 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は、実動ビルドがあり、ファイルがディスクに吐き出される場合にのみ使用されることに注意してください。

提供されるページでのファイルの構造は次のとおりです。

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"]

これは私を狂気に駆り立てます。私は最後の3時間をGoogleを探し回って無駄にし、現在は午前5時です。

UPDATE：残念ながら、質問をして以来、VS Codeの使用をやめ、代わりにWebstormに切り替えました。助けてくれてありがとう。

jsondebuggingwebpackvisual-studio-codewebpack-dev-server
28
Dimitris Karagiannis

私の経験（約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,

レポジトリを更新/修正したため、TypeScriptブレークポイントがバインドされるようになりました。

https://github.com/marckassay/VSCodeNewProject

それがお役に立てば幸いです。

16
marckassay

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の最初の（シェバン）行でデバッガーを停止します。

VSCode debugger stops without any breakpoints

6
Marko Bonaci

古いスレッドですが、それでも検索で表示されます...

「生成されたコードをディスクに書き込む」をオンにすることが、ここでの解決策になる可能性があります： https://webpack.js.org/configuration/dev-server/#devserverwritetodisk- に従って、これを追加しますwebpack.config.jsへ：

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

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は削除されました。 1/1モジュールを構築する10％0アクティブなwebpackがファイルを監視しています…

127.0.0.1:33538でStartServerPluginStartingインスペクターを送信した後の98％が失敗しました：アドレスはすでに使用されています

ご覧のとおり、StartServerPluginは親プロセスがすでに使用している同じポート33538を使用しています。したがって、検査の初期化に他のポートを使用するようにStartServerPluginに指示する必要があります。これは、StartServerPluginを初期化することで実現できます。

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

ここでnodeArgsでは、検査ポートを5858として指定しています。この構成を保存し、vscodeのデバッガーを介してアプリケーションを再起動すると、アプリケーションが正常に起動します。

0
Rajeev K Tomy