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 指标。
模拟身份验证器。

设置参考