Chrome DevTools 中文文档地址：https://www.7psus5.com/doc/chrome-devtools/

Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具。使用开发者工具来重演，调试和剖析您的网站。

注意：寻找最新版本的Chrome 开发者工具，总是有最新的DevTools。

打开Chrome 开发者工具

• 在Chrome菜单中选择 更多工具 > 开发者工具。
• 在页面元素上右键点击，选择 “检查”。
• 使用快捷键 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。

了解面板

设备模式

使用设备模式构建完全响应式，移动优先的网络体验。

• 设备模式
• 测试响应和设备特定的可视窗口
• 模拟传感器：地理位置和加速度

Elements(元素面板)

使用“元素”面板可以通过自由操纵DOM和CSS来重演您网站的布局和设计。

• 检查和调整你的页面
• 编辑样式
• 编辑DOM

Console(控制台面板)

在开发期间，可以使用控制台面板记录诊断信息。或者使用它作为 shell,在页面上与JavaScript交互。

• 使用控制台面板
• 命令行交互

Sources(源代码面板)

在“源代码”面板中，可以断点调试 JavaScript 。或者通过Workspaces（工作区）连接本地文件，使用开发者工具实时编辑。

• 断点调试
• 调试混淆代码
• 使用开发者工具的Workspaces（工作区）建立持久性

Network(网络面板)

使用“网络”面板了解请求和下载的资源文件，并优化您的网页加载性能。

• 网络面板基础
• 了解资源时间线
• 网络带宽限制

Timeline(时间轴面板)

使用时间轴面板，可以通过记录录像提高页面的运行时性能。并探索网站生命周期内发生的各种事件。

• 如何看性能
• 分析运行时性能
• 诊断强制同步布局

Profiles(分析面板)

如果你需要比时间轴面板提供的更多信息，请使用“配置”面板，例如以跟踪内存泄漏。

• JavaScript CPU分析器
• 内存堆区分析器

Application(资源面板)

使用“资源”面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。

• 管理数据

Security(安全面板)

使用安全面板调试混入内容问题，您的证书的安全隐患及更多。

• 安全性