1. 启用开发者模式并打开调试窗口
- 加载插件：在Chrome右上角三点菜单中选择“更多工具”→点击“扩展程序”→打开“开发者模式”→点击“加载已解压的扩展程序”→选择插件文件夹。
- 打开控制台：按`Ctrl+Shift+J`（Windows）或`Cmd+Option+J`（Mac）→在顶部选择对应插件的标签页→查看实时日志输出（包含`console.log`和错误信息）。
2. 在插件代码中添加日志语句
- 使用`console.log`：在背景脚本或内容脚本中插入`console.log("测试日志")`→保存文件后刷新浏览器→在调试窗口查看日志内容（支持字符串、对象、数组等数据类型）。
- 区分日志级别：通过`console.error("错误信息")`或`console.warn("警告信息")`标记不同严重程度的日志→方便快速定位问题（错误日志会显示红色标识）。
3. 配置背景脚本持续记录日志
- 创建背景脚本：在插件文件夹中新建`background.js`→在`manifest.json`中添加`"background": {"scripts": ["background.js"]}`→在脚本中使用`chrome.runtime.onInstalled.addListener`监听事件并记录日志。
- 定时输出状态：在`background.js`中设置`setInterval(() => {console.log("插件运行中")}, 5000)`→每5秒输出一次心跳日志→监控插件是否在后台正常运行。
4. 捕获并记录异常错误
- 全局错误监听：在`content.js`中添加`window.onerror = function(message) {console.error("内容脚本错误：" + message)}`→捕获网页中的JavaScript错误并记录。
- Promise异常处理：使用`catch`语句包裹异步代码→例如`fetch(url).then(response => {})`.`catch(error => {console.error("网络请求失败：" + error)})`→避免未捕获的Promise错误导致日志缺失。
5. 将日志输出到外部文件或服务器
- 本地存储日志：在`background.js`中使用`chrome.storage.local.set({logs: logArray})`→将日志数组保存到Chrome本地存储→需要时通过`chrome.storage.local.get`读取（适合临时调试）。
- 发送到远程服务器：在脚本中添加`fetch("https://yourserver.com/log", {method: "POST", body: JSON.stringify(log)})`→将关键日志实时上传至后端（需服务器配置API接口）。
6. 过滤和搜索调试信息
- 使用控制台搜索：在调试窗口按`Ctrl+F`（Windows）或`Cmd+F`（Mac）→输入关键词（如“error”）→快速定位问题日志（支持正则表达式搜索）。
- 自定义日志格式：定义统一的日志前缀→例如`console.log(`[${Date.now()}] PluginName: `, "用户操作日志")`→通过时间戳和模块名筛选相关信息。