第 19 章 · 浏览器开发者工具
一句话：Chrome 和 Edge 自带的调试工具，按
F12打开，能看页面的 DOM 和样式、浏览器发出的每个请求、在页面脚本里打断点，还能模拟手机屏幕和慢网速。 用它还是用别的：网页自己发出的请求、页面上的样式和脚本问题，先在这里看；要脱离浏览器反复重放、写进脚本的请求，“复制为 cURL”后交给 curl（第 18 章）；后端代码的断点在编辑器里打（第 1 章）。 核对版本：Microsoft Edge 154（Chromium 内核，与 Chrome 同一套开发者工具），2026-10
19.1 安装与版本
Section titled “19.1 安装与版本”开发者工具（DevTools）是浏览器的一部分，不用单独装。Windows 自带 Edge；要用 Chrome：
winget install Google.Chrome# macOSbrew install --cask google-chrome# Ubuntu、Debian：下载官方 deb 包再安装wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb && sudo apt install ./google-chrome-stable_current_amd64.deb打开方式：按 F12 或 Ctrl+Shift+I；或者在页面上右键某个元素选“检查”（Inspect），直接定位到这个元素。Chrome 和 Edge 用同一套开发者工具，面板、快捷键、菜单项几乎一样，本章的操作两边都适用。Firefox 也按 F12 打开，面板名和部分快捷键不同，本章不展开，见 19.7 的 MDN 指南。
查版本：在地址栏打开 edge://version 或 chrome://version，第一行就是。Windows 上也可以在终端里查 Edge：
(Get-Item "${env:ProgramFiles(x86)}\Microsoft\Edge\Application\msedge.exe").VersionInfo.ProductVersion开发者工具跟浏览器一起自动更新，新版本偶尔会改菜单项的名字。本章写的是 154 版英文界面的叫法，能确认的在括号里附上中文界面（Edge 简体中文）的叫法；和书上对不上时，按 Ctrl+Shift+P 输入英文名搜索。
19.2 五分钟概念
Section titled “19.2 五分钟概念”- 面板（Panel）：开发者工具顶部的一排标签页。Elements（元素）看和改 DOM 与 CSS；Console（控制台）看报错、执行 JavaScript；Network（网络）列出页面发出的每个请求；Sources（源代码）看脚本、打断点；Application（应用程序）看 Cookie、Local Storage 等存储；Performance（性能）录制一段时间内的渲染和脚本耗时；Lighthouse 给页面的性能、可访问性打分并列出改进项。
- 命令菜单（Command Menu）：按
Ctrl+Shift+P，输入几个字执行任意命令，和 VS Code 的命令面板一样。记不住某个设置在哪时先用它，例如输入screenshot选“Capture full size screenshot”，把整页截成一张长图。 - 抽屉（Drawer）：按
Esc在当前面板下方再开一个区域，默认是 Console。边看 Network 里的请求边在 Console 里敲命令，就靠它。 - 设备模拟（Device Mode）：按
Ctrl+Shift+M，页面按手机的屏幕尺寸、像素比和触摸事件渲染，顶部工具栏可以选机型、限速。它只是 Chromium 换了尺寸和 User-Agent，iPhone 上 Safari 特有的问题照样要在真机上查。 - 保留日志与停用缓存：Network 面板顶部两个复选框。Keep log（旧版本叫 Preserve log）勾上后，刷新或跳转页面时之前的请求不被清掉，排查“提交后跳转、跳转前那个请求出了错”就靠它。Disable cache（禁用缓存）勾上后，只要开发者工具开着，每个请求都不用浏览器缓存，等于每次都是第一次访问。
- 请求计时（Timing）：在 Network 里点开一个请求，Timing 标签把这次请求的耗时拆成几段，哪段长就说明慢在哪里，见下图。
图里最常用的是 Waiting for server response 这一段，即首字节时间（TTFB）：浏览器把请求发完到收到响应第一个字节之间等了多久，等于一次网络往返加上后端处理这个请求的时间。它长，去查后端日志和数据库；它短而 Content download 长，是响应正文太大，该压缩或分页；前面几段长，问题在网络或连接上，和后端代码无关。
19.3 常用操作与快捷键
Section titled “19.3 常用操作与快捷键”macOS 列里 Cmd 是 ⌘，Option 是 ⌥；笔记本键盘上按 F10、F11 这类功能键时，macOS 可能要同时按 Fn。快捷键只在焦点位于开发者工具里时生效，焦点在页面上时 Ctrl+Shift+P 之类的键会被浏览器或网页自己接走。正文（工作流和注意事项）里的快捷键只写 Windows 写法，macOS 对应键看本表；没有快捷键的操作，两列写的是鼠标操作。
| 操作 | Windows | macOS | 说明 |
|---|---|---|---|
| 打开与切换 | |||
| 打开开发者工具 | F12 或 Ctrl+Shift+I |
Cmd+Option+I |
打开上次用的面板 |
| 直接打开 Console | Ctrl+Shift+J |
Cmd+Option+J |
页面报错时最快看到错误信息 |
| 命令菜单 | Ctrl+Shift+P |
Cmd+Shift+P |
输入命令名，不用记设置在哪 |
| 上一个、下一个面板 | Ctrl+[ / Ctrl+] |
Cmd+[ / Cmd+] |
在 Elements、Console 等之间切 |
| 显示或隐藏抽屉 | Esc |
Esc |
在当前面板下方开 Console |
| 打开设置 | F1 |
F1 |
也可以按 ? |
| 在所有文件里搜索 | Ctrl+Shift+F |
Cmd+Option+F |
搜页面加载的全部脚本和样式 |
| 按文件名打开 | Ctrl+P |
Cmd+P |
在 Sources 里打开某个脚本 |
| 强制刷新 | Ctrl+Shift+R 或 Ctrl+F5 |
Cmd+Shift+R |
跳过缓存重新下载页面和资源 |
| Elements | |||
| 在页面上点选元素 | Ctrl+Shift+C |
Cmd+Shift+C |
鼠标移到哪里就高亮哪个元素，点一下定位到 DOM |
| 以 HTML 形式编辑节点 | F2 |
F2 |
先在 DOM 树里选中节点 |
| 隐藏选中的元素 | H |
H |
加上 visibility: hidden，再按一次恢复 |
强制 :hover 等状态 |
右键节点，Force state，选 :hover |
同左 | 不用一直把鼠标放在元素上 |
| 数值加减 1、10 | ↑ / ↓，加 Shift 为 10 |
↑ / ↓，加 Shift 为 10 |
在 Styles 里选中数值后按；加 Alt（macOS 为 Option）为 0.1 |
| Console | |||
| 清空控制台 | Ctrl+L |
Cmd+K |
也可以执行 console.clear() |
| 引用刚选中的元素 | $0 |
$0 |
在 Elements 里选中一个节点，Console 里用 $0 拿到它 |
| 按选择器取元素 | $$('a') |
$$('a') |
返回数组，$('a') 只取第一个 |
| 复制到剪贴板 | copy(<表达式>) |
copy(<表达式>) |
对象会复制成 JSON 文本 |
| Network | |||
| 开始或停止记录 | Ctrl+E |
Cmd+E |
停止后不再记录新请求 |
| 按条件过滤请求 | 过滤框输入 status-code:500 |
同左 | 还有 method:POST、domain:、larger-than:1M |
| 在请求头和正文里搜索 | Ctrl+F |
Cmd+F |
找带某个参数或令牌的请求 |
| 重新发送选中的请求 | R |
R |
只对 Fetch/XHR 请求有效；右键菜单里叫 Resend（重新发送） |
| 复制为 cURL | 右键请求，Copy，Copy as cURL (bash) | 右键请求，Copy，Copy as cURL | Windows 另有 (cmd) 版；各平台都有 Copy as PowerShell、Copy as fetch |
| 模拟慢网速 | 顶部 Throttling 下拉，选 3G | 同左 | 还有 Fast 4G、Slow 4G、Offline |
| Sources | |||
| 设置或取消断点 | Ctrl+B，或点行号 |
Cmd+B，或点行号 |
光标所在行 |
| 条件断点 | Ctrl+Alt+B |
Cmd+Option+B |
表达式为真时才停，循环里只想看某一轮时用 |
| 暂停或继续 | F8 或 Ctrl+\ |
F8 或 Cmd+\ |
停在断点后继续运行到下一个断点 |
| 单步跳过 | F10 或 Ctrl+' |
F10 或 Cmd+' |
执行当前行，不进入函数 |
| 单步进入、跳出 | F11 / Shift+F11，或 Ctrl+; / Ctrl+Shift+; |
F11 / Shift+F11，或 Cmd+; / Cmd+Shift+; |
进入当前行调用的函数，或执行完当前函数返回 |
| 发请求时暂停 | 右侧 XHR/fetch breakpoints 点 + 填 URL 片段 |
同左 | 找不到是哪段代码发的请求时用 |
| 单步时跳过库代码 | 右键文件，Add script to ignore list | 同左 | 单步不再进入 React、jQuery 这类库 |
| Application | |||
| 看和改 Cookie | 左侧 Storage，Cookies，选站点 | 同左 | 双击值可改，看 HttpOnly、Secure 列 |
| 看 Local Storage | 左侧 Storage，Local storage | 同左 | 前端存的令牌、开关常在这里 |
| 清除这个站点的数据 | 左侧 Storage，Clear site data | 同左 | 一次清掉 Cookie、存储和缓存，只影响当前站点 |
| 设备模拟 | |||
| 切换设备模拟 | Ctrl+Shift+M |
Cmd+Shift+M |
顶部下拉选机型，或选 Responsive 拖动尺寸 |
19.4 典型工作流
Section titled “19.4 典型工作流”接口报错，把那次请求复制到终端重放
Section titled “接口报错，把那次请求复制到终端重放”页面点“保存”后提示失败，要拿到浏览器发出的那个完整请求，交给后端同事或在终端里反复试。下面用 Git Bash，原因见第 18 章 18.4：
- 按
F12打开开发者工具，点 Network 标签，勾上 Keep log，再点一次页面上的“保存”。 - 点 Fetch/XHR 过滤按钮，只看接口请求；或在过滤框输入
status-code:500。 - 点开红色的那一行，Headers 标签看请求地址和状态码，Payload 标签看发出去的参数，Response 标签看后端返回的错误信息。
- 右键这一行，选 Copy，再选 Copy as cURL (bash)（中文界面为“复制为 cURL (bash)”）。
- 粘贴到 Git Bash 里，删掉其中的
If-Modified-Since、If-None-Match两行（有的话），末尾加-i运行，看到和浏览器里一样的状态码和响应：curl --url 'http://localhost:3000/api/users' … -i。 - 改参数重试，或把命令发给后端同事。复制出来的请求头里有
Cookie和Authorization，即你的登录凭据，发到群里前先删掉这两行。 - 只是想让浏览器把同一个请求再发一次，不用离开开发者工具：选中这一行按
R。
在 Sources 里给点击事件打断点
Section titled “在 Sources 里给点击事件打断点”点按钮没反应，也不知道是哪段代码处理的点击：
- 打开 Sources 面板，右侧展开 Event listener breakpoints，在 Mouse 下勾上
click。 - 点页面上那个按钮。脚本停在点击处理函数的第一行，顶部显示 Paused on event listener，左侧打开的就是那个脚本文件。
- 在想细看的那一行点行号，加一个普通断点，然后去掉第 1 步的
click，免得点别处也停。 - 按
F8继续，再点一次按钮，停在刚才那一行。 - 右侧 Scope 里看局部变量；鼠标悬停在代码里的变量上也能看到值。
- 按
F10一行一行往下走，遇到要进去看的函数按F11。 - 只想在某个条件下才停，右键行号选 Add conditional breakpoint…（添加条件断点），填表达式，例如
n === 3。 - 在抽屉的 Console 里输入变量名或表达式，得到当前暂停位置的值；看完按
F8继续运行。
本地正常、线上样式错
Section titled “本地正常、线上样式错”本地页面一切正常，部署后按钮样式不对：
- 打开线上页面，按
F12，在 Network 勾上 Disable cache（禁用缓存）。 - 按
Ctrl+Shift+R强制刷新；样式恢复正常，说明之前用的是浏览器缓存里的旧 CSS，见 19.6。 - 仍然不对：按
Ctrl+Shift+C，点那个按钮，定位到它的 DOM 节点。 - 看 Styles 窗格：被划掉的属性是被优先级更高的规则覆盖了，右边写着每条规则来自哪个文件第几行。
- 切到 Computed 标签，找到出问题的属性（如
color），展开看最终生效的值和来源。 - 规则来自一个意料之外的文件，在 Network 里过滤 CSS，看线上实际加载的是哪几个样式文件、状态码是不是
200。 - 在 Styles 里直接改值试，确认改法后回编辑器改源文件：开发者工具里的修改刷新就没了。
19.5 配置要点
Section titled “19.5 配置要点”开发者工具没有配置文件，设置存在浏览器的用户配置目录里，换一个浏览器配置（Profile）就是另一套设置。按 F1 打开设置，常用的在 Preferences（首选项）页。
| 配置项 | 在哪 | 建议 | 效果 |
|---|---|---|---|
| Disable cache | Network 面板顶部，或设置里 Network 一节 | 开发时勾上 | 开发者工具开着时不用缓存，改了文件刷新就能看到 |
| Keep log | Network 面板顶部；Console 设置里也有一个 | 排查跳转、登录时勾上 | 刷新、跳转后之前的请求和日志保留 |
| Theme | Preferences，Appearance | 按喜好 | 浅色、深色或跟随系统 |
| Language | Preferences，Appearance | 照着英文资料查时选 English | 开发者工具界面语言，默认跟浏览器一致，改后要重新打开开发者工具 |
| JavaScript source maps | Preferences，Sources | 保持勾选 | 打包后的代码按源码显示，断点打在源文件上 |
| CSS source maps | Preferences，Sources | 保持勾选 | Styles 里显示 Sass、Less 源文件位置 |
| Dock side | 开发者工具右上角 ⋮ 菜单 | 宽屏选右侧，窄屏选底部 | 也可以取消停靠，单独成一个窗口 |
| Throttling | Network 面板顶部 | 平时选 No throttling | 选了慢网速忘记改回来，所有请求都会变慢 |
改了页面的 CSS、JS 想刷新后还在，有两个办法。Overrides：在 Sources 的 Overrides 标签里选一个本地空文件夹并允许访问，之后在 Sources 里改的文件存进这个文件夹，刷新后浏览器用你的版本替换线上文件，适合在线上页面试改。Workspace（工作区）：在 Sources 的 Workspace 标签里添加本机的项目文件夹，开发者工具里的修改直接写回源文件，适合本地开发。
19.6 注意事项
Section titled “19.6 注意事项”- Network 面板里刚才那个请求，页面一跳转就没了。 原因：默认每次页面加载都清空记录。处理：勾上 Network 顶部的 Keep log，再操作一遍。
- 在 Elements 里改好的样式，刷新后又变回去了。 原因：开发者工具里的修改只在当前这次页面加载中有效，不写回文件。处理：改法确定后回编辑器改源文件；要刷新后保留，用 19.5 的 Overrides 或 Workspace。
- 断点打了却不停，或 Sources 里只有打包后的文件、找不到自己写的源文件。 原因：构建没有生成 source map，断点打在打包后的代码上，和实际运行的位置对不上。处理：构建配置里打开 source map（开发模式一般默认开），设置里保持 JavaScript source maps 勾选。
- Console 报
… has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present …。 原因：页面和接口不同源，响应没带跨域头。处理：后端加Access-Control-Allow-Origin，或用反向代理让前后端同域（第 16 章 16.4）。 - Console 报
Mixed Content: The page at '…' was loaded over HTTPS, but requested an insecure resource '…'。 原因：HTTPS 页面请求了http://地址，浏览器直接拦截。处理：把写死的http://改成https://，或改成以/开头的相对路径。 - 部署了新版本，页面还是旧样式、旧脚本。 原因：浏览器用了缓存里的旧文件，服务器没让它重新验证。处理：按
Ctrl+Shift+R强制刷新；长期办法是文件名带内容哈希，如app.3f9a.js。 - 复制出来的 cURL 在终端里返回
304 Not Modified，没有正文。 原因：复制的请求头里带着If-Modified-Since或If-None-Match，服务器认为你已有缓存。处理：删掉这两行再运行，或先勾上 Disable cache 再刷新并重新复制。 - PowerShell 里粘贴复制的 cURL，报
curl: (3) URL rejected: Bad hostname和一串无法将“-H”项识别为 cmdlet…。 原因：Copy as cURL (bash) 用\续行，PowerShell 不认。处理：粘进 Git Bash；PowerShell 里改用 Copy as PowerShell。
19.7 深入阅读
Section titled “19.7 深入阅读”- Chrome 开发者工具文档：各面板的教程和参考，从 Elements、Console 到 Network、Sources 断点。
- Chrome 开发者工具快捷键：全部快捷键按面板分组，Windows/Linux 与 Mac 两列，本章 19.3 据此核对。
- Network 面板参考：过滤语法、请求详情各标签、Timing 各段的含义、限速和请求拦截。
- Microsoft Edge 开发者工具文档：Edge 版的中文文档，含改界面语言、设备仿真和 Edge 特有的工具。
- 什么是浏览器开发者工具（MDN）：以 Firefox 为主介绍查看器、控制台和调试器，各浏览器怎么打开开发者工具。