11、调试与测试

在完成插件开发后，调试和测试是确保插件稳定性和功能完整性的重要步骤。本章将详细讲解如何使用 Chrome 开发者工具进行调试，并介绍一些常见的错误及其解决方法，最后还会指导你编写自动化测试脚本。

11.1 使用 Chrome 开发者工具进行调试

Chrome 开发者工具是调试插件最常用且强大的工具。它提供了丰富的功能，可以帮助你找到和修复问题。

11.1.1 打开 Chrome 开发者工具

1. 在 Chrome 中打开你的插件页面，比如 popup.html。
2. 右键单击页面，然后选择“检查”。
3. 这样就会打开 Chrome 开发者工具。

11.1.2 调试 Popup 页面

在开发者工具中，你可以查看 HTML 结构、CSS 样式和 JavaScript 代码。以下是一些常用的调试技巧：

• 检查 HTML 和 CSS：在“Elements”面板中，你可以查看和编辑 HTML 结构和 CSS 样式。通过实时修改，可以快速看到效果。
• 查看控制台输出：在“Console”面板中，你可以看到由 console.log() 等语句输出的消息，这对于调试非常有用。
• 设置断点调试代码：在“Sources”面板中，你可以设置断点，逐步执行代码，查看变量的值和执行路径。

// popup.js 示例代码
document.getElementById("translateBtn").addEventListener("click", function () {
  console.log("Translate button clicked");
  // 断点设置在这里
  chrome.runtime.sendMessage({ action: "translate" });
});

11.1.3 调试 Content Script

内容脚本的调试稍有不同。你需要在目标网页中打开开发者工具来查看和调试内容脚本。

1. 在目标网页上右键单击，然后选择“检查”。
2. 打开“Console”面板，可以看到内容脚本的输出。
3. 在“Sources”面板中，可以找到并调试内容脚本。

// content.js 示例代码
document.addEventListener("mouseup", function () {
  let selectedText = window.getSelection().toString();
  console.log("Selected text:", selectedText);
  // 断点设置在这里
  chrome.runtime.sendMessage({ action: "lookup", text: selectedText });
});

11.2 常见的错误和解决方法

在开发过程中，你可能会遇到各种错误。本节将介绍一些常见的错误类型及其解决方法。

11.2.1 权限错误

如果你在调用 Chrome API 时遇到权限错误，检查 manifest.json 中是否正确声明了所需的权限。

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 2,
  "permissions": ["activeTab", "storage", "https://api.example.com/"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

11.2.2 网络请求失败

如果 API 请求失败，可能是由于网络问题或 API 服务器问题。你可以在“Network”面板中查看请求详情，以诊断问题。

fetch("https://api.example.com/translate", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ text: "Hello" }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

11.3 编写自动化测试脚本

自动化测试可以帮助你确保插件在各种情况下都能正常工作。我们可以使用 Selenium 等工具来编写自动化测试脚本。

11.3.1 安装 Selenium

首先，你需要安装 Selenium 和浏览器驱动。例如，使用 npm 安装 Selenium WebDriver 和 ChromeDriver：

npm install selenium-webdriver chromedriver

11.3.2 编写测试脚本

以下是一个简单的 Selenium 测试脚本示例，用于测试插件的基本功能。

const { Builder, By, until } = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");

(async function example() {
  let options = new chrome.Options();
  options.addExtensions("/path/to/your/extension.crx");

  let driver = await new Builder()
    .forBrowser("chrome")
    .setChromeOptions(options)
    .build();
  try {
    await driver.get("chrome-extension://your-extension-id/popup.html");
    let button = await driver.findElement(By.id("translateBtn"));
    await button.click();

    let result = await driver.wait(
      until.elementLocated(By.id("result")),
      10000
    );
    console.log(await result.getText());
  } finally {
    await driver.quit();
  }
})();

11.3.3 运行测试脚本

使用 Node.js 运行你的测试脚本：

node test-script.js

本章介绍了如何使用 Chrome 开发者工具进行调试，列举了一些常见的错误及其解决方法，并展示了如何编写自动化测试脚本。通过这些步骤，你可以有效地调试和测试你的插件，确保其稳定性和功能完整性。