DevTools
Chrome 开发者工具是一套直接内置于 Google Chrome 浏览器的 Web 开发者工具。借助开发者工具，您可以即时修改页面并快速诊断问题，从而更快地构建更好的网站。
命令和快捷键
快速完成任务。
在命令菜单中运行命令
有关如何打开命令菜单、运行命令、打开文件以及查看其他操作等操作的指南。
键盘快捷键
Chrome 开发者工具键盘快捷键的规范文档。
停用 JavaScript
查看停用 JavaScript 的情况下网页的外观和行为。
使用 Device Mode 模拟移动设备
在 Chrome 的 Device Mode 下使用虚拟设备构建针对移动设备优先的网站。
在加载的资源中搜索
您可以使用“搜索”标签页查找所有已加载资源中的文本。
面板
探索各个开发者工具面板的强大功能。
元素 - DOM
了解如何使用 Chrome 开发者工具查看和更改页面的 DOM。
元素 - CSS
了解如何使用 Chrome 开发者工具查看和更改页面的 CSS。
控制台
记录消息并运行 JavaScript。
信息来源
查看和修改文件、创建代码段、调试 JavaScript 以及设置工作区。
网络
记录网络请求。
效果
使用开发者工具评估网站性能。
内存
查找影响页面性能的内存问题，包括内存泄漏、内存膨胀和频繁的垃圾回收。
应用
可以检查、修改和调试 Web 应用，测试缓存以及查看存储空间。
录音机
记录、重放、衡量用户流以及修改其步数。
渲染
了解一系列会影响 Web 内容呈现的选项。
问题
查找并修复您的网站存在的问题。
安全性
使用 Security 面板确保网页受到 HTTPS 的全面保护。
内存检查器
检查 JavaScript 中的 ArrayBuffer、TypedArray 或 DataView，以及 C++ Wasm 应用的 WebAssembly 和内存。
网络状况
替换用户代理字符串。停用“自动选择”功能，然后从列表中选择或输入自定义字符串。
媒体
使用“媒体”面板按浏览器标签页查看信息和调试媒体播放器。
动画
使用“Animations”标签页检查和修改动画。
变更
跟踪对 HTML、CSS 和 JavaScript 的更改。
覆盖
在 Chrome 开发者工具中查找和分析未使用的 JavaScript 和 CSS 代码。
开发者资源
请使用“开发者资源”抽屉式导航栏标签页检查是否成功加载了来源映射，并手动加载它们。
CSS 概览
使用“CSS 概览”面板发掘潜在的 CSS 改进机会。
灯塔
使用 Lighthouse 面板优化网站速度。
性能数据分析
使用“性能数据分析”面板获取有关网站性能的富有实用价值的分析洞见。
传感器
模拟设备传感器。
WebAuthn
模拟身份验证器。