1. 快速打开开发者模式
- 在Chrome地址栏输入`chrome://extensions/`→开启“开发者模式”→直接拖拽解压后的扩展文件夹到页面→无需打包成`.crx`文件（适合本地调试）。
- 快捷键调出：按`Ctrl+Shift+B`→直接进入扩展管理页（若未启用需先手动进入一次设置）。
2. 实时调试脚本与样式
- 在扩展页面点击“背景页面”链接→打开`background.js`调试窗口→可添加`console.log()`跟踪代码执行（如监听浏览器事件）。
- 修改CSS即时生效：在“样式”面板中编辑扩展的CSS文件→保存后自动刷新页面→查看弹窗、图标等元素变化（避免反复重装扩展）。
3. 抓包分析网络请求
- 在扩展管理页→点击“网络请求”→勾选“记录请求”→操作扩展功能（如点击按钮）→查看发送的API请求地址和参数（如`https://example.com/api`）。
- 模拟服务器响应：右键点击请求→选择“修改请求头”或“重发请求”→测试不同数据返回时的逻辑处理（如错误码404场景）。
4. 利用断点调试复杂逻辑
- 在`content.js`或`background.js`中点击行号→添加断点→当代码执行到此处时自动暂停→观察变量值（如`localStorage`数据是否正确）。
- 逐步执行代码：按`F10`逐行调试→检查循环或条件判断逻辑（如验证用户登录状态的流程）。
5. 通过存储区管理持久数据
- 查看`localStorage`和`sync`数据：在扩展管理页→点击“存储”→手动修改键值对（如调整配置项默认值）。
- 清理测试数据：点击“清除存储”→重置扩展使用的缓存（如删除临时下载的文件记录）。