# 调试插件

## 窗口插件调试 <a href="#zqpdi" id="zqpdi"></a>

打开插件后，点击 `F12`键即可打开 `DevTools` 调试工具。

<figure><img src="https://3660253004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZrMIIw27Dg9HnexbzyY%2Fuploads%2Fgit-blob-d8ac432fb05d0a6afa3de5926aa74d57579a69c4%2Fimage%20(5).png?alt=media" 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](https://developer.eagle.cool/plugin-api/zh-cn/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/zh-cn/api/log)
{% endhint %}

{% hint style="info" %}
点击这里查看 Eagle [软件日志](https://docs-cn.eagle.cool/article/92-how-do-i-get-the-error-log)获取方式。
{% endhint %}