⚡

[Electron] VSCodeを使用してメインプロセス、レンダラープロセスを同時にデバッグする

2022/05/14に公開

Electron

TypeScript

VS Code

tech

概要

ElectronアプリをVS Codeを使用してメインプロセス、レンダラープロセスを同時にデバッグできる方法をまとめておきます

方法のネタ元はこちらのリンクになります

使用するプロジェクトはこちらの記事のコードを使います
Electron + React + TypeScript の環境構築 (Early 2022)

なお、ホットリロードの対応方法はわかりませんでした

コード

完成品はこちらにおいておきます

launch.json

ネタ元のコードそのままになります
compoundsを使用しメインプロセス、レンダラープロセスのデバッガをそれぞれ起動させます
ビルドに時間がかかる場合は、"timeout": 60000　を増やしておきましょう

{
  // 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": [
    {
      "name": "Electron: Main",
      "type": "node",               //use the node debugger that comes with VS Code
      "request": "launch",
      "env": {"NODE_ENV": "development"},
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "runtimeArgs": [
        "--remote-debugging-port=9223"  //open debugging port for renderer process
      ],
      "args" : ["."],
      "outputCapture": "std",
      "sourceMaps": true,
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",        //use source maps for files in workspace folder
        "!**/node_modules/**"           //but ignore everything in the node_modules folder
      ],
      "preLaunchTask": "npm: compile"   //recompile before debugging (execute the compile script defined in package.json)
    },
    {
      "name": "Electron: Renderer",
      "type": "pwa-chrome",             //use the Chrome debugger that comes with VS Code
      "request": "attach",
      "port": 9223,                     //use debug port opened in Electron: Main configuration
      "webRoot": "${workspaceFolder}",
      "timeout": 60000
    }
  ],
  "compounds": [                        //launch multiple configurations concurrently
    {
      "name": "Electron: All",
      "configurations": [
        "Electron: Main",
        "Electron: Renderer"
      ]
    }
  ]
}

package.json

ホットリロード無しでビルドするスクリプトを追加します

  "scripts": {
    "compile": "tsc -p tsconfig.main.json && cross-env NODE_ENV=\"development\" NO_WATCH=\"true\" webpack",
  },

tsconfig.json

ソースマップを出力させておきます

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "esModuleInterop": true,
    "sourceMap": true,
    "moduleResolution": "Node",
    "lib": ["DOM", "ES2020"],
    "jsx": "react",
    "strict": true
  },
  "ts-node": {
    "compilerOptions": {
      "target": "ES2020",
      "module": "CommonJS"
    }
  }
}

webpack.config.ts

ホットリロード無しのビルドができるように改造します

const noWatch = process.env.NO_WATCH === "true";
const watchFlag = !noWatch && isDev;

const common: Configuration = {
  mode: isDev ? 'development' : 'production',
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
  },
  externals: ['fsevents'],
  output: {
    publicPath: './',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(ico|png|jpe?g|svg|eot|woff?2?)$/,
        type: 'asset/resource',
      },
    ],
  },
  watch: watchFlag,
  devtool: isDev ? 'inline-source-map' : undefined,
};