Vibe Coder

前端除錯與 DevTools 進階：看懂 Console 紅字

2026/8/29酒Ann1,463 字約 5 分鐘

前端錯誤來自三個來源：JavaScript 錯誤看 Console 面板，網路請求問題看 Network 面板，樣式問題看 Elements 面板。分清楚錯誤的分類，再搭配把完整錯誤訊息貼給 AI，大部分前端問題能在五分鐘內定位到原因。
前端除錯與 DevTools 進階：看懂 Console 紅字

前端除錯與 DevTools 進階：看懂 Console 紅字

Console 紅字不是翻牌猜謎，TypeError、ReferenceError、CORS、404，每一種錯誤都有不同的排查方向，知道分類才能快速定位問題。

這篇整理前端錯誤的三個來源、常見錯誤訊息怎麼解讀，以及進階的 Breakpoint 除錯法，最後帶你複習整個 Stage 2 學到的技能樹。

你將學到什麼

錯誤的三個來源

JavaScript、網路請求、樣式，各自去哪個面板看。

Console 錯誤解讀

TypeError、ReferenceError、CORS，看到就知道方向。

Network 面板排查

API 沒資料，狀態碼和回應內容第一個看。

Breakpoint 除錯

程式在特定行暫停，逐步檢查變數狀態。

前端錯誤的三個來源

來源去哪裡看常見症狀
JavaScript 錯誤Console 面板的紅色訊息TypeError、ReferenceError、畫面空白或部分不顯示
網路請求問題Network 面板的紅色請求API 沒資料、404、CORS 錯誤、401
樣式問題Elements 面板的 Styles元素不在對的位置、顏色錯、間距不對
前端畫面出問題JavaScript 錯誤看 Console 面板資料沒回來看 Network 面板樣式跑掉看 Elements 面板
先分清楚錯誤來源，再決定去哪個面板查。

Console 錯誤訊息解讀

錯誤訊息意思排查方向
TypeError：對 null 取屬性某個變數是 null找哪個變數可能是 null，加可選鏈或判斷式
ReferenceError：xxx is not defined使用了未宣告的變數確認變數名稱拼寫、是否在正確的作用域
CORS policy 錯誤跨域請求被擋住後端要加 CORS 設定，不是前端的問題
清單元素缺少 key 的警告React 清單元素缺少 key prop在 map 迴圈裡的元素加上 key
Module not found：路徑找不到import 的路徑找不到確認檔案路徑和名稱是否正確

Network 面板：API 不通就來這裡

  1. 打開 Network 面板，重新整理或觸發 API 呼叫，所有網路請求都會出現在這裡。
  2. 點選你的 API 請求，看狀態碼：兩百是成功，四百是你的請求有問題，四百零一是認證失敗，四百零四是路徑錯，五百是後端出錯。
  3. 看 Response 分頁，確認後端回傳的資料格式和你預期的是否一致。
  4. 看 Headers 分頁，確認請求的網址、方法（GET 或 POST）、Authorization 標頭是否正確。

進階：Breakpoint 除錯

當 console.log 還不夠時，可以用 Breakpoint 讓程式在特定行暫停，逐步檢查變數狀態。

  1. 開發者工具的 Sources 面板，找到你要除錯的 JS 檔案。
  2. 點擊行號左側加 Breakpoint，或在程式碼裡加 debugger; 語句。
  3. 觸發執行到這行，程式自動暫停，右側 Scope 面板顯示所有目前的變數值。
  4. 用控制按鈕（Step Over、Step Into）逐行執行，觀察變數值的變化。
快速除錯 SOP一、Console 有紅字先讀完整的錯誤訊息，找檔案名和行號。二、API 資料不對去 Network 面板看請求和回應。三、畫面不對但沒錯誤去 Elements 面板看 DOM 和 Styles。四、以上都看了還不知道，把錯誤訊息和相關程式碼貼給 AI。

練習：解讀一段真實的 Console 錯誤

TypeError: Cannot read properties of undefined (reading 'temperature')
    at WeatherCard (App.jsx:15:28)
    at renderWithHooks (react-dom.development.js)
試著自己說一次App.jsx 第十五行，WeatherCard 元件試圖讀取某個物件的 temperature 屬性，但那個物件是 undefined，可能是 API 還沒回來，State 還是初始值 null 或 undefined。解法：加條件渲染，或用可選鏈 weather?.temperature。

Stage 2 總複習：看懂畫面的完整技能樹

模組核心能力代表工具
HTML讀懂網頁骨架、用開發者工具找元素Elements 面板
CSS讀懂樣式、盒模型、Flexbox、TailwindStyles 面板
JavaScriptDOM 操作、事件、fetch、async / awaitConsole 面板
React元件、Props、State、useEffectReact DevTools
元件庫shadcn/ui 安裝使用、讀文件、客製化主題shadcn/ui 文件
除錯Console 錯誤解讀、Network 排查、BreakpointDevTools 全部面板

走完這六個模組，你能做到的是：看到任何網頁能用開發者工具拆解結構；看到 AI 生的 React 加 Tailwind 加 shadcn 程式碼能讀懂；前端出問題知道從 Console 和 Network 開始排查；能用精確的術語告訴 AI 要改什麼，得到準確的前端修改建議。

延伸學習

HE201｜Harness Engineering System Design（6 小時）

HE201｜Harness Engineering System Design（6 小時）

六小時的實作課：從 Blueprint 走到可以跑的規格，再用 No-code、n8n 低程式碼與程式碼三條路各做一次同一個 harness，最後處理可靠度——重試、錯誤處理、人工覆核。7 章 54 課，含常見坑與排錯、Capstone 實作，附學員講義 PDF。

NT$ 5,999

把這篇文章分享給需要的人FacebookLINEThreadsX

常見問答

看到 Cannot read properties of null 是什麼意思？
這是對 null 或 undefined 取屬性造成的 TypeError，通常代表某個變數還沒準備好，例如 API 資料還沒回來、State 還是初始值。解法是加條件渲染或用可選鏈 obj?.prop。
CORS 錯誤要怎麼處理？
CORS 是瀏覽器的安全機制，阻止網頁向不同網域發送請求。看到這個錯誤要去後端加上允許的來源設定，不是前端能單方面解決的問題。
Console 沒有錯誤，但畫面就是不對，該怎麼查？
先去 Network 面板確認 API 有沒有打出去、狀態碼是什麼、回傳內容對不對；如果 API 沒問題，再去 Elements 面板看 DOM 結構和 Styles 有沒有跑掉。
為什麼要把完整錯誤訊息貼給 AI，而不是自己描述？
完整的錯誤訊息包含檔案名稱、行號、錯誤類型，AI 能直接定位問題；只用「畫面壞掉了」這種自己的話描述，AI 缺乏足夠線索，排查效率差很多。