# プラグインのデバッグ

## ウィンドウプラグインのデバッグ <a href="#zqpdi" id="zqpdi"></a>

プラグインを開いた後、`F12`キーを押すと`DevTools`デバッグツールが開きます。

<figure><img src="https://1611209449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMvbOurypjZWfptd5H280%2Fuploads%2FeBGMKV4olPnge6KlPhgL%2Fimage.png?alt=media&#x26;token=24611935-6aef-4007-934f-45ad43d92fc7" alt=""><figcaption><p>DevTools</p></figcaption></figure>

具体的な手順は以下の通りです：

1. Eagleでデバッグしたいプラグインを開き、`F12`キーを押してDevToolsを開きます。
2. DevTools内で、プラグインのコードを確認し、ブレークポイントやデバッグツールを使ってプラグインの実行過程をデバッグできます。
3. DevTools内の他のツールを使用して、プラグインのパフォーマンスやメモリ使用状況などの情報を確認することもできます。

## サムネイルプラグインのデバッグ

サムネイルプラグインはバックグラウンドで実行され、コードはファイルの追加や更新時にのみ実行されます。サムネイル機能のコードをデバッグしたい場合は、`manifest.json`ファイルで`devTools`属性を`true`に設定し、コード内で`debugger`ブレークポイントを設定することで、`devTools`ツールでデバッグ作業が行えます。

## プレビュープラグインのデバッグ

開発したいファイル形式のファイルをEagleに追加して選択し、プラグインパネルを開き、開発中のプレビュープラグインをクリックすると、独立したプレビューウィンドウが開きます。`F12`キーを押すと`DevTools`が開いてデバッグができます。

{% hint style="info" %}
詳細を知る：DevToolsの使い方が分からない場合は、以下の学習資料を参照してください。

1. Google公式ドキュメント：<https://developers.google.com/web/tools/chrome-devtools>
2. MDN Webドキュメント：<https://developer.mozilla.org/ja/docs/Tools>
3. W3Schoolsチュートリアル：<https://www.w3schools.com/js/js_debugging.asp>
   {% endhint %}

## ロギングシステム <a href="#pui04" id="pui04"></a>

{% hint style="warning" %}
注意：プレビューおよびサムネイルプラグインは、現在、ログAPIに対応していません。
{% endhint %}

ログシステムは、ソフトウェアの実行状況を記録するためのツールであり、開発者が問題を迅速に特定し解決するのに役立ちます。ログシステムは、ソフトウェアのエラー情報、警告情報、実行時間などを記録し、デバッグツールとして機能します。非開発環境では、ログシステムは開発者が問題の原因を効果的に特定し、対策を講じるのに役立ちます。

Eagle Plugin API は、プラグインの実行情報を記録する [log](https://developer.eagle.cool/plugin-api/ja-jp/api/log) 機能を提供しており、開発者はこれによってプラグインの実行、警告、エラーなどの情報を Eagle ソフトウェアのログに記録できます。この機能を使用することで、ユーザーにデバッグレポートを提供するだけでこれらの情報にアクセスできます。プラグインの開発時には、ログ機能を使用することで開発者が問題を迅速に特定し解決するのに役立ちます。

```javascript
eagle.log.debug('debug message from plugin');
eagle.log.info('info message from plugin');
eagle.log.warn('warn message from plugin');
eagle.log.error('error message from plugin');

// [13:19:39.845] [debug] [plugin] "debug message from plugin"
// [13:19:39.845] [info] [plugin] "info message from plugin"
// [13:19:39.845] [warn] [plugin] "warn message from plugin"
// [13:19:39.845] [error] [plugin] "error message from plugin"
```

{% hint style="info" %}
もっと詳しく知る： [Log - API 参照](https://developer.eagle.cool/plugin-api/ja-jp/api/log)
{% endhint %}

{% hint style="info" %}
Eagle の[ソフトウェアログ](https://docs-jp.eagle.cool/article/92-how-do-i-get-the-error-log)の取得方法をご覧ください。
{% endhint %}