火狐浏览器安装自定义插件
一、查看插件控制台日志
1. 后台脚本 (background scripts) 控制台
- 访问 about:debugging#/runtime/this-firefox
- 找到你的插件条目，点击 「检测」 按钮
- 单独打开的后台脚本控制台将展示 console.log 输出
2. 弹出层 (popup) / 选项页 (options) 控制台
- 右键点击插件图标 → 「检查弹出窗口」
- 如果上面不行，那控制台其实和脚本的控制的是同一个
3. 内容脚本 (content scripts) 控制台
- 在目标网页按 F12 → 切换到 「控制台」 标签
- 内容脚本的日志会标记为 [内容脚本] 前缀
- 使用 console.log(“内容脚本输出”, variable);
二、监控插件网络请求
方法 1：通过浏览器控制台捕获
- 打开 about:debugging#/runtime/this-firefox → 点击插件 「调试」
- 在打开的控制台中：
切换到 「网络」 标签（若无显示，需启用网络监控）
发起请求后查看所有 HTTP/HTTPS 请求详情
注意：若网络标签缺失，需使用 browser.devtools.network API 增强监控（需在插件 manifest 中声明权限）
方法 2：代码注入式调试
在插件代码中注入监控逻辑：
// 示例：监控 fetch 请求
const originalFetch = window.fetch;
window.fetch = async (...args) => {console.log('请求发起:', args[0]);const response = await originalFetch(...args);console.log('响应结果:', response);return response;
};
三、高级调试技巧
1. 跨域请求调试
- 若出现跨域错误，需在 manifest.json 中添加权限：
{"permissions": ["*://api.example.com/*"],"host_permissions": ["*://*.target-domain.com/"]
}
2. 使用 browser.storage API 调试
- 查看存储数据：
browser.storage.local.get().then(data => console.log("Storage Data:", data));
3. 性能分析
- 在
about:debugging中点击 「性能」 按钮，录制插件运行时的性能指标