浏览器DevTools 的终极奥义：Console、Sources、Network 三件套

浏览器DevTools是前端开发者的瑞士军刀，而Console、Sources、Network这三个面板则是其中最锋利的三把刀刃。无论是调试代码、分析性能还是抓包请求，熟练运用它们能极大提升开发效率。下面从实战角度拆解它们的高级用法。

Console：不只是打印日志

Console面板远不止console.log这么简单。试试这些高阶用法：

// 1. 带样式的输出
console.log('%c重要警告！', 'color: red; font-size: 20px;')

// 2. 表格展示数据
const users = [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 }
]
console.table(users)

// 3. 性能测量
console.time('render')
// 模拟渲染操作
setTimeout(() => console.timeEnd('render'), 500)

// 4. 断言测试
console.assert(1 === 2, '数学定律被推翻了！')

更强大的是可以直接在Console中操作DOM：

// 获取所有包含data-test属性的元素
$$('[data-test]')
// 监控元素点击事件
monitorEvents(document.getElementById('btn'), 'click')

Sources：源码调试的艺术

Sources面板是调试JavaScript的核心战场。关键技巧包括：

1. 条件断点：右键点击行号选择"Add conditional breakpoint"，输入如x > 100的条件
2. 黑盒脚本：忽略第三方库的调试，右键脚本选择"Blackbox script"
3. 实时编辑：直接修改代码后按Cmd+S(Mac)/Ctrl+S保存，浏览器会立即生效

调试异步代码时，开启"Async"调用栈：

async function fetchData() {
  const res = await fetch('/api/data') // 在这里打断点
  const data = await res.json()
  return data
}

使用"本地覆盖"功能修改线上资源：

1. 在Sources > Overrides中添加本地文件夹
2. 找到网络资源，右键选择"Save for overrides"
3. 在本地副本中修改后刷新即可生效

Network：网络请求全掌握

Network面板的过滤技巧：

• method:POST 显示所有POST请求
• status-code:404 查找失败请求
• larger-than:1M 筛选大体积资源

分析请求瀑布流时注意：

• 绿色部分代表等待时间(TTFB)
• 蓝色部分是下载时间
• 灰色条表示排队或阻塞

复制请求为cURL命令：

1. 右键请求 > Copy > Copy as cURL
2. 在终端直接执行或导入到Postman

模拟慢速网络：

// 在Console中直接修改网络节流设置
Throttler.setNetworkConditions({
  download: 500 * 1024 / 8, // 500Kbps
  upload: 500 * 1024 / 8,
  latency: 200
})

三剑客联合实战

场景：调试一个数据加载缓慢的问题

1. 在Network面板发现API响应时间过长
2. 复制请求为cURL，在终端测试确认是后端问题
3. 在Sources面板找到对应的请求代码，添加断点
4. 在Console中执行performance.now()记录时间点
5. 使用console.trace()查看完整调用栈

性能优化案例：

// 使用Console的CPU分析器
console.profile('renderProfile')
renderChart() // 执行需要分析的函数
console.profileEnd('renderProfile')

高级调试技巧

1. XHR/fetch断点：在Sources > XHR/fetch Breakpoints中添加URL包含规则
2. 事件监听器断点：在Sources > Event Listener Breakpoints中选择特定事件
3. 覆盖User-Agent：在Network Conditions面板中修改
4. 重放请求：右键请求选择"Replay XHR"

Chrome扩展开发调试：

// 调试background脚本
chrome.runtime.sendMessage({action: 'debug'}, response => {
  console.log('收到响应:', response) // 在这里打断点
})

自定义DevTools

通过Command菜单(ctrl+shift+p)可以：

• 开启"3D视图"：输入Show 3D view
• 截图特定节点：输入Capture node screenshot
• 切换暗黑模式：输入Switch to dark theme

创建自定义代码片段：

1. 在Sources > Snippets中新建脚本
2. 保存常用调试代码如：

// 禁用所有按钮
document.querySelectorAll('button').forEach(btn => {
  btn.disabled = true
})