返回

用 Eruda，你的网页调试从前端到后端无所不能

前端

Eruda 是什么？

Eruda 是一款免费开源的移动端网页调试工具。它可以帮助你快速发现 HTML/CSS 错误、调整 CSS 样式、实时跟踪和修改变量值，甚至可以模拟网络请求和查看请求/响应数据。

Eruda 的特点

  • 轻量级 ：Eruda 只有不到 100KB，不会对你的网页性能造成明显影响。
  • 易于使用 ：Eruda 的界面非常友好，即使你是新手也能轻松上手。
  • 功能强大 ：Eruda 提供了丰富的调试功能，可以满足你日常开发的需要。

如何使用 Eruda

  1. 下载 Eruda。你可以在 GitHub 上找到 Eruda 的下载地址。

  2. 将 Eruda 添加到你的网页中。你可以通过两种方式将 Eruda 添加到你的网页中：

    • 直接添加 ：在你的网页中添加以下代码：
    <script src="eruda.min.js"></script>
    • 使用 CDN ：在你的网页中添加以下代码：
    <script src="https://cdn.jsdelivr.net/npm/eruda/eruda.min.js"></script>

  3. 打开 Eruda。在你的网页中按 Ctrl+Alt+E (Windows) 或 Cmd+Alt+E (Mac) 打开 Eruda。

Eruda 的功能

Eruda 提供了丰富的调试功能，包括：

  • HTML/CSS 错误检查 ：Eruda 可以帮助你快速发现 HTML/CSS 错误，并提供详细的错误信息。
  • CSS 样式调整 ：Eruda 允许你实时调整 CSS 样式，而无需重新加载网页。
  • 变量值跟踪和修改 ：Eruda 可以让你实时跟踪和修改变量值，这在调试 JavaScript 代码时非常有用。
  • 网络请求模拟和查看 ：Eruda 可以让你模拟网络请求，并查看请求/响应数据。这在调试后端代码时非常有用。

Eruda 的优势

与其他移动端网页调试工具相比，Eruda 具有以下优势：

  • 轻量级 ：Eruda 只有不到 100KB，不会对你的网页性能造成明显影响。
  • 易于使用 ：Eruda 的界面非常友好，即使你是新手也能轻松上手。
  • 功能强大 ：Eruda 提供了丰富的调试功能，可以满足你日常开发的需要。
  • 免费开源 ：Eruda 是免费开源的，你可以随意使用和修改。

Eruda 的不足

与其他移动端网页调试工具相比，Eruda 也存在一些不足之处：

  • 不支持所有浏览器 ：Eruda 目前只支持 Chrome、Firefox 和 Safari 浏览器。
  • 不支持所有设备 ：Eruda 目前只支持 iOS 和 Android 设备。

结语

Eruda 是一款非常优秀的移动端网页调试工具。它轻量级、易于使用、功能强大，可以满足你日常开发的需要。如果你正在寻找一款移动端网页调试工具，那么 Eruda 一定是你的不二之选。