f12js调试

元素检查与修改

核心功能：

• 实时查看HTML结构：右键点击页面元素选择“检查”可快速定位DOM节点。
• 动态修改样式：在Styles面板中双击CSS属性值可直接编辑,支持实时预览效果。
• 事件监听断点：在Event Listeners标签页可筛选特定事件（如click）并设置断点。

示例操作：
修改按钮文本颜色为红色：

1. 选中按钮元素
2. 展开Styles面板
3. 添加color: red;规则
4. 观察页面实时变化

网络请求分析

关键数据列：

典型场景：

• 排查404错误：点击状态码列筛选非200响应
• 分析第三方脚本：通过Initiator追踪广告/统计代码
• 优化加载：按Size排序查找大文件进行压缩

控制台高级用法

常用命令：

• console.log()：输出变量值（支持对象展开）
• $0：代表最近选中的DOM元素（如$0.style.background = 'yellow'）
• copy()：复制日志内容到剪贴板
• monitor(expression)：持续监控表达式变化（如monitor(performance.memory)）

调试技巧：

• 使用%c格式化输出：console.log('%c警告','color:red;font-weight:bold;')
• 异常捕获：在Sources面板设置uncaught exception断点
• 网络日志：输入networkLog查看历史请求（需先开启Preserve log）

断点调试实战

断点类型对比：

调试循环引用：

// 在console输入检测闭包引用
function checkCycle(obj) {
  console.assert(obj !== window, '存在全局变量引用');
}

性能分析工具

关键指标：

1. FPS（帧率）：60fps以上为流畅，低于30fps出现卡顿
2. CPU占用：持续高于50%需优化算法
3. 内存泄漏：通过Heap Snapshot对比两次快照差异
4. Long Task：超过50ms的任务会被标记为长任务

优化案例：

• 发现requestAnimationFrame回调耗时过长：
  1. 在Performance面板录制动画
  2. 分析火焰图中的红色区域（耗时函数）
  3. 替换canvas绘制算法为WebGL加速

移动端模拟测试

设备参数配置表：

地理定位模拟：
在Application面板的Manually set location输入经纬度（如7749,-122.4194模拟旧金山）

常见问题与解决方案

Q1：如何定位跨域请求被阻止的问题？

A：

1. 在Network面板过滤blocked类型请求
2. 检查请求头中的Origin与服务器允许的域名是否匹配
3. 使用Credentials设置为include以发送Cookies
4. 确认服务器端已设置Access-Control-Allow-Origin响应头

Q2：为什么修改CSS后样式未生效？

A：
| 原因 | 解决方案 |
|———————–|———————————-|
| 选择器优先级不足 | 添加!important或提高权重 |
| 样式被其他文件覆盖 | 在Styles面板禁用冲突的CSS规则 |
| 伪类/伪元素未匹配 | 检查:hover/::before等状态 |
| 浏览器缓存导致 | 清除缓存（Ctrl+F5）或禁用