Chrome DevTools（开发者工具）是 Google Chrome 内置的一套 Web 开发工具。按 F12，或在 Windows 和 Linux 上按 Ctrl + Shift + I、在 Mac 上按 Cmd + Option + I 即可打开。它可以实时查看和编辑页面的 HTML 与 CSS、运行 JavaScript、查看每一个网络请求、测量性能、模拟手机以及审计页面。本教程按照大多数人用到的顺序介绍最常用的面板，并整理出最省时间的快捷键。
打开 DevTools 并熟悉界面
除了快捷键，你还可以右键点击任意元素并选择检查，DevTools 会打开并选中该元素。Chrome 菜单中的更多工具 > 开发者工具也能打开它。
一开始就需要了解三个控件：
- 顶部的面板标签（Elements、Console、Sources、Network 等）。不常用的面板藏在
>>箭头后面。 - 三点菜单中的停靠位置：右侧、底部、左侧或独立窗口。如果有两块屏幕，独立窗口很方便。
- 命令菜单：
Ctrl + Shift + P（Mac 上为Cmd + Shift + P）。输入任意功能名称（“screenshot”“disable JavaScript”“dark mode”）即可找到。这是了解 DevTools 能做什么的最快方法。
Elements：检查和编辑 HTML 与 CSS
Elements 面板显示的是实时 DOM，而不是原始源码，因此包含 JavaScript 动态添加的内容。选中一个节点后，右侧的 Styles 窗格会列出所有生效的 CSS 规则，哪条规则胜出、哪些被划掉一目了然。
值得一试的操作：
- 点击 Styles 中的任意值即可编辑并立即看到效果。刷新后修改会丢失，除非设置了 local overrides。
- 用 :hov 按钮开启
:hover、:focus等状态，无需一直悬停鼠标就能调整交互状态的样式。 - 点击颜色旁边的色块会打开取色器，它还会显示文字的对比度。
- 打开 Computed 标签，查看每个属性的最终值和盒模型。
- 留意元素旁边的 flex 和 grid 标记，点击后会在页面上叠加布局线。
Console：运行 JavaScript 和查看错误
Console 显示页面的错误、警告和 console.log 输出，也可以在页面上下文中运行 JavaScript。几个实用的辅助命令：
$0表示当前在 Elements 面板中选中的元素。$$('a')以数组形式返回所有匹配选择器的元素。copy(obj)把一个值复制到剪贴板。- 按级别（错误、警告）和文本过滤，减少干扰信息。
Sources：调试 JavaScript
Sources 面板显示页面的文件，也是设置断点的地方。点击行号即可在该行暂停，然后单步执行并查看变量。条件断点（右键点击行号）只在表达式为真时暂停。Event listener breakpoints 会在任意点击、按键或其他事件发生时暂停，在你不清楚哪段代码在运行时非常有用。
Network：查看每一个请求
Network 面板列出页面发出的所有请求：文档、脚本、图片、字体和 API 调用，并显示状态、大小和耗时。点击某个请求可以查看请求头、请求体、响应和耗时明细。
实用技巧：
- 勾选 Disable cache，在 DevTools 打开期间始终加载最新文件。
- 用 Throttling 下拉菜单模拟较慢的移动网络。
- 按类型（Fetch/XHR、JS、Img）过滤，快速找到需要的请求。
- 右键点击请求，复制为
fetch或cURL，以便在其他地方重放。
Performance：找出页面变慢的原因
录制一次页面加载或一次交互，Performance 面板会以时间线展示浏览器做了什么：脚本执行、渲染、绘制和网络。耗时较长的任务会以红色标出。面板还会实时显示你自己操作的 Core Web Vitals（LCP、CLS 和 INP），并给出可能原因的提示。若想得到接近手机的结果，录制前把 CPU 降速设为 4 倍或 6 倍。更多内容见移动端页面速度测试指南。
Application：存储、Cookie 和 Service Worker
Application 面板展示页面存储的内容：Cookie、localStorage 和 sessionStorage、IndexedDB、Cache Storage 以及已注册的 Service Worker。你可以编辑或删除条目，这是重置登录状态或测试首次访问体验最快的方法。Clear site data 会清除当前源的所有数据。
Lighthouse：审计页面
Lighthouse 面板会在移动端或桌面模式下，对性能、无障碍、最佳实践和 SEO 进行自动审计。具体步骤见如何在 Chrome 中运行 Lighthouse 移动端审计。
设备模式：模拟手机和平板
设备工具栏（在 DevTools 获得焦点时按 Ctrl + Shift + M 或 Cmd + Shift + M）会把页面切换为手机或平板视图，并应用相应的视口、像素比、User Agent 和触摸事件。详见 Chrome 手机模拟器教程。如果只想快速看看效果而不打开 DevTools，Mobile View Extension 点击工具栏按钮就能提供同样的设备预览。
值得记住的快捷键
| 操作 | Windows / Linux | Mac |
|---|---|---|
| 打开 DevTools | F12 或 Ctrl + Shift + I |
Cmd + Option + I |
| 直接打开 Console | Ctrl + Shift + J |
Cmd + Option + J |
| 检查元素模式 | Ctrl + Shift + C |
Cmd + Shift + C |
| 命令菜单 | Ctrl + Shift + P |
Cmd + Shift + P |
| 切换设备工具栏 | Ctrl + Shift + M |
Cmd + Shift + M |
| 在所有文件中搜索 | Ctrl + Shift + F |
Cmd + Option + F |
| 按文件名打开文件 | Ctrl + P |
Cmd + P |
| 强制刷新 | Ctrl + Shift + R |
Cmd + Shift + R |
扩展 DevTools
Chrome 插件可以为 DevTools 添加自己的面板，例如 React、Vue、Angular 和 Redux 的调试工具，以及 axe DevTools 这类无障碍检测工具。精选清单见前端开发必备的 Chrome 插件。
常见问题
如何在 Chrome 中打开开发者工具？
在 Windows 和 Linux 上按 F12 或 Ctrl + Shift + I，在 Mac 上按 Cmd + Option + I，或者右键点击页面并选择“检查”。
可以用 Chrome DevTools 修改网站吗？
你可以在自己的浏览器里修改页面的 HTML 和 CSS 来试验效果。这些修改只在本地生效，刷新后就会消失，不会改变真实的网站。
Chrome DevTools 免费吗？
免费。DevTools 是 Chrome 以及 Edge、Brave、Opera 等所有基于 Chromium 的浏览器的一部分，无需额外下载。