Chrome 瀏覽器，對(duì)前端來(lái)說(shuō)幾乎就是“第二個(gè) IDE”。

我們每天都在用它看 Network、打斷點(diǎn)、調(diào)樣式，但說(shuō)實(shí)話——DevTools 的能力，你可能只用了 30%。

Google Chrome(谷歌瀏覽器) 32位 v147.0.7727.117 官方中文版

• 類型：主頁(yè)瀏覽
• 大小：178MB
• 語(yǔ)言：簡(jiǎn)體中文
• 時(shí)間：2026-04-24

查看詳情

有些功能并不冷門，只是沒(méi)人系統(tǒng)地告訴你該怎么用； 但一旦你用順了，調(diào)試效率會(huì)明顯上一個(gè)檔次。

今天給大家分享 8 個(gè)我自己在日常開發(fā)中反復(fù)用、而且非常“值”的 F12 技巧。

1. document.designMode 上帝模式

讓整個(gè)網(wǎng)頁(yè)“可編輯”，只需要在控制臺(tái)里執(zhí)行一行代碼：

document.designMode =?'on'

瞬間，整個(gè)網(wǎng)頁(yè)的文本都可以直接點(diǎn)開編輯， 就像在瀏覽器里開了一個(gè) Word。

你可以：

• 隨便改文案
• 改標(biāo)題、按鈕文字
• 改提示語(yǔ)然后截圖

關(guān)閉也很簡(jiǎn)單：

document.designMode =?'off'

適用場(chǎng)景

• UI / 文案評(píng)審
• 產(chǎn)品說(shuō)“這個(gè)字能不能換一下看看效果”
• 截圖、演示、PPT

2. Network 請(qǐng)求重放（Replay XHR / Fetch）

聯(lián)調(diào)接口時(shí)，這個(gè)功能真的救命。

操作步驟：

• 打開 Network
• 切到 Fetch / XHR
• 找到目標(biāo)請(qǐng)求
• 右鍵 → Replay XHR

瀏覽器會(huì)原樣再發(fā)一次請(qǐng)求， 不刷新頁(yè)面、不走任何 UI 邏輯。

適用場(chǎng)景

• 接口偶現(xiàn)問(wèn)題
• 登錄 / 提交 / 下單類接口
• 不想反復(fù)點(diǎn)按鈕

3. 修改 Network 請(qǐng)求返回結(jié)果（前端本地 Mock）

很多人不知道：Chrome 是可以直接改接口返回的。

通過(guò) Network 的 Local Overrides，你可以：

• 改接口返回?cái)?shù)據(jù)
• 模擬空數(shù)據(jù) / 異常數(shù)據(jù)
• 前端不等后端直接開發(fā)

大致流程：

• 打開 Network → Overrides
• 選擇一個(gè)本地目錄
• 右鍵請(qǐng)求 → Save for overrides
• 修改返回內(nèi)容
• 刷新頁(yè)面，瀏覽器優(yōu)先用你本地的響應(yīng)

適用場(chǎng)景

• 后端接口還沒(méi)好
• 復(fù)現(xiàn)線上異常數(shù)據(jù)
• 測(cè)試 UI 容錯(cuò)能力

4. 在控制臺(tái)快速發(fā)送請(qǐng)求（Copy as fetch）

有時(shí)候你只想：

• 改個(gè)參數(shù)
• 重發(fā)一次請(qǐng)求
• 不想刷新頁(yè)面

可以這樣做：

• Network → Fetch / XHR
• 選中請(qǐng)求
• 右鍵 → Copy as fetch
• 粘貼到控制臺(tái)
• 改參數(shù)，回車執(zhí)行

適用場(chǎng)景

• 快速調(diào)接口
• 模擬不同入?yún)?/li>
• 獨(dú)立驗(yàn)證后端邏輯

5. 接口過(guò)濾：勾選「反轉(zhuǎn)」，只看你關(guān)心的請(qǐng)求

Network 請(qǐng)求一多，很容易眼花。

很多人只會(huì)用關(guān)鍵字過(guò)濾， 但其實(shí)還有一個(gè)更狠的用法：

勾選「Invert（反轉(zhuǎn)）」

你可以：

• 過(guò)濾掉埋點(diǎn)、監(jiān)控、第三方請(qǐng)求
• 只留下你真正關(guān)心的接口

適用場(chǎng)景

• 頁(yè)面請(qǐng)求非常多
• 只想盯業(yè)務(wù)接口
• 排查性能問(wèn)題

6. 在控制臺(tái)中獲取當(dāng)前選中的 DOM：$0

在 Elements 面板里選中一個(gè) DOM 元素后， 切到 Console，直接用：

$0

它就是你剛剛選中的那個(gè)元素。

你可以立刻做：

$0.offsetWidth
$0.getBoundingClientRect()
$0.classList

小知識(shí)：

• $1、$2 是之前選中過(guò)的元素
• 非常適合調(diào)樣式、查布局

7. 在控制臺(tái)用 $i 安裝 npm 包

想臨時(shí)用一下 dayjs、lodash， 但又不想查官網(wǎng)、寫 demo？

可以直接在控制臺(tái)里裝。

前提： 安裝 Chrome 插件 Console Importer

然后在控制臺(tái)執(zhí)行：

$i('dayjs')
$i('lodash')

幾秒后，庫(kù)就能直接用了。

 適用場(chǎng)景

• 快速驗(yàn)證 API
• 臨時(shí)數(shù)據(jù)處理
• 調(diào)試邏輯思路

8. 源代碼里 Ctrl + P：秒級(jí)定位文件并打斷點(diǎn)

當(dāng)項(xiàng)目文件很多時(shí)， 在 Sources 面板里一層一層找文件，非常浪費(fèi)時(shí)間。

正確姿勢(shì)是：

• 打開 Sources
• 按 Ctrl + P / Cmd + P
• 輸入文件名
• 回車直達(dá)文件
• 直接打斷點(diǎn)

適用場(chǎng)景

• 大型項(xiàng)目
• 快速定位某個(gè)邏輯文件
• 臨時(shí)追代碼

寫在最后

這些技巧沒(méi)有一個(gè)是“高深 API”， 但它們都有一個(gè)共同點(diǎn)：

讓你少刷新、少改代碼、少等別人。

Chrome DevTools 真正強(qiáng)的地方， 不是功能多，而是你能不能把它當(dāng)成主力開發(fā)工具來(lái)用。

最新評(píng)論