概览

Chrome DevTools是直接内置在Google Chrome浏览器中的一组Web开发者工具。DevTools可以帮助你实时编辑页面并快速诊断问题，以便于更快地构建更好的网站。

请观看视频来了解核心DevTools工作流程的现场演示，包括调试CSS、原型设计CSS、调试JavaScript和分析加载性能。

打开DevTools

打开DevTools有许多方法，因为不同的用户希望快速访问DevTools UI的不同部分。

当您想要使用DOM或CSS工作时，请右键单击页面上的元素并选择检查，以进入元素面板。或者使用快捷键：按Command+Option+C（Mac）或Control+Shift+C（Windows，Linux，ChromeOS）。
当您想要查看日志消息或运行JavaScript时，请按Command+Option+J（Mac）或Control+Shift+J（Windows，Linux，ChromeOS）直接进入控制台面板。

有关更多详细信息和工作流，请参见打开Chrome DevTools。

快速开始

如果您是一位经验更丰富的Web开发者，可以从以下几个着手点来学习如何使用DevTools提高生产力：

Discover DevTools

DevTools UI 可能有点让人不知所措......有那么多的选项卡！但是，如果您花一些时间熟悉每个选项卡以了解其功能，您可能会发现 DevTools 可以大大提高您的生产力。

注意：在 DevTools 文档中，顶级选项卡称为面板。

设备模式（Device Mode）

模拟手机设备

设备模式
模拟传感器：地理位置和加速度计。

元素面板&CSS

查看和更改DOM、CSS。

开始查看和更改DOM
开始查看和更改CSS
检查和调整你的页面
编辑样式
编辑DOM
查找无效的、覆盖的、不活动的和其他CSS
识别潜在的CSS改进点
模拟浅色/深色主题、对比度和其他CSS媒体特性
查找未使用的 CSS
检查动画

控制台面板（Console panel）

从控制台查看消息并运行 JavaScript。

从控制台开始
使用控制台
从命令行交互
控制台API参考

源代码面板（Sources panel）

调试 JavaScript，在页面重新加载时保留在 DevTools 中所做的更改，保存和运行 JavaScript 片段，并将您在 DevTools 中所做的更改保存到磁盘。

开始调试JavaScript
使用断点暂定你的代码
使用工作区将更改保存到磁盘上
从任何页面运行代码片段
JavaScript调试指南
使用本地覆盖可以在页面重载时保留更改
查找未使用的JavaScript

网络面板（ Network panel）

查看和调试网络活动。

快速开始
网络问题指南
网络面板参考指南
检查资源

记录器面板（Recorder panel）

记录、回放和测量用户流程。

快读开始
探索扩展
超越录制器的重放功能

性能面板（ Performance panel）

找到提高负载和运行时性能的方法。

优化网站速度
从分析运行时性能开始
性能分析参考
分析运行时性能
诊断强制同步布局

内存面板（ Memory panel）

修复内存问题
JavaScript CPU分析器

应用面板（Application panel）

检查加载的所有资源，包括IndexedDB或Web SQL数据库、本地存储和会话存储、Cookie、应用程序缓存、图像、字体和样式表。

调试渐进式网络应用
检查和管理存储、数据库和缓存
检查和删除Cookie
查看起始使用信息

安全面板（Security panel）

调试混合内容问题、证书问题等。

了解安全问题

社区

在 Crbug 中提交错误报告和功能请求，Crbug 是工程团队的错误跟踪器。

如果您想提醒我们错误或功能请求但没有太多时间，欢迎您向@ChromeDevTools 发送推文。我们会定期从该帐户回复和发送公告。

如需有关使用 DevTools 的帮助，Stack Overflow 是最佳渠道。

要在 DevTools 文档上提交错误或功能请求，请提交一个 GitHub issue。

DevTools 也有一个 Slack 频道，但团队并没有持续关注它。