怎樣對 JavaScript 進行偵錯

怎樣對 JavaScript 程式碼進行偵錯， w3schools 除了使用 console.log 函數印出變數、設定中斷點、啟用偵錯工具等方式。額外提供以下偵錯方式：繞過瀏覽器快取、臨時停用瀏覽器擴充套件、JavaScript 不同套件衝突、檢查 JSON 檔案格式正確等。

Photo by Ashim D’Silva from StockSnap

偵錯方式

1. 是否有拼寫錯誤、避免編譯錯誤
2. 繞過瀏覽器快取，重新整理網頁，詳 使用說明:繞過瀏覽器快取 - 維基百科，自由的百科全書
3. 臨時停用瀏覽器擴充套件：先關閉瀏覽器擴充套件，排除套件因素。可以使用 Google 瀏覽器的私密瀏覽、Edge 瀏覽器的 inPrivate 視窗、Safari 的私密瀏覽、Firefox 隱私模式。擴充套件透過 JavaScript 改變網頁行為，之前遇過解決 Gmail 帳號的寄件設定，突然沒有出現帳號密碼輸入框的問題，也是因為擴充套件造成網頁錯誤。
4. 關閉瀏覽器相關外掛：例如 video downloader
5. 排除網路環境因素：切換不同網路環境再瀏覽網頁
6. 檢查是否 JavaScript 不同套件衝突：如果引入多個 JavaScript library，需要確認使用的函數是否發生衝突。
7. 檢查 JSON 檔案格式正確：如果引入 Json 資料，需要確認 Json 是否格式正確，可用 JSONLint 確認格式是否正確。

偵錯工具

• JSLint: The JavaScript Code Quality Tool
• JSONLint - The JSON Validator

參考資料

• JavaScript Debugging
• 對 JavaScript 或 TypeScript 應用程式進行偵錯 - Visual Studio | Microsoft Docs
• javascript - Uncaught TypeError: $(...).tooltip is not a function - Stack Overflow
• How to create a Minimal, Reproducible Example - Help Center - Stack Overflow
• 使用說明:繞過瀏覽器快取 - 維基百科，自由的百科全書
• JSLint - Packages - Package Control
• javascript - How do I view events fired on an element in Chrome DevTools? - Stack Overflow
• 你所不知道的各種前端 Debug 技巧 :: 第 12 屆 iT 邦幫忙鐵人賽