13
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[翻訳] VSCodeでElectronのメインプロセスとレンダラープロセスの両方を同時にデバッグする方法

Last updated at Posted at 2018-01-19

これはElectron debugging (main and renderer process)の翻訳です。ElectronにはNodeJS内で実行されるメインプロセス(Main process)とChromium内で実行されるレンダラープロセス(Renderer process)という2種類のプロセスがあり、それぞれに異なるデバッガーを利用する必要があります。この記事ではVSCodeを使ってこの2つのプロセスを同時にデバッグする方法を紹介しています。

Note: デバッガーはInspectorプロトコルに依存しているためElectron 1.7.4以降を使うようにしてください。

最初に

  1. 最新のVSCodeがインストールされていることを確認してください
  2. VSCodeに最新のDebugger for Chromeがインストールされていることを確認してください
  3. このガイドはelectron-Quick-start projectの利用を想定してします。最初にリポジトリをcloneしてください
git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start
npm install
code .

launch.jsonファイルを設定する

  • アクティビティーバーのデバッグアイコンをクリックしてデバッグビューを表示してください。次にlaunch.jsonファイルを設定するために歯車アイコンをクリックしChromeを環境として選択してください
    configure_launch.png
  • 生成されたlaunch.jsonファイルの内容を次の2つの設定で置き換えてください
  {
      "version": "0.2.0",
      "configurations": [
          {
              "type": "node",
              "request": "launch",
              "name": "Electron: Main",
              "protocol": "inspector",
              "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
              "runtimeArgs": [
                  "--remote-debugging-port=9223",
                  "."
              ],
              "windows": {
                  "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
              }
          },
          {
              "name": "Electron: Renderer",
              "type": "chrome",
              "request": "attach",
              "port": 9223,
              "webRoot": "${workspaceRoot}",
              "timeout": 30000
          }
      ],
      "compounds": [
          {
              "name": "Electron: All",
              "configurations": [
                  "Electron: Main",
                  "Electron: Renderer"
              ]
          }
      ]
  }

メインプロセスをデバッグする

  1. main.jsの16行目、createWindow関数内にブレークポイントをセットしてください
  2. デバッグビューを開き、'Electron: Main'コンフィグレーションを選択してF5キーを押すか緑の再生ボタンをクリックしてください
  3. VSCodeがあなたのElectronアプリケーションを開始し、main.jsの16行目でブレークポイントがヒットするはずです
    breakpoint_main.png

レンダラープロセスをデバッグする

  1. renderer.jsを以下の内容に更新してください

       // This file is required by the index.html file and will
       // be executed in the renderer process for that window.
       // All of the Node.js APIs are available in this process.
    
       function test() {
           console.log('test')
       }
    
       test()
    
  2. デバッグセッションが実行中の間、デバッグビューを開いて、'Electron: Renderer'コンフィグレーションを選択できます。これはVSCodeをElectronレンダラープロセスに接続します。

  3. 接続されたらrenderer.jsを開きブレークポイントを6行目にセットしてください

  4. あなたのElectronアプリケーションのウインドウを開き、ブレークポイントがセットされることを確実にするためにページをリロード(View -> reload または CMD+R)してください

  5. renderer.jsの6行目のブレークポイントがヒットするはずです。これでレンダラープロセスをデバッグできます
    breakpoint_renderer.png

2つのプロセスを同時にデバッグする

メインプロセスとレンダラープロセスの両方をデバッグすることを学んだので2つのデバッグセッションを同時に開始する混合コンフィグレーションの長所を利用できます。

  1. デバッグビューを開き、'Electron: All'コンフィギュレーションを選択してください。これはVSCodeをメインプロセスとレンダラープロセスの両方に接続しスムーズな開発の流れを可能にします
  2. ブレークポイントをファイルの任意の場所にセットしてください
  3. 楽しんで🎉🔥
13
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?