Figmaプラグイン開発のデバッグ方法

# はじめに
こちらは[FigmaプラグインAdvent Calendar 2019](https://qiita.com/advent-calendar/2019/figma-plugin)の3日目の記事です。

Figmaプラグイン開発を始める上で、使えると便利なデバッグの方法をご紹介します。

基本的には以下に載っている方法の紹介です。
https://www.figma.com/plugin-docs/debugging/

## デバッグ方法
早速デバッグ方法を紹介していきます。
### 1. コンソール出力
実際の開発でとりあえずコンソールに値を出力してみる、ということがあると思います。Figmaプラグインでも同様のことを行うことができます。

今回は1日目の[figmaプラグイン開発の準備](https://qiita.com/tatsuyafukui/items/b8b01218e9ef1020aacb)の内容を使ってコンソール出力を利用してみましょう。

#### step1. console.logをコードに書き込む
出力させたい箇所でconsole.logを書きましょう。
`console.log(nodes);`

#### step2. figma.closePlugin()をコメントアウトする
これはプラグインの処理が終了してしまうと、オブジェクトに(...)という部分があるのですが、そこがErrorで読み取ってくれません。プラグインを終了させないように、figma.closePlugin()をコメントアウトしましょう。
※figma.closePlugin()をコメントアウトしていないので、Errorになってしまっている図
<img width="895" alt="スクリーンショット 2019-12-03 22.37.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88234/eea676ef-9235-3d16-19b9-ef0e43f16511.png">

↓step1,2を書いたコード

```code.ts
// This plugin will open a modal to prompt the user to enter a number, and
// it will then create that many rectangles on the screen.

// This file holds the main code for the plugins. It has access to the *document*.
// You can access browser APIs in the <script> tag inside "ui.html" which has a
// full browser enviroment (see documentation).

// This shows the HTML page in "ui.html".
figma.showUI(__html__);

// Calls to "parent.postMessage" from within the HTML page will trigger this
// callback. The callback will be passed the "pluginMessage" property of the
// posted message.
figma.ui.onmessage = msg => {
  // One way of distinguishing between different types of messages sent from
  // your HTML page is to use an object with a "type" property like this.
  if (msg.type === 'create-rectangles') {
    const nodes: SceneNode[] = [];
    for (let i = 0; i < msg.count; i++) {
      const rect = figma.createRectangle();
      rect.x = i * 150;
      rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];
      figma.currentPage.appendChild(rect);
      nodes.push(rect);
    }
    console.log(nodes) //nodesを出力してみる
    figma.currentPage.selection = nodes;
    figma.viewport.scrollAndZoomIntoView(nodes);
  }

  // Make sure to close the plugin when you're done. Otherwise the plugin will
  // keep running, which shows the cancel button at the bottom of the screen.
  // figma.closePlugin(); // コメントアウトする
};

```
#### step3. OpenConsoleを開く
次にFigmaのOpenConsoleを開きましょう。
Figmaのメニュー → Plugins → Development → Open Consoleをクリック
<img width="653" alt="スクリーンショット 2019-12-03 22.53.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88234/b68c262f-a72a-07ce-d7ba-fe7ab5b3b737.png">


開くとこんな感じです。
<img width="898" alt="スクリーンショット 2019-12-03 22.40.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88234/ebf8c286-cd5d-bbca-1852-5d9baee10b75.png">


#### step4. 実行
では実行してみましょう。
Figmaのメニュー → Plugins → Development → プラグイン名
実行するとConsoleタブに出力結果が表示されます。

こんな感じ。
<img width="895" alt="スクリーンショット 2019-12-03 22.38.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88234/e84080c0-551c-428c-1b49-ed52dcc00feb.png">


#### step5. プラグインの終了
figma.closePlugin()をコメントアウトしているので、処理が終了されません。コンソール出力を確認し終えたら、figma.closePlugin()をConsoleで実行しましょう。
処理が終了します。
<img width="898" alt="スクリーンショット 2019-12-03 22.43.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88234/5cb621c0-7ee5-1786-f40f-3629c3317620.png">


### 2. DeveloperVM
こちらを使うとGoogleChromeのディベロッパーツールと同じようにステップ実行などができます。複雑な開発をする上では欠かせない方法ですね！

#### step1. Debuggerの埋め込み
ソースコードの止めたい箇所にdebuggerを埋め込みましょう。

```code.ts
// This plugin will open a modal to prompt the user to enter a number, and
// it will then create that many rectangles on the screen.

// This file holds the main code for the plugins. It has access to the *document*.
// You can access browser APIs in the <script> tag inside "ui.html" which has a
// full browser enviroment (see documentation).

// This shows the HTML page in "ui.html".
figma.showUI(__html__);

// Calls to "parent.postMessage" from within the HTML page will trigger this
// callback. The callback will be passed the "pluginMessage" property of the
// posted message.
figma.ui.onmessage = msg => {
  // One way of distinguishing between different types of messages sent from
  // your HTML page is to use an object with a "type" property like this.
  if (msg.type === 'create-rectangles') {
    const nodes: SceneNode[] = [];
    debugger; // 止めたいところでdebuggerを書く
    for (let i = 0; i < msg.count; i++) {
      const rect = figma.createRectangle();
      rect.x = i * 150;
      rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];
      figma.currentPage.appendChild(rect);
      nodes.push(rect);
    }
    
    figma.currentPage.selection = nodes;
    figma.viewport.scrollAndZoomIntoView(nodes);
  }

  // Make sure to close the plugin when you're done. Otherwise the plugin will
  // keep running, which shows the cancel button at the bottom of the screen.
  figma.closePlugin();
};

```

#### step2. DeveloperVMをオンにする
DeveloperVMはデフォルトではオフになっています。
Figmaのメニュー → Plugins → Development → Use Developer VMをクリックしてオンにします。

※「Use Developer VM」にチェックがつけばOK
<img width="653" alt="スクリーンショット 2019-12-03 22.45.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88234/7e03b08d-0e82-8257-641c-811ef4daa05e.png">


#### step3. 実行
では実行してみましょう。
Figmaのメニュー → Plugins → Development → プラグイン名

こんな感じで止めることができました。
<img width="897" alt="スクリーンショット 2019-12-03 22.46.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88234/88f74a4d-6fbd-d21b-2718-25010c2a494f.png">

あとはディベロッパーツールと同じようにいろいろ確認してみましょう！

# 最後に
以上2つのデバッグ方法を紹介しました。
デバッグを駆使して、Figmaプラグイン開発をしていきましょう！

どなたかの助けになれば嬉しいです。ありがとうございました！