Chrome 开发者工具是一套直接内置于 Google Chrome 浏览器的 Web 开发者工具。借助开发者工具，您可以即时修改页面和快速诊断问题，从而更快地构建更出色的网站。
开始使用 了解新变化
开发者工具支持各种常见的 Web 开发任务。接下来，请在此页面上探索 DevTools 的一些主要功能。不知道从何处入手或首次使用开发者工具？观看开发者工具简介。
控制台数据分析和 AI 辅助功能可帮助您更高效地调试和修复 JavaScript 错误、性能问题和样式问题。
全面了解网页的效果，并获得富有实用价值的分析洞见。
了解如何检查网页加载的资源，以及如何在浏览器中修改这些资源。
动态分析和覆盖网络请求和响应。

AI 辅助和控制台数据分析

探索开发者工具中的 AI 创新如何帮助您更快地完成更多工作。
让 Gemini 帮助您分析和改进网站的样式、网络、来源和性能。
探索 Chrome 开发者工具中 AI 辅助功能的用例，了解该功能如何支持您在样式、性能等方面进行调试工作流。
了解开发者工具中的控制台消息和错误，并了解如何修复这些错误，而无需复制粘贴。

开发者工具提示

探索我们的每月视频系列，了解如何使用 DevTools 解决常见的 Web 开发问题。
了解如何在开发者工具中记录性能轨迹并对其进行分析，以发现和解决性能问题。
调试 LCP 问题，并使用 CrUX 数据了解您是否在调试与用户类似的体验
深入了解不同类型的浏览器缓存，以及如何在 Chrome 开发者工具中检查和管理它们！
在尝试检查某个元素时，它突然消失了？这就像您的代码在与您玩捉迷藏游戏！

获取性能数据分析

各种工具可帮助您衡量和优化运行时性能的不同方面：性能面板、Lighthouse 等。
了解“性能”面板中的所有功能：如何记录性能轨迹、如何查看和分析轨迹等。
15 年来，“性能”面板一直帮助开发者衡量和优化运行时性能。了解该计划未来的发展方向。
直接在轨迹中添加注释，并将其保存在轨迹文件中，以便轻松共享。

最新资讯和动态

检查和修改资源

了解“Sources”面板中的所有功能：如何查看和修改文件、调试 JavaScript 以及设置工作区。
开始使用
借助 Workspace，您可以将在开发者工具中所做的更改保存到存储在计算机上的源代码中。了解如何在您自己的项目中设置工作区。
阅读教程

分析网络活动

“网络”面板

了解“网络”面板中的所有功能：检查响应和请求正文、覆盖标头等。
开始使用
本实操教程将指导您完成“网络”面板中的常见任务。
阅读教程

更多工具

探索开发者工具中的所有其他功能。
了解如何查看和更改页面的 DOM。
了解如何查看和更改网页的 CSS。
跟踪对 HTML、CSS 和 JavaScript 的更改。
记录消息并运行 JavaScript。
评估网站性能。
查找影响页面性能的内存问题，包括内存泄漏等。
检查、修改和调试 Web 应用，测试缓存、查看存储空间等。
检查和修改动画。
记录、重放、衡量用户流以及修改其步数。
了解一系列会影响 Web 内容呈现的选项。
检查和调试已保存的地址。
查找并修复您的网站存在的问题。
确保网页受到 HTTPS 的全面保护。
按浏览器标签页查看信息和调试媒体播放器。
模拟设备传感器。
模拟身份验证器。