Chrome DevTools (original) (raw)

DevTools

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

开发者工具支持各种常见的 Web 开发任务。接下来，请在此页面上探索 DevTools 的一些主要功能。不知道从何处入手或首次使用开发者工具？观看开发者工具简介。

获取 AI 助理

控制台数据分析和 AI 辅助功能可帮助您更高效地调试和修复 JavaScript 错误、性能问题和样式问题。

了解效果

全面了解网页的效果，并获得富有实用价值的分析洞见。

检查资源

了解如何检查网页加载的资源，以及如何在浏览器中修改这些资源。

AI 辅助和控制台数据分析

探索开发者工具中的 AI 创新如何帮助您更快地完成更多工作。

开始使用

让 Gemini 帮助您分析和改进网站的样式、网络、来源和性能。

获得启发

探索 Chrome 开发者工具中 AI 辅助功能的用例，了解该功能如何支持您在样式、性能等方面进行调试工作流。

了解控制台消息

了解开发者工具中的控制台消息和错误，并了解如何修复这些错误，而无需复制粘贴。

开发者工具提示

探索我们的每月视频系列，了解如何使用 DevTools 解决常见的 Web 开发问题。

记录和分析性能轨迹

了解如何在开发者工具中记录性能轨迹并对其进行分析，以发现和解决性能问题。

监控实时 Core Web Vitals

调试 LCP 问题，并使用 CrUX 数据了解您是否在调试与用户类似的体验

缓存的奥秘

深入了解不同类型的浏览器缓存，以及如何在 Chrome 开发者工具中检查和管理它们！

冻结屏幕并检查消失的元素

在尝试检查某个元素时，它突然消失了？这就像您的代码在与您玩捉迷藏游戏！

获取效果数据分析

各种工具可帮助您衡量和优化运行时性能的不同方面：性能面板、Lighthouse 等。

效果工具概览

了解“性能”面板中的所有功能：如何记录性能轨迹、如何查看和分析轨迹等。

最新资讯和动态

检查和修改资源

功能参考

了解“Sources”面板中的所有功能：如何查看和修改文件、调试 JavaScript 以及设置工作区。

设置工作区

借助 Workspace，您可以将在开发者工具中所做的更改保存到存储在计算机上的源代码中。了解如何在您自己的项目中设置工作区。

分析网络活动

“网络”面板

了解“网络”面板中的所有功能：检查响应和请求正文、覆盖标头等。

检查网络活动

本实操教程将指导您完成“网络”面板中的常见任务。