> For the complete documentation index, see [llms.txt](https://developer.eagle.cool/plugin-api/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.eagle.cool/plugin-api/zh-tw/get-started/debugging.md).

# 除錯插件

## 視窗插件除錯 <a href="#zqpdi" id="zqpdi"></a>

開啓插件後，點擊 `F12`鍵即可開啓 `DevTools` 除錯工具。

<figure><img src="/files/s88MBvGx0ibjVZwokEWR" alt=""><figcaption></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/zh-CN/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](/plugin-api/zh-tw/api/log.md) 功能，這樣，開發人員就可以將插件的執行、警告、錯誤等資訊記錄在 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 參考](/plugin-api/zh-tw/api/log.md)
{% endhint %}

{% hint style="info" %}
點擊這裏查看 Eagle [軟體日誌](https://docs-cn.eagle.cool/article/92-how-do-i-get-the-error-log)取得方式。
{% endhint %}