Chrome DevTools 深度技巧：8 个让你效率翻倍的「隐藏用法」

具体用法 & 示例#

只需在控制台执行一行代码：

1
document.designMode = 'on' // 开启编辑模式

此时网页瞬间变成「可编辑状态」，你可以：

• 改文案：比如电商页面的「立即购买」改成「限时抢购」，演示给产品看效果；
• 调布局：比如把标题的「h1」改成「h2」（直接编辑文本节点的标签）；
• 截图素材：比如修改活动页的「倒计时数字」，截图用于 PPT 或宣传图。

注意事项#

• 编辑后不要刷新页面，否则会恢复原始内容；
• 无法修改「不可编辑元素」（比如 <input disabled>），但可以先改 disabled 属性：

  1
  document.querySelector('input').disabled = false // 解除禁用再编辑

• 关闭编辑模式：

  1
  document.designMode = 'off'

操作步骤（带示例）#

假设你在调试「登录接口」，偶现 401 错误：

1. 打开 Network → 切换到 Fetch / XHR 标签（过滤异步请求）；
2. 找到目标请求（比如 POST /api/login）；
3. 右键 → 选择 Replay XHR（或 Replay Fetch）；
4. 浏览器会原样重发请求（包含所有 header、cookie、body），结果会更新在 Network 面板。

高级用法#

• 批量重放：选中多个请求，右键 → Replay XHR，适合测试接口幂等性（比如多次提交订单是否只生成一个记录）；
• 对比结果：重放前后的请求结果会保留在 Network 中，方便对比「成功」和「失败」的响应差异。

注意事项#

• 重发请求时，cookie 和登录状态是复用当前页面的，所以如果登录过期，需要重新登录；
• 对于「非幂等接口」（比如提交订单），重放可能导致重复操作，需谨慎使用。

详细操作流程（附示例）#

假设你需要模拟「商品列表为空」的场景：

1. 打开 Network → 切换到 Overrides 标签；
2. 点击「Select folder for overrides」，选择一个空的本地目录（用于保存修改后的文件）；
3. 找到目标请求（比如 GET /api/goods），右键 → Save for overrides（浏览器会把请求的响应保存到本地目录）；
4. 打开本地目录中的响应文件（比如 goods.json），修改内容：

   1
   {
   2
     "code": 200,
   3
     "data": [], // 改成空数组
   4
     "msg": "success"
   5
   }

5. 刷新页面，浏览器会优先加载本地修改后的响应，UI 会显示「暂无商品」。

适用场景#

• 后端接口未完成，前端先开发 UI；
• 模拟异常数据（比如 code: 500、msg: "服务器错误"）；
• 测试边界情况（比如空数据、超长文本、特殊字符）。

注意事项#

• 修改后的文件必须保存（Ctrl + S），否则浏览器不会生效；
• 如果接口有缓存，需要在 Network 面板勾选「Disable cache」（禁用缓存）；
• 跨域请求无法覆盖？可以配合 CORS Unblock 插件解决。

操作示例#

假设你需要测试「不同用户的登录响应」：

1. Network 中找到登录请求（POST /api/login）；
2. 右键 → Copy → Copy as fetch；
3. 粘贴到控制台，得到以下代码：

   1
   fetch('https://example.com/api/login', {
   2
     headers: {
   3
       'content-type': 'application/json',
   4
       cookie: 'session_id=abc123',
   5
     },
   6
     body: JSON.stringify({
   7
       username: 'admin',
   8
       password: '123456',
   9
     }),
   10
     method: 'POST',
   11
   })

4. 修改 username 为 testuser，回车执行，即可测试新用户的登录响应。

高级用法#

• 修改请求方法：比如把 POST 改成 GET，测试接口的兼容性；
• 添加 header：比如加 Authorization: Bearer token，测试授权接口；
• 保存为代码片段：将修改后的 fetch 代码保存到 Sources → Snippets，下次直接运行。

操作步骤（带实用规则）#

1. 打开 Network 面板的过滤框（顶部搜索栏）；
2. 输入过滤规则，勾选「Invert」（反转），即可排除不需要的请求。

看这滚动条，你懂我想说什么吧

实用过滤规则示例#

• 排除静态资源：-*.css -*.png -*.jpg -*.js（过滤掉样式、图片、JS 文件）；
• 排除第三方接口：-api.iconify.design -posthog.com -analytics.example.com（过滤掉图标、埋点、统计接口）；
• 排除 OPTIONS 请求：-method:OPTIONS（过滤掉预检请求）；
• 只看业务接口：/api（只显示路径包含 /api 的请求） + 反转排除其他。

我的常用示例： -.css -.png -.jpg -.png -.webp -.jpeg -.js -.svg -.gif -.ico -.woff2 -.eot -.ttf -.otf -.mp4 -.mp3 -api.iconify.design -posthog.com 前面是静态资源过滤，后面是非业务接口过滤。这样剩下的只有接口 PS 调试时记得取消过滤以免出现低级失误 ^_^

规则说明#

• - 表示「排除」，+ 表示「包含」（默认）；
• 支持通配符 *（比如 *.png 匹配所有 PNG 图片）；
• 支持按「方法」过滤（比如 method:POST 只看 POST 请求）。

实用示例#

• 修改样式：比如把按钮改成红色（实时预览）：

  1
  $0.style.backgroundColor = 'red'
  2
  $0.style.color = 'white'

• 获取属性：比如获取链接的 href 或自定义属性 data-id：

  1
  $0.href // 获取链接地址
  2
  $0.dataset.id // 获取 data-id 属性（<div data-id="123">）

• 操作元素：比如让元素滚动到可视区域：

  1
  $0.scrollIntoView({ behavior: 'smooth' }) // 平滑滚动

扩展技巧#

• $1：上一个选中的 DOM 元素；
• $2：上上个选中的 DOM 元素（最多到 $4）；
• $$('selector')：等价于 document.querySelectorAll（比如 $$('button') 获取所有按钮）。

操作步骤#

1. 安装 Chrome 插件：Console Importer（从 Chrome 商店搜索安装）；
2. 打开控制台，输入 $i('包名')，比如：

   1
   $i('dayjs') // 安装 dayjs
   2
   $i('lodash') // 安装 lodash

3. 等待安装完成（控制台会提示 Imported dayjs (version x.x.x)）；
4. 直接使用：

   1
   dayjs().format('YYYY-MM-DD') // 格式化日期
   2
   _.debounce(() => console.log('防抖'), 1000) // 测试防抖函数

注意事项#

• 插件会从 unpkg.com 加载 CDN 资源，需要联网；
• 刷新页面后，安装的包会失效（临时使用）；
• 支持安装多个包（比如 $i('dayjs', 'lodash')）。

操作步骤#

1. 打开 Sources 面板；
2. 按 Ctrl + P（Mac 是 Cmd + P），弹出文件搜索框；
3. 输入文件名（支持模糊匹配），比如 Home.vue 或 Button.jsx；
4. 回车直达文件，直接在代码行号旁点击打断点。

高级用法#

• 路径别名：如果项目用了 @ 别名（比如 @/views/Home.vue），直接输入 @/views/Home 即可定位；
• 搜索代码片段：输入 function login，可以找到包含 login 函数的文件；
• 快速跳转：定位到文件后，按 Ctrl + G（Mac 是 Cmd + G）输入行号，直接跳转到指定行。