Chrome 开发者工具是一套直接内置于 Google Chrome 浏览器的 Web 开发者工具。借助开发者工具，您可以即时修改页面和快速诊断问题，从而更快地构建更出色的网站。
开始使用
您可以通过所有方式打开 Chrome 开发者工具。
及时了解最新的开发者工具变更。
一系列简短的视频，可帮助您了解开发者工具中的功能。

命令和快捷键

快速完成任务。
您可以打开命令菜单、运行命令、打开文件、查看其他操作，以及执行其他操作。
阅读文档
键盘快捷键的全面参考。
阅读文档
查看停用 JavaScript 的情况下网页的外观和行为。
阅读文档
模拟设备构建移动优先网站。
使用“搜索”面板查找所有已加载资源中的文本。

面板

探索各个开发者工具面板的强大功能。

元素 - DOM

了解如何查看和更改页面的 DOM。
阅读文档

元素 - CSS

了解如何查看和更改网页的 CSS。
阅读文档
记录消息并运行 JavaScript。
阅读文档
查看和修改文件、创建代码段、调试 JavaScript 以及设置工作区。
阅读文档
记录网络请求。
阅读文档
评估网站性能。
阅读文档
查找影响页面性能的内存问题，包括内存泄漏等。
阅读文档
检查、修改和调试 Web 应用，测试缓存、查看存储空间等。
阅读文档
记录、重放、衡量用户流以及修改其步数。
阅读文档
了解一系列会影响 Web 内容呈现的选项。
阅读文档
检查和调试已保存的地址。
查找并修复您的网站存在的问题。
确保网页受到 HTTPS 的全面保护。
检查 JavaScript 中的 ArrayBuffer、TypedArray 或 DataView，以及 C++ Wasm 应用的 WebAssembly 和内存。
替换用户代理字符串。
通过屏蔽网络请求来测试您的网站。
按浏览器标签页查看信息和调试媒体播放器。
检查和修改动画。
跟踪对 HTML、CSS 和 JavaScript 的更改。
查找并分析未使用的 JavaScript 和 CSS 代码。
检查源代码映射是否成功加载并手动加载。
发现潜在的 CSS 改进机会。
使用 Lighthouse 面板优化网站速度。
获取有关您网站的表现的富有实用价值的分析洞见。
监控负载和运行时性能。
查看和修改源文件，同时还能访问其他面板。
模拟设备传感器。
查看 WebAudio API 指标。
模拟身份验证器。

设置参考