Vibe Coder
網站 error 檢修實戰：先開 DevTools，再問 AI
網站出問題先按 F12 開啟瀏覽器 DevTools，Console 看 JavaScript 錯誤，Network 看 API 有沒有打出去、回傳了什麼。部署到雲端之後，還要學會看伺服器 Log，才能在沒有 DevTools 的環境下排查問題。
網站 error 檢修實戰：先開 DevTools，再問 AI
網站壞了，很多人第一反應是把整個網頁截圖丟給 AI，然後問哪裡有問題。真正有效率的做法是先開 DevTools，把精確的錯誤訊息複製出來，這一步能讓 AI 給你的答案準確十倍。
你將學到什麼
DevTools 四個常用分頁
Console、Network、Elements、Application 各自看什麼。
Console 實戰
紅字、黃字、常見錯誤訊息各代表什麼，該怎麼處理。
Network 實戰
確認 API 有沒有打出去、狀態碼、回傳內容一次看懂。
伺服器 Log 怎麼看
部署到雲端之後，四個等級的 Log 告訴你系統發生了什麼。
為什麼網站 error 要單獨學
Python 的錯誤在終端機，JavaScript 的錯誤在瀏覽器 Console，API 的錯誤在 Network，找對地方才能找到原因。DevTools 是最重要的診斷工具，幾乎所有前端問題都能在這裡找到線索，但很多人完全不知道怎麼用。部署到雲端之後，只能靠 Log 知道伺服器在做什麼，看懂 Log 是維運的基本功。
DevTools 四個常用分頁
按 F12（Windows）或 Cmd 加 Option 加 I（Mac）開啟 Chrome DevTools。
| 分頁 | 看什麼 | 最常用在 |
|---|---|---|
| Console | JavaScript 執行結果和錯誤 | JS 邏輯錯誤、API 呼叫失敗的錯誤訊息 |
| Network | 所有網路請求，包含 API 呼叫 | 確認 API 有沒有打出去、回傳什麼、狀態碼 |
| Elements | 頁面 HTML 結構和 CSS 樣式 | 排版跑掉，找是哪個 CSS 造成的問題 |
| Application | localStorage、cookie、session | 登入狀態消失、暫存資料的問題 |
Console Tab 實戰
| 看到什麼 | 代表什麼 | 怎麼處理 |
|---|---|---|
| 紅色文字 | JavaScript 執行出錯，程式停了 | 複製整段紅字給 AI，說明觸發動作 |
| 黃色文字 | 警告，程式還在跑但有潛在問題 | 通常可以先忽略，除非造成功能異常 |
| 對空值取值的錯誤 | 對 null 取值 | 找出是哪個變數是 null，加上判斷 |
| Failed to fetch | API 請求失敗 | 切到 Network tab 看那個請求的詳情 |
| CORS 錯誤 | 跨網域請求被擋 | 後端要加 CORS 設定，把完整錯誤給 AI |
console.log 是好朋友請 AI 在關鍵位置加上
console.log，就能在 Console 裡看到那個時間點的值，是最快的 JavaScript 除錯方式。Network Tab 實戰
開啟 Network 分頁，清空舊記錄，觸發問題操作，找到自己的 API 請求，篩選 XHR 或 Fetch 類型。點擊請求後看右側的標頭、送出的資料、回傳的內容。
| 情況 | 代表什麼 |
|---|---|
| API 完全沒出現 | 前端沒有呼叫到，問題在 Console 找 |
| 4xx 或 5xx 狀態碼 | 看 Response 內容了解實際的錯誤原因 |
| 狀態碼 200 但畫面沒更新 | 前端的資料解析邏輯有問題 |
伺服器 Log 怎麼看
| 平台 | 在哪裡看 Log |
|---|---|
| Vercel | 專案主控台裡 Functions 底下的 Logs |
| Railway | 服務主控台裡的 Logs，可以看即時串流 |
| Render | 服務主控台裡的 Logs |
| 本機開發 | 終端機直接看，搜尋 ERROR 關鍵字 |
Log 四個等級，優先看 ERRORINFO 是一般資訊，不用處理。WARNING 是警告，有空再處理。ERROR 是某個功能出問題，要優先處理，複製錯誤訊息給 AI。CRITICAL 是服務可能掛了，要立刻處理。
完整排錯決策樹
先確認問題層：白屏或按鈕沒反應先看 Console，資料沒顯示先看 Network。Console 有紅字就複製整段給 AI，沒有紅字再看 Network 有沒有出現 API 請求。狀態碼是 200 但沒更新，問題在前端解析邏輯；4xx 通常是參數問題；5xx 要去伺服器 Log 找原因。
延伸學習
常見問答
網站壞了，第一步應該做什麼？
先按 F12 開啟瀏覽器 DevTools，不要急著把整個畫面截圖給 AI。Console 分頁看有沒有 JavaScript 錯誤，是排查前端問題最快的第一步。
Console 和 Network 分別看什麼？
Console 顯示 JavaScript 執行結果和錯誤訊息，適合找前端邏輯問題；Network 記錄所有網路請求，適合確認 API 有沒有打出去、狀態碼和回傳內容。
部署到雲端之後要怎麼除錯？
雲端環境沒有本機的 DevTools，要靠伺服器 Log。多數平台的主控台都有 Logs 頁面，優先搜尋 ERROR 等級的訊息，複製完整內容給 AI 診斷。
API 完全沒出現在 Network tab 代表什麼？
代表前端根本沒有呼叫到這個 API，問題出在前端邏輯，例如按鈕的事件沒有綁定成功，這時候該回頭看 Console 有沒有錯誤訊息。