Engineer's Way

主にソフトウェア関連について色々書くブログです。

WebpackでビルドしたElectronアプリをVSCodeでデバッグする方法

 

(Visual Studio Code 1.21時点)
以下のように .launch.jsonpackage.json を書きます。

.launch.json

{
  "name": “browser process debug",
  "type": "node",
  "request": "launch",
  "outFiles": [
    "${workspaceRoot}/app/build/bundle_main.js",
  ],
  "stopOnEntry": false,
  "cwd": "${workspaceRoot}”,
  "runtimeExecutable":"${workspaceRoot}/app/node_modules/.bin/electron",
   "windows": {
       "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
    },
  "runtimeArgs": [
    "--remote-debugging-port=9223”,
    “."
  ],
  "protocol": "inspector",
},
{
  "name": "renderer process debug",
  "type": "chrome",
  "request": "attach",
  "port": 9223,
  "webRoot": "${workspaceRoot}",
  "timeout": 30000
}

package.json

{
  "main": "./app/build/main.js"
  :

ポイントは次の点です。

  1. outFileでバンドル後のファイルを指定すること。
    • バンドル後のファイルが複数あるなら、それら全部を指定します。globパターンもOK。
  2. ソースマップはinlineでも.mapファイルでもOKです。
  3. webpack:// を置換しないといけないという情報をよく見かけましたが、少なくともinspectorプロトコルデバッグする分には置換しなくても問題なかったです。