Chrome DevTools 开发者工具
谷歌浏览器内置的开发者工具（DevTools）是一套功能强大的网页开发和调试工具集。通过按下 F12 或 Ctrl+Shift+I（Mac: Cmd+Option+I）即可打开。DevTools 提供了检查元素、调试JavaScript、分析网络请求、评估性能等全方位的开发支持。
无论您是前端开发者、后端工程师还是产品经理，DevTools 都能帮助您深入了解网页的运行机制。从简单的样式调整到复杂的性能优化，从断点调试到网络瀑布图分析，DevTools 都是您不可或缺的得力助手。
Chrome DevTools 持续更新迭代，不断引入新功能和改进。最新版本已支持 Recorder 录制用户操作、Performance Insights 智能性能建议、CSS Overview 样式总览等高级功能，进一步提升开发效率。
DevTools 核心面板
Elements 元素
检查和实时编辑页面DOM结构和CSS样式，所见即所得的调试体验
Ctrl + Shift + CConsole 控制台
执行JavaScript代码，查看日志输出，调试错误信息
Ctrl + Shift + JNetwork 网络
监控所有网络请求，分析加载时间，查看请求/响应详情
Ctrl + Shift + EPerformance 性能
录制并分析页面运行时性能，找出性能瓶颈
Ctrl + Shift + EApplication 应用
管理存储数据：LocalStorage、Cookies、IndexedDB等
F12 → ApplicationSecurity 安全
检查页面安全状态，分析证书和混合内容问题
F12 → Security实战调试案例
调试JavaScript断点
在Sources面板中找到目标JS文件，点击行号设置断点。刷新页面后，代码执行到断点处会暂停，可以查看变量值、调用堆栈等信息。
function handleClick() {
debugger; // 执行到此处会暂停
console.log('clicked');
}
网络请求分析
在Network面板中可以看到所有HTTP请求。点击某个请求可以查看Headers、Preview、Response等详细信息，还可以复制为cURL命令。
// 查看请求时序：观察 Waterfall 瀑布图
// 模拟慢网络：点击 No throttling 下拉菜单
性能瓶颈定位
在Performance面板点击录制按钮，执行需要分析的操作后停止录制。通过火焰图可以直观看到哪些函数执行时间最长。
console.time('myFunction');
// ... 执行代码
console.timeEnd('myFunction');
常用快捷键速查
| 功能 | Windows/Linux | Mac |
|---|---|---|
| 打开DevTools | F12 或 Ctrl+Shift+I | Cmd+Option+I |
| 打开Console | Ctrl+Shift+J | Cmd+Option+J |
| 元素检查模式 | Ctrl+Shift+C | Cmd+Shift+C |
| 搜索所有文件 | Ctrl+Shift+F | Cmd+Option+F |
| 打开命令菜单 | Ctrl+Shift+P | Cmd+Shift+P |
| 设备模拟模式 | Ctrl+Shift+M | Cmd+Shift+M |
开发者工具常见问题
如何在谷歌浏览器中打开开发者工具？
按F12键，或右键点击页面选择"检查"，或使用快捷键Ctrl+Shift+I（Mac: Cmd+Option+I）即可打开DevTools。
DevTools修改的样式为什么刷新后消失？
DevTools中的修改只是临时的，不会保存到源文件。如需保存修改，可以使用Workspaces功能将本地文件夹映射到DevTools中。
如何在谷歌浏览器中调试移动端页面？
按Ctrl+Shift+M进入设备模拟模式，可以模拟各种手机和平板的屏幕尺寸、触摸事件和网络环境。
Network面板中的请求太多如何筛选？
可以使用类型过滤器（XHR、JS、CSS等），或在Filter输入框中输入关键词进行筛选，支持正则表达式。
如何清除谷歌浏览器的开发者工具缓存？
在Network面板中勾选"Disable cache"可以禁用缓存。也可以右键点击刷新按钮选择"清空缓存并硬性重新加载"。
下载谷歌浏览器开始调试
体验最强大的浏览器开发者工具
下载 Chrome