1. JS 利用率分析
浏览器 F12 打开控制台 → Ctrl + Shift + P → 搜索 Coverage（覆盖率面板），可查看 JS/CSS 代码利用率。
2. 调试方法
2.1 断点类
| 方式 | 说明 |
|---|
debugger | 阻塞型，代码中插入 debugger 语句，执行到此处自动暂停 |
| 断点调试 | 在 Sources 面板中点击行号添加断点 |
2.2 输出类
| 方式 | 说明 | 阻塞 |
|---|
alert() | 弹出对话框 | 是 |
console.* | 控制台输出 | 否 |
2.3 断点操作
- 单步执行：逐行执行，查看每步结果
- 多步执行：跳过函数调用，执行到下一个断点
- 监视变量：添加变量到 Watch 面板，实时观察变化
2.4 无缓存测试
使用浏览器无痕模式（Ctrl + Shift + N），避免缓存干扰。
3. Console 控制台功能
| 命令 | 说明 |
|---|
console.info() | 信息输出 |
console.error() | 错误输出 |
console.warn() | 警告输出 |
console.debug() | 调试输出 |
console.time(label) / console.timeEnd(label) | 计时，测量代码执行时间 |
console.clear() | 清空控制台 |
console.table(data) | 以表格形式输出数据 |
console.dir(obj) | 显示对象所有属性和方法 |
console.group(label) / console.groupEnd() | 分组输出 |
$_ | 引用上一个表达式的结果 |
$0 ~ $4 | 引用当前/历史在 Elements 面板中选中的 DOM 元素 |
4. 真机调试
Chrome + Android
- 手机进入开发者模式
- 保持唤醒状态打开
- USB 调试打开
- 数据线连接电脑
- 手机与电脑保持同一网络
- Chrome 访问
chrome://inspect/#devices → inspect
白屏问题
- 检查 Chrome 是否为最新版本
- 检查手机浏览器是否为最新版本
5. 内网穿透方案
6. 移动端调试工具
| 工具 | 说明 |
|---|
| vConsole | 微信小程序常用，在移动端页面内嵌控制台 |
| Eruda | 类似 vConsole，功能更丰富 |
| Whistle | 基于 Node.js 的跨平台抓包调试代理工具 |
7. 抓包工具
| 工具 | 平台 | 说明 |
|---|
| Charles | macOS | 功能全面，HTTPS 代理 |
| Fiddler | Windows | 老牌 HTTP 调试代理 |
| Wireshark | 跨平台 | 网络协议分析，底层抓包 |
| mitmproxy | 跨平台 | 命令行 MITM 代理，支持脚本扩展 |
