Chrome 开发者工具是一套直接内置于 Google Chrome 浏览器的 Web 开发者工具。借助开发者工具，您可以即时修改页面和快速诊断问题，从而更快地构建更出色的网站。
开始使用 版本说明

使用 AI 调试

了解开发者工具中的 AI 创新如何让您更快地完成更多工作。使用 DevTools for agents 将 DevTools 的强大功能与您喜爱的编码代理相关联。
让 Gemini 帮助您分析和改进网站的样式、网络、来源和性能。在“控制台”和“来源”面板中获取有关控制台错误和代码建议的帮助。
探索 AI 创新
在 AI 工作流中，为您的编码智能体提供与您用于检查网络活动、记录跟踪记录和排查 Web 应用问题相同的可信工具。

将 Chrome 开发者工具 MCP （模型上下文协议）服务器连接到您选择的工具：Antigravity、Claude Code、Cline、Copilot 等。

了解详情
全面了解网页的效果，并获得富有实用价值的分析洞见。
了解如何检查网页加载的资源，以及如何在浏览器中修改这些资源。
动态分析和覆盖网络请求和响应。

开发者工具提示

欢迎观看我们的月度视频系列，以轻松有趣的方式带您了解 DevTools 中的常见调试场景。
借助适用于智能体的 Chrome 开发者工具，您的智能体可以验证自适应布局、测试位置感知型 API，以及模拟不同的 CPU 或网络速度。
借助 Chrome 开发者工具中的 Lighthouse（面向智能体），您的编码智能体可以通过实时健康检查来评估网站质量，检查项目包括可访问性、SEO、最佳实践和智能体浏览。
观看有关更新后的“性能”面板的导览，了解如何衡量核心网页指标（LCP、CLS、INP）以及如何从 Gemini 获取量身定制的建议。
扬帆起航，与开发者工具一起成为调试海盗！了解用于模拟焦点样式、测试具有自动填充功能的表单以及通过网络替换解决后端错误的技术。

获取效果数据分析

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

最新资讯和动态

检查和修改资源

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

分析网络活动

“网络”面板

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

更多工具

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