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

AI 辅助和控制台数据分析

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

开发者工具提示

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

获取效果数据分析

各种工具可帮助您衡量和优化运行时性能的不同方面：性能面板、Lighthouse 等。
了解“性能”面板中的所有功能：如何记录性能轨迹、如何查看和分析轨迹等。
了解 CPU 节流校准等新的开发者工具功能，以便根据实际数据做出性能调试决策
直接在开发者工具的“性能”面板中了解新的性能数据分析，以及 Lighthouse 的强大功能。

最新资讯和动态

开发者工具的新变化 - Chrome 142

Updated 2025年10月28日

控制台和来源中的代码建议、使用 Gemini 进行完整的性能轨迹调试、切换抽屉方向、开发者工具 MCP 服务器更新等。

弃用 Chrome DevTools 中的 JavaScript 源代码实时编辑功能

Updated 2025年10月22日

由于使用率较低，且有热模块替换 (HMR) 等现代替代方案，Chrome 开发者工具将在 Chrome 145（2026 年 2 月）中移除实时编辑功能。

开发者工具的新变化 - Chrome 141

Updated 2025年9月30日

适用于 AI 代理的 Chrome 开发者工具 (MCP)、网络依赖树 AI 支持、AI 聊天导出、性能中的持久轨道配置等。

检查和修改资源

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

分析网络活动

“网络”面板

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

更多工具

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