今天來聊聊前端怎麼偵錯吧！後端工程師常常有超強的 IDE 幫忙，但前端就得靠一些小技巧了。這裡分享幾個實用的方法，給大家參考～
在 Chrome 瀏覽器的開發者工具中即可直接看到 Source Map，方便將編譯後的程式碼對應回原始檔案，提升偵錯效率。
圖26-1：透過開發者工具檢視 Layout 結構方式。
圖26-2：Source Map 用途。
若畫面資料與預期不一致，建議使用開發者工具檢查 store 狀態，以確認資料正確性。
圖26-3：可修改元件綁定的 state 內容，即可即時觀察並驗證畫面效果。
圖26-4：當 sidebarDrawer 設為 false 時，系統會即時隱藏左側的功能導覽列。
Vue.ts 或相關檔案。圖26-5：前端中斷點偵錯方式。
圖26-6：執行到該行程式碼時可以檢視變數的實際數值。
由於前後端分離的架構，常常需要確認後端回應的資料內容與效能問題。這時可以透過 F12 開發者工具的 Network 頁籤，觀察前端發送 API 請求後的所有記錄。
圖26-7：檢視 vue 對後端發出的資料請求記錄，包含：回應時間、狀態、Headers 等資訊。
圖26-8：點選 Response 頁籤可以檢視回應，確認資料結構與內容。
針對後端回應資料
Network 面板常用觀察重點表格 :
| 項目 | 說明 | 偵錯用途 |
|---|---|---|
| Status | HTTP 狀態碼（200、404、500 等） | 確認請求是否成功或發生錯誤 |
| Method | 請求方法（GET、POST、PUT、DELETE） | 檢查是否使用正確的 HTTP 方法 |
| URL | 請求的 API 路徑 | 確認是否呼叫到正確的端點 |
| Time | 請求花費的時間 | 分析效能問題、判斷是否有延遲 |
| Size | 回應資料大小 | 偵測是否有過大或不合理的回應 |
| Payload | 請求送出的參數與內容 | 驗證前端傳遞給後端的資料是否正確 |
| Response | 後端回應的資料內容（JSON、檔案、錯誤訊息） | 驗證後端回傳是否符合預期格式 |
| Headers | 請求與回應的標頭資訊（Content-Type、Authorization 等） | 檢查認證、資料格式與 API 規範 |
在這次的開發經驗中，前端偵錯常見的問題大致可分為四類：
資料問題（資料未更新、API 錯誤、store 不一致）。
畫面問題（條件判斷錯誤、樣式錯亂）。
互動問題（事件無反應、匯出失敗）。
以及效能問題（卡頓或延遲）。
整體來說，偵錯原則大致脫離不了 先查資料來源 → 再檢查綁定流程 → 最後觀測畫面與效能。
以下將常見問題類型與對應的偵錯方式整理成表格，供大家參考：
| 狀況 | 偵錯方法 |
|---|---|
| 畫面資料未更新 | 檢查 watch、computed 是否正確綁定；確認 props/store 有無變動 |
| API 呼叫失敗（回傳 4xx / 5xx） | 使用 Network 面板 檢查請求 URL、參數與回應內容 |
| 資料正確但畫面不顯示 | 確認 v-for / v-if 條件是否設置正確，或檢查 key 綁定 |
| Store 資料與畫面不一致 | 使用 Vue Devtools 檢查 store state，確保資料有正確更新 |
| 頁面出現樣式錯亂 | 檢查 DevTools Elements 面板，確認 class 與 style 是否正確套用 |
| 動作觸發但無反應 | 在程式中加入 console.log() 或使用 Breakpoints 偵錯事件綁定流程 |
| 匯出/下載檔案失敗 | 檢查回傳檔案格式（Blob / JSON），以及 file-saver 是否正確觸發下載事件 |
| 效能表現異常（卡頓、延遲） | 使用 Performance Panel 或 Memory 工具檢查渲染時間與資源佔用 |
iThome鐵人賽
看影片追技術