谷歌浏览器 | 开发者功能-DevTools-控制台-网络调试

💻

Console 控制台

JavaScript交互式控制台，实时执行代码、查看日志、调试输出

> console.log('Hello DevTools')

Hello DevTools

> console.warn('Memory usage:', performance.memory)

⚠ Memory usage: { usedJSHeapSize: 15.2MB }

> fetch('/api/data').then(r => r.json())

Promise { <pending> }

→ { status: 'success', data: [...] }

> throw new Error('Debug breakpoint')

✖ Error: Debug breakpoint at line 42

console.log/warn/error

多级别日志输出，支持字符串模板、对象格式化、条件日志

Console API

$0-$4选中元素、copy()复制、monitor()函数监控

即时表达式

Live Expression实时监控变量，拖入即可持续观察值变化

异步控制

支持async/await，Promise链式调用，清晰异步堆栈追踪

🌐

Network 网络分析

捕获分析所有网络请求，定位性能瓶颈，优化加载速度

Name	Status	Type	Size	Time
index.html	200	document	4.2 KB	45ms
bundle.js	200	script	128 KB	120ms
styles.css	200	stylesheet	8.5 KB	32ms
logo.png	200	image	24 KB	18ms
api/users	304	xhr	-	8ms
analytics.js	200	script	18 KB	55ms

请求瀑布流

可视化请求时序，TTFB、下载时间一目了然

过滤器

按类型、域名、大小、时间筛选，快速定位问题请求

请求详情

Headers、Payload、Preview、Response全维度分析

Throttling

模拟弱网环境，3G/4G/自定义带宽测试

📝

Elements DOM查看器

实时查看和编辑DOM结构，调试CSS样式，即时预览效果

DOM树导航

折叠/展开节点，搜索定位元素，快捷键高效导航

Styles面板

计算样式、继承样式、覆盖规则，颜色/边距可视化编辑

Computed

最终计算样式完整展示，盒模型直观可视化

Event Listeners

查看绑定事件，定位源码，设置断点调试

🚀

Lighthouse 性能审计

自动化性能测试，生成优化建议报告，PWA能力评估

性能评分

FCP、SI、LCP、CLS、TBT五项核心指标综合评分

最佳实践

安全HTTPS、第三方代码、安全头部检测

SEO检查

元标签、可访问性、移动端友好度分析

PWA验证

Service Worker、Manifest、离线能力完整检测

// 常用快捷键

打开DevToolsF12

命令菜单Ctrl+Shift+P

元素选择Ctrl+Shift+C

控制台Ctrl+Shift+J

搜索源码Ctrl+Shift+F

跳转行号Ctrl+G

刷新页面F5

清缓存刷新Ctrl+F5

// DevTools 使用技巧

在Console中使用$0引用当前选中元素，$1引用上一个
在Network面板右键可复制cURL命令用于接口调试
Elements面板双击属性可直接编辑，实时预览效果
使用monitorEvents($0)监控元素的所有事件
Snippets功能可保存常用代码片段随时运行
Coverage面板分析JavaScript/CSS代码覆盖率

DevTools 谷歌浏览器开发者功能详解