JavaScript 除錯指南：善用除錯器與 console.log 定位 API 回傳結構問題

常見錯誤現象

• Cannot read property 'xxx' of undefined
• result.data is undefined
• 圖片顯示的紅框錯誤堆疊

核心除錯三步驟

1. 打開瀏覽器開發者工具 (F12) → Sources / Debugger

• 在可疑行（如 console.log(result) 後）點擊行號打**斷點**。
• 重新觸發操作，程式暫停時滑鼠懸停變數查看完整結構。
• 展開 result → data → 確認實際層級與屬性名稱。

2. 不想用斷點？直接 console.log 或 console.dir

fetch('/api/user')
  .then(r => r.json())
  .then(result => {
      console.log('API 原始回傳:', result);          // 物件可展開
      console.dir(result, {depth: null});          // 強制展開所有層級
      console.table(result.data);                  // 陣列以表格顯示
      // 後續邏輯...
  });

3. 網路面板檢查原始回應

• Network → 點擊請求 → Response 標籤，查看 **原始 JSON 字串**，確認後端是否變更欄位名稱、巢狀結構。

常見坑

進階技巧：條件斷點

// 在 Sources 面板斷點右鍵 → Edit breakpoint → Condition
result && result.data && result.data.length === 0

只在符合條件時暫停，避免大量正常請求干擾。

總結

**不要靠猜**，用 console.log/console.dir 或**斷點**直接觀察 result 真實結構，90% 的「屬性存取失敗」源於**前端預期結構與後端實際回傳不符**。養成「先印再寫」習慣，除錯效率提升十倍。