Chrome DevTools 前端調試完全指南 2026 | 零基礎小白調試入門

Chrome DevTools 前端調試完全指南

寫前端代碼時出 bug 怎麼辦？「對著屏幕看半天看不出來」是新手常態。其實你只需按一個鍵 F12，Chrome 自帶的「開發者工具」就會跳出來，幫你像偵探一樣排查所有問題。這篇教程用大白話帶你從零掌握前端調試。

一、DevTools 是什麼？

1.1 通俗理解

想象你是一個修車工：

沒工具：你把手伸進車裡瞎摸，靠運氣找問題
有工具：你用儀表盤、診斷儀、內窺鏡，每個零件都看得清清楚楚

Chrome DevTools 就是網頁的「診斷儀」，它可以讓你看到：

網頁的 HTML 結構（骨架）
每個元素的 CSS 樣式（外表）
JavaScript 代碼的運行過程（內臟）
圖片和數據的加載速度（血液）

一句話總結：DevTools 是你調試網頁的「火眼金睛」。

1.2 怎麼打開 DevTools？

任選一種方式：

方式	操作
快捷鍵	按 F12 鍵（最常用）
快捷鍵 2	Ctrl + Shift + I（Windows）/ Cmd + Opt + I（Mac）
右鍵菜單	在網頁上右鍵 → 點「檢查（Inspect）」
菜單	瀏覽器右上角 ⋮ → 更多工具 → 開發者工具

💡 新手小技巧：
打開後默認在右側顯示，可以點右上角 ⋮ 改成底部彈出
按 Ctrl/Cmd + Shift + D 切換佈局（左右/上下）
按 Esc 在 DevTools 底部呼出控制檯（Console）

1.3 DevTools 有哪些面板？

打開後你會看到一排標籤頁，每個面板幹不同的活：

面板	英文名	用途	新手用得最多
🔍 元素	Elements	看 HTML + CSS，改樣式	⭐⭐⭐⭐⭐
📟 控制檯	Console	打印日誌、跑代碼、看報錯	⭐⭐⭐⭐⭐
📶 網絡	Network	看請求、接口、資源加載	⭐⭐⭐⭐
📚 源代碼	Sources	斷點調試 JS	⭐⭐⭐⭐
🏎 性能	Performance	測卡頓、分析性能	⭐⭐⭐
💼 應用	Application	看 Cookie、LocalStorage	⭐⭐⭐
🎛 內存	Memory	查內存洩漏	⭐⭐
📱 設備	-	模擬手機、平板	⭐⭐⭐

💡 新手入門前 4 個面板就夠了：Elements（元素）、Console（控制檯）、Network（網絡）、Sources（源代碼）。

二、Console 控制檯面板

2.1 控制檯能幹嘛？

Console（控制檯）是你和 JavaScript 對話的地方：

看網頁的 報錯和警告
你寫的 console.log() 會在這裡顯示
直接寫代碼回車，立刻跑起來（當計算器用也行）

2.2 console 打印

最常用的調試手段就是打日誌：

javascript

console.log('普通日誌')
console.warn('黃色警告，不太嚴重的問題')
console.error('紅色錯誤，嚴重問題，代碼可能崩了')
console.info('藍色信息提示')
console.debug('調試信息（需要勾選 Verbose 才顯示）')

💡 不同顏色不同含義：紅色是大問題（代碼跑崩了），黃色是警告（可能有隱患）。

2.3 打印對象和數組

javascript

// 直接打印對象
const user = { name: '小明', age: 25, city: '北京' }
console.log(user)     // 點開箭頭能展開看每一項
console.table(user)   // 表格形式顯示，更直觀！

// 打印數組
const fruits = ['蘋果', '香蕉', '橘子', '葡萄']
console.table(fruits) // 排成表格看

2.4 控制檯當計算器

在 Console 裡直接輸入數學式子回車：

javascript

123 + 456          // → 579
Math.round(3.7)    // → 4
Date.now()         // → 當前時間戳
'Hello ' + 'World' // → "Hello World"
[1,2,3].map(n => n*2) // → [2, 4, 6]

2.5 清除控制檯

控制檯滾得亂七八糟？

點左上角的 🚫 清空按鈕
快捷鍵：Ctrl/Cmd + L
輸入 clear() 回車
右鍵菜單 → Clear console

2.6 控制檯快捷鍵

快捷鍵	作用
↑ / ↓ 箭頭	翻歷史命令（像命令行一樣）
Ctrl/Cmd + Enter	換行（不執行）
Enter	執行代碼
Tab	自動補全

三、Elements 元素面板

3.1 元素面板能幹嘛？

這是新手用得最多的面板！在這裡你可以：

像看骨架一樣看整個網頁的 HTML 結構
實時修改樣式，立刻看效果（不用回代碼裡改）
找出 CSS 為什麼不生效的原因

3.2 選擇頁面上的元素

最經典的用法：點那個「箭頭」按鈕，然後鼠標移到網頁上，哪個元素被高亮，Console 就顯示哪個元素：

點 Elements 面板左上角的 🔍 箭頭按鈕（快捷鍵 Ctrl/Cmd + Shift + C）
鼠標放到網頁上
點擊想查看的那個元素

Elements 面板會自動定位到那個 HTML，右側 Style 欄就是它的所有 CSS 樣式。

💡 這是 UI 還原度對齊的神操作！設計師說「這個文字偏了 2px」時，你不用猜像素，直接在這裡調。

3.3 實時修改 CSS

假設你想把一個標題改成紅色：

點箭頭按鈕，選中那個標題
右側 Styles 欄裡會顯示它當前的 CSS
直接在上面加一行：
css
```
color: red;
font-size: 20px;
```
回車！網頁立刻變紅色大標題

💡 注意：這裡改的只是你瀏覽器裡的臨時效果，一刷新就沒了。確認好看了之後，把樣式複製粘貼回你的源代碼裡才算保存。

3.4 為什麼 CSS 不生效？（劃重點！）

新手最常見的問題：「我寫了樣式怎麼沒反應？」

在 Elements 的 Style 欄裡你能一眼看出原因：

現象	原因	解決
樣式被畫了一條 ~~刪除線~~	被「更高優先級」覆蓋了	要麼提高選擇器權重，要麼加 `!important`（不推薦）
樣式前有黃色三角 ⚠️	屬性名寫錯了！（比如 `coler: red`）	改對拼寫
樣式前有 i 圖標 ℹ️	有提示信息，懸停看詳情	按提示改
樣式顯示在灰色 `user agent stylesheet` 下	用的是瀏覽器默認樣式，沒被自定義覆蓋	寫自己的樣式覆蓋

💡 看到樣式被劃刪除線就是「被覆蓋」！看一下哪個樣式覆蓋了它，然後針對性地調權重或者順序。

3.5 Computed 計算後樣式

點 Computed 標籤（在 Style 右邊），能看到「最終生效」的所有樣式：

width、height、margin、padding 都是多少
每項點左邊箭頭，能追溯「到底是哪條 CSS 最終說了算」

3.6 Box Model 盒模型

Computed 裡還能看到 Box Model（盒模型）示意圖：

          ┌─────────────────────────┐
          │        margin           │
          │  ┌───────────────────┐  │
          │  │     border        │  │
          │  │  ┌─────────────┐  │  │
          │  │  │   padding   │  │  │
          │  │  │  ┌───────┐  │  │  │
          │  │  │  │content│  │  │  │
          │  │  │  └───────┘  │  │  │
          │  │  └─────────────┘  │  │
          │  └───────────────────┘  │
          └─────────────────────────┘

鼠標移上去，各個距離清清楚楚。排版亂了就來這裡看，一眼能看出「是 padding 太大還是 margin 太大」。

3.7 雙擊改 HTML

Elements 面板左側的 HTML 是可以直接改的：

雙擊文字 → 修改標籤裡的內容
雙擊標籤名（<div>）→ 修改標籤類型
右鍵 HTML → Copy、Edit as HTML、Delete element
按 H 鍵 → 臨時隱藏元素（調試神器！）

💡 小練習：現在打開百度，按 F12，點箭頭選中「百度一下」按鈕，然後在 Elements 裡雙擊文字，改成「搜它！」，回車看效果。

四、Network 網絡面板

4.1 網絡面板能幹嘛？

Network（網絡）面板幫你看：

網頁加載了哪些東西（HTML、CSS、JS、圖片、接口）
每個資源花了多少時間加載（找慢資源）
前後端接口返回了什麼數據（找接口 bug）
有沒有請求失敗（404、500 錯誤）

💡 前端 80% 的問題都是接口問題。數據顯示不對？先去 Network 看看接口返回的是啥。

4.2 面板裡每個列是什麼？

列名	含義	怎麼看
Name	文件名/接口名	看請求了什麼
Status	狀態碼	200=OK，404=找不到，500=服務器崩，304=走緩存
Type	資源類型	xhr/fetch=接口，script=JS，stylesheet=CSS，document=HTML
Initiator	誰發起的	一般不用管
Size	體積大小	數字紅色=太大了，要優化
Time	耗時	時間紅色=太慢了，要優化
Waterfall	加載時間線	看先後順序、並行度

💡 常見的狀態碼：
2xx（200~299）：✅ 成功
3xx（301、304）：🔁 重定向/緩存
4xx（400、401、403、404）：❌ 客戶端錯（你的鍋）
5xx（500、502、503）：💥 服務器錯（後端的鍋）

4.3 篩選接口

打開 Network 可能看到一堆資源，點上面的標籤來篩選：

ALL：全部顯示
Fetch/XHR：只看接口（前後端傳數據的請求，最常用！）
Img：只看圖片
JS / CSS：只看腳本/樣式
Doc：只看 HTML 文檔

💡 99% 的場景你就點 Fetch/XHR 看接口請求，點 Img 看圖片加載。

4.4 看接口返回了什麼數據

點篩選欄的 Fetch/XHR
點你要看的那個接口名
右側彈出來的窗口裡點 Response（響應） 或 Preview（預覽）

你就能看到後端給你返回的真實數據了。比如：

返回 { code: 500, msg: '數據庫掛了' } → 鍋在後端
返回 { code: 200, data: [] } → 數據是空的，前端顯示空就對了

4.5 看請求時你傳給後端了什麼

點同一個請求，右側窗口點 Payload（負載）：

Query String Parameters：URL 參數（? 後面的部分）
Form Data：表單提交的數據
Request Payload：JSON 格式的 POST body

4.6 模擬慢速網絡（重要！）

你在公司的超快 Wi-Fi 裡測試很流暢，用戶用 2G/3G 就卡死？點 Network 裡的 Online 下拉框，可以模擬：

Fast 3G：3G 快速
Slow 3G：3G 慢速（非常慢！）
Offline：斷網

💡 面試常考題目：「怎麼驗證 Loading 動畫真的能被用戶看到？」答案：切慢網速看看。這是面試題和生產 bug 的重災區。

4.7 禁用緩存

Network 面板勾選 Disable cache（禁用緩存），刷新頁面：

每次都從服務器下載最新版本（不會吃到舊的緩存文件）
做性能測試時建議勾選，否則拿到的是緩存數據不準

五、Sources 源代碼面板 + 斷點調試

5.1 為什麼用斷點？

打 console.log() 調試雖然簡單，但有時：

你根本不知道問題在哪，打一堆 log 找不到
想看某一步變量到底是什麼值

這時候斷點（Breakpoint）就是神器——你可以讓代碼在某一行暫停執行，然後一行一行走，像慢動作看動畫一樣看到每個變量的變化。

5.2 怎麼加斷點？

打開 Sources 面板
左側找到你要調試的 .js 或 .vue 文件
點代碼行號（比如第 42 行的 42），出現藍色箭頭 → 斷點打上了
刷新頁面或觸發那段代碼
頁面會凍住，代碼停在你打了斷點的那一行！

5.3 斷點暫停後，上面有幾個按鈕：

⏯  ▶  ⏭  ⏮  ↺
  |  |   |   |   |
  |  |   |   |   └─── 🔄 停用所有斷點 / 激活
  |  |   |   └─────── ⏮  Step out：跳出當前函數
  |  |   └─────────── ⏭  Step over：執行到下一行（不進函數內部）
  |  └─────────────── ⏵  Step into：進入函數內部
  └────────────────── ▶▶  Resume：繼續運行，直到下一個斷點

💡 新手只需要記住兩個按鈕：
Step over（下一個按鈕，彎箭頭向右）：一行一步走，最常用
Resume（最左邊的播放）：繼續跑到下一個斷點

5.4 看變量值

代碼暫停時：

鼠標懸停在代碼裡的變量名上 → 立刻顯示當前值
右側 Scope（作用域） 面板 → 能看到當前所有變量的值
右側 Watch（監視） → 把變量名加進去，每一步都能看到變化
底部 Console → 臨時輸入代碼，用當前暫停的變量做任何事

5.5 其他打斷點的方式

方式	什麼時候用	怎麼操作
普通斷點	知道大概哪一行有 bug	點行號
console 斷點	寫代碼的時候就能埋	在代碼裡寫 `debugger;`
條件斷點	只有滿足條件時才暫停	右鍵行號 → Conditional breakpoint，寫條件表達式
DOM 斷點	某元素被 JS 改了	Elements 面板右鍵元素 → Break on → subtree modifications...
XHR 斷點	接口請求返回的瞬間	Sources 面板右側 XHR/fetch Breakpoints → 加 URL 關鍵字

💡 debugger; 超好用！代碼裡寫一行 debugger;，相當於在那一行自動打了斷點。排查特定分支 bug 的神器。

6.1 打開設備模擬

按 Ctrl/Cmd + Shift + M，或者點 Elements 面板左上角的「📱 手機」按鈕，就進入手機模擬模式。

頂部的工具欄可以選：

設備型號：iPhone 14 Pro、iPad、Samsung Galaxy、Pixel… 應有盡有
屏幕尺寸：自定義寬高
DPR：設備像素比（高清屏/普通屏）
網絡：同 Network 面板裡的慢速模擬
GPS 定位：模擬經緯度
相機/麥克風：模擬權限

6.2 響應式開發必用

做移動端頁面時：

切進手機模式，選 iPhone
刷新頁面
再用 Elements 檢查樣式是不是在手機上崩了

💡 重要提醒：在桌面上看著沒問題的頁面，一定要切手機模式看一眼。99% 的新手做移動端都會在桌面屏幕上開發，忘了手機屏是窄的。

七、其他實用面板

7.1 Application 應用面板

存東西的地方都在這裡：

左側菜單	用途
Local Storage	本地長期存儲（手動清不掉就一直存在）
Session Storage	當前標籤頁關了就沒了
Cookies	Cookie，接口身份認證看這裡
IndexedDB	大量數據本地數據庫

調試常見場景：

登錄不上？點 Clear storage 清一下再試
權限 token 過期？看 Cookies 裡的 token 還在不在
本地偏好設置（比如主題色 dark/light）改了沒生效？看 Local Storage

7.2 Performance 性能面板

想知道你的網頁「為什麼卡」？錄一段 Performance：

打開 Performance 面板
點左上角 ⚪ 錄製按鈕
操作一下你覺得卡頓的那段過程（比如滾動、點擊按鈕）
點 ■ 停止錄製
等個幾秒鐘生成分析報告

你會看到：

哪段時間佔了最多 CPU（主色條長的就是卡的地方）
JS、渲染、繪製各花了多久
點擊火焰圖上每一小塊都能定位到具體是哪個函數慢

💡 新手先用這個找卡的宏觀瓶頸，具體哪行代碼慢再去 Sources 裡斷一下。

7.3 Lighthouse 網頁質量評分

Chrome 自帶的網站體檢工具，測 5 個維度：

Performance：性能（加載速度）
Accessibility：無障礙（給殘疾人用的支持）
Best Practices：最佳實踐（安全、規範等）
SEO：搜索引擎友好度
PWA：離線能力

點 Lighthouse 面板 → 點 Analyze page load → 等幾十秒，出一份報告和改進建議。

💡 把 Lighthouse 分數做高，你網頁加載更快、用戶更喜歡、Google 搜索排名也更高。

八、常見調試場景

8.1 場景一：樣式不生效？

步驟：

F12 打開 Elements
點箭頭，選中那個出問題的元素
右側 Styles 欄看：
- 樣式有沒有被劃線 → 被覆蓋了，提升權重
- 有沒有黃色警告 ⚠️ → 拼寫錯了
- Computed 裡看最終生效值是多少

8.2 場景二：接口報錯？

步驟：

F12 → Network → Fetch/XHR
重新觸發操作
看新請求的 Status：
- 404 → 接口路徑寫錯了
- 500 → 後端崩了（發給後端）
- 401/403 → 沒登錄/沒權限，檢查 Cookie
點進請求 → 看 Response 裡後端給的提示

8.3 場景三：控制檯紅了一片？

步驟：

看紅色錯誤信息，讀一下寫了啥
- Cannot read properties of undefined (reading 'name') → 你對 undefined 點了 .name
- xxx is not defined → 變量沒定義
- Failed to fetch → 網絡請求失敗
錯誤信息右邊一般有「文件名 + 行號」，點一下直接跳到 Sources 的報錯行
在那行打個斷點，刷新看看變量怎麼回事

8.4 場景四：按鈕點了沒反應？

步驟：

F12 → Elements，點箭頭選中按鈕
右側 Event Listeners（事件監聽） 標籤，看 click 有沒有掛上去
沒有掛上去 → JS 代碼沒跑，或選擇器寫錯了
掛上去了 → 去 Sources 裡在那個事件函數里打個斷點，看點擊進去跑到哪一步停了
如果沒進斷點 → 有一層透明的 div 蓋在按鈕上面了？（Elements 裡看層級）

8.5 場景五：圖片加載不出來？

步驟：

Network → 篩選 Img
找到那張圖片的請求
看 Status：
- 404 → 圖片地址寫錯了
- 403 → 防盜鏈/CORS 跨域
看 Size 是不是 0 B
右鍵圖片 → Open in new tab，直接訪問一下看能不能打開

九、實用快捷鍵速查

快捷鍵	作用
F12	打開/關閉 DevTools
Ctrl/Cmd + Shift + C	選擇元素模式（箭頭按鈕）
Ctrl/Cmd + Shift + M	切換手機模擬模式
Ctrl/Cmd + F	在面板裡搜索文字
Ctrl/Cmd + P	Sources 裡搜文件打開（超好用！）
Ctrl/Cmd + Shift + P	命令面板（所有功能的總菜單）
Ctrl/Cmd + L	清空控制檯
Esc	打開/關閉底部抽屜（比如 Console）
在代碼行按 B	加斷點 / 取消斷點

💡 最強快捷鍵 Ctrl/Cmd + Shift + P（命令面板）：打開後輸入「Capture full size screenshot」→ 截長圖（整頁），再也不用裝截圖插件了。

十、總結

回顧本教程的重點：

Console（控制檯）：看報錯、打 log、寫代碼試跑
Elements（元素）：改 HTML/CSS，排查樣式為什麼不生效
Network（網絡）：看接口、找慢資源、看狀態碼
Sources（源代碼）：斷點調試、一行一行跑代碼
手機模擬：按 Shift+Cmd+M，移動端開發必看
Application：Cookie / LocalStorage，清緩存看登錄
Performance + Lighthouse：找卡頓、給網站體檢

Chrome DevTools 是前端工程師的「吃飯工具」。每天打開它，寫代碼的過程中多用它排查問題，你會少走無數彎路。

相關閱讀：

Chrome DevTools 前端調試完全指南 2026 | 零基礎小白調試入門 ​

一、DevTools 是什麼？ ​

1.1 通俗理解 ​

1.2 怎麼打開 DevTools？ ​

1.3 DevTools 有哪些面板？ ​

二、Console 控制檯面板 ​

2.1 控制檯能幹嘛？ ​

2.2 console 打印 ​

2.3 打印對象和數組 ​

2.4 控制檯當計算器 ​

2.5 清除控制檯 ​

2.6 控制檯快捷鍵 ​

三、Elements 元素面板 ​

3.1 元素面板能幹嘛？ ​

3.2 選擇頁面上的元素 ​

3.3 實時修改 CSS ​

3.4 為什麼 CSS 不生效？（劃重點！） ​

3.5 Computed 計算後樣式 ​

3.6 Box Model 盒模型 ​

3.7 雙擊改 HTML ​

四、Network 網絡面板 ​

4.1 網絡面板能幹嘛？ ​

4.2 面板裡每個列是什麼？ ​

4.3 篩選接口 ​

4.4 看接口返回了什麼數據 ​

4.5 看請求時你傳給後端了什麼 ​

4.6 模擬慢速網絡（重要！） ​

4.7 禁用緩存 ​

五、Sources 源代碼面板 + 斷點調試 ​

5.1 為什麼用斷點？ ​

5.2 怎麼加斷點？ ​

5.3 斷點暫停後，上面有幾個按鈕： ​

5.4 看變量值 ​

5.5 其他打斷點的方式 ​

六、Device Toolbar 設備模擬（手機預覽） ​

6.1 打開設備模擬 ​

6.2 響應式開發必用 ​

七、其他實用面板 ​

7.1 Application 應用面板 ​

7.2 Performance 性能面板 ​

7.3 Lighthouse 網頁質量評分 ​

八、常見調試場景 ​

8.1 場景一：樣式不生效？ ​

8.2 場景二：接口報錯？ ​

8.3 場景三：控制檯紅了一片？ ​

8.4 場景四：按鈕點了沒反應？ ​

8.5 場景五：圖片加載不出來？ ​

九、實用快捷鍵速查 ​

十、總結 ​

Chrome DevTools 前端調試完全指南 2026 | 零基礎小白調試入門

一、DevTools 是什麼？

1.1 通俗理解

1.2 怎麼打開 DevTools？

1.3 DevTools 有哪些面板？

二、Console 控制檯面板

2.1 控制檯能幹嘛？

2.2 console 打印

2.3 打印對象和數組

2.4 控制檯當計算器

2.5 清除控制檯

2.6 控制檯快捷鍵

三、Elements 元素面板

3.1 元素面板能幹嘛？

3.2 選擇頁面上的元素

3.3 實時修改 CSS

3.4 為什麼 CSS 不生效？（劃重點！）

3.5 Computed 計算後樣式

3.6 Box Model 盒模型

3.7 雙擊改 HTML

四、Network 網絡面板

4.1 網絡面板能幹嘛？

4.2 面板裡每個列是什麼？

4.3 篩選接口

4.4 看接口返回了什麼數據

4.5 看請求時你傳給後端了什麼

4.6 模擬慢速網絡（重要！）

4.7 禁用緩存

五、Sources 源代碼面板 + 斷點調試

5.1 為什麼用斷點？

5.2 怎麼加斷點？

5.3 斷點暫停後，上面有幾個按鈕：

5.4 看變量值

5.5 其他打斷點的方式

六、Device Toolbar 設備模擬（手機預覽）

6.1 打開設備模擬

6.2 響應式開發必用

七、其他實用面板

7.1 Application 應用面板

7.2 Performance 性能面板

7.3 Lighthouse 網頁質量評分

八、常見調試場景

8.1 場景一：樣式不生效？

8.2 場景二：接口報錯？

8.3 場景三：控制檯紅了一片？

8.4 場景四：按鈕點了沒反應？

8.5 場景五：圖片加載不出來？

九、實用快捷鍵速查

十、總結