使用瀏覽器開發者工具進行調試 F12 console

大多數瀏覽器 Chrome、Firefox、Edge 都可以通過按 F12 鍵或右鍵點擊頁面選擇「檢查」打開開發者工具。

console.log()
把指定的訊息輸出到控制台

console.table()
用表格形式顯示陣列或對象的信息

console.dir()
用樹狀結構輸出詳細信息

console.time() & console.timeEnd()
使用 console.time('label') 開始計時，console.timeEnd('label') 停止計時，並輸出執行時間。

console.trace()
顯示函數的調用路徑，個人覺得在 call API 確認非同步走向特好用

console.assert()
用於斷言條件為真。如果條件為假，它將拋出錯誤並在控制台中顯示錯誤訊息。

🔔 補充說明：
因為自己是後端小白，學習過程會先寫測試碼，確定自己要什麼才進入 api 開發，所以 console.assert() 跟後端 Laravel 的斷言目的是相似的，都是為了幫助開發者檢查和驗證代碼的正確性，後端的相關內容可以參考 2024 年的後端小白自學 Laravel - 第 23 天：代碼質量與測試

console.clear()
方法用於清除控制台，刪除所有先前記錄的訊息。

常用的調試技巧和工具

1. 設置斷點：
   在「Sources」面板中，可以點擊行號來設置斷點，當代碼執行到這行時，執行會暫停，允許開發檢查變數和執行上下文。

2. 步進調試：
   使用「Step Over」(F10)、「Step Into」(F11) 和「Step Out」(Shift + F11) 功能來逐步執行代碼，便於詳細觀察程式流程。

3. Watch 表達式：
   在「Sources」面板的「Watch」區域中添加變數或表達式，以便在代碼執行時動態檢查它們的值。

4. 使用 debugger 語句：
   在代碼中插入 debugger; 語句，當代碼執行到此行時，開發者工具會自動中斷執行，讓你進行調試。

   function calculate() {
     let result = 42;
     debugger; // 執行到此行會中斷
     return result;
   }
   

5. 網絡請求檢查：
   在「Network」面板中查看和分析網絡請求，檢查 API 請求、回應和性能問題。

6. 性能分析：
   使用「Performance」面板錄製並分析代碼執行時的性能，找出可能的瓶頸。

7. 記憶體檢查：
   「Memory」面板可以用來檢查內存使用情況，幫助識別記憶體洩漏。