三、浏览器开发者工具：前端调试图谱
3.1 Elements（元素面板）
// 1. 实时编辑 HTML/CSS
// 双击文字直接修改内容
// 在 Styles 面板调整 CSS，立即生效
// 2. 强制元素状态
// 选中元素 → :hov → 勾选 :hover/:active/:focus
// 3. 查看盒模型
// Computed 面板可查看完整盒模型
// 4. 复制元素
// 右键 → Copy → Copy selector（得到选择器）
// Copy JS Path（得到 document.querySelector 路径）
// 5. 截图
// 选中元素 → 右键 → Capture node screenshot
3.2 Console（控制台）
// 1. 基础调试
console.log('普通日志');
console.error('错误信息');
console.warn('警告信息');
console.table([{ name: '张三', age: 25 }, { name: '李四', age: 30 }]);
console.time('耗时');
// ... 代码 ...
console.timeEnd('耗时');
// 2. 高级技巧
console.assert(1 === 2, '断言失败'); // 条件为 false 时输出
console.group('用户信息');
console.log('姓名: 张三');
console.log('年龄: 25');
console.groupEnd();
// 3. 直接操作 DOM
$0 // 当前选中的元素
$1 // 上一次选中的元素
$('#app') // 等同于 document.querySelector
$$('button') // 等同于 document.querySelectorAll
// 4. 监控变量
var x = 10;
globalThis.watch = function(prop, handler) {
let value = this[prop];
Object.defineProperty(this, prop, {
get: () => value,
set: (newVal) => {
handler(newVal, value);
value = newVal;
}
});
};
// 5. 断点调试（debugger 关键字）
function problematicFunction(data) {
debugger; // 执行到这里会自动暂停
// 可以在 Sources 面板查看变量状态
return data.map(x => x * 2);
}
3.3 Sources（源代码面板）
// 1. 断点类型
// 普通断点：点击行号
// 条件断点：右键行号 → Add conditional breakpoint
// 日志点：右键行号 → Add log point（不暂停执行，只打印）
// 2. 断点调试快捷键
F8 // 继续执行
F10 // 单步跳过（不进入函数内部）
F11 // 单步进入（进入函数内部）
Shift+F11 // 单步跳出（跳出当前函数）
// 3. Watch 面板
// 添加表达式实时监控，如：user.name、totalPrice > 100
// 4. Call Stack（调用栈）
// 查看函数调用链路，理解代码执行顺序
// 5. Scope（作用域）
// 查看当前作用域内的所有变量
3.4 Network（网络面板）
// 1. 筛选请求
// Fetch/XHR：只看 AJAX 请求
// Img：只看图片
// Doc：只看 HTML 文档
// 2. 模拟慢网络
// 选择 Slow 3G 模拟弱网环境
// 3. 查看请求详情
// Headers：查看请求头、响应头
// Preview：格式化预览响应数据
// Response：原始响应文本
// Timing：请求各阶段耗时（排队、DNS、连接、等待、下载）
// 4. 拦截修改请求（本地覆盖）
// Sources → Overrides → Select folder for overrides
// 在 Network 面板右键请求 → Save as override
// 修改本地保存的文件，刷新后生效
// 5. 重放请求
// 右键请求 → Replay XHR
// 或 Copy as fetch，在 Console 修改后执行
3.5 Performance（性能面板）
// 1. 录制性能
// 点击录制按钮 → 操作页面 → 停止录制
// 2. 核心指标解读
// FCP（First Contentful Paint）：首次内容绘制
// LCP（Largest Contentful Paint）：最大内容绘制
// TTI（Time to Interactive）：可交互时间
// FID（First Input Delay）：首次输入延迟
// 3. 火焰图（Flame Chart）
// 主线程任务 → 长任务（红色）需要优化
// 4. 查看内存泄漏
// 录制前拍快照（Heap Snapshot）
// 操作后再次拍快照，对比差异
3.6 Application（应用面板）
// 1. Local Storage / Session Storage
// 查看、修改、删除存储的数据
// 手动添加测试数据：双击 Value 编辑
// 2. Cookies
// 查看 Cookie 的 Name、Value、Domain、Expires、HttpOnly
// 3. IndexedDB
// 查看客户端数据库
// 4. Clear site data
// 清除当前网站的所有缓存、Cookie、存储
