Javascript debug in Mandarin

Javascript 程式碼偵錯

🌐 Switch language: English, 漢字

疑難排解步驟

• 是否已包含所需的 JavaScript 檔案？

• 函式是否與不同的 JavaScript 函式庫發生衝突？例如：JavaScript - Uncaught TypeError: $(...).tooltip is not a function - Stack Overflow

• 檢查 JavaScript 框架在不同版本之間的語法相容性問題，例如 Bootstrap 3 和 Bootstrap 5 使用的語法並不相同

• 使用 JSLint 或本文下方其他偵錯工具，檢查拼寫等錯誤、或編譯類型錯誤。

• 如果 JavaScript 使用了 JSON 檔案，請使用 JSONLint - The JSON Validator 工具驗證 JSON 檔案的格式。

• 停用瀏覽器擴充功能，例如：切換至 Chrome 的無痕視窗模式。

• 關閉瀏覽器輔助軟體，例如：影片下載器。

• 清除或停用瀏覽器快取。

• 重新載入網頁。

• 切換不同的網路環境。

協助偵錯的方法/函數

顯示訊息

• alert() 方法：alert() Method，等同於：window.alert("some message...");
• Is there an equivalent for var_dump (PHP) in Javascript? - Stack Overflow
• console.log()
• Firefox：Firebug and Logging : Firebug
• Chrome：Chrome DevTools  |  Chrome for Developers 可以直接在主控台（>符號後）輸入 JavaScript 程式碼
• vardump2007/ Javascript vardump function | Tsung's Blog
• JSON.stringify()

DOM

• 如果是進行 DOM 操作，可以將選定的 DOM 元素標上顏色，確認有選到。例如：使用 .addClass() | jQuery API Documentation

資料型別

• isNaN() Function, isFinite() Function, typeof variable

瀏覽器工具

• javascript - How do I view events fired on an element in Chrome DevTools? - Stack Overflow 在 Chrome 上

瀏覽器快取問題

• javascript - Managing browser cache - Stack Overflow
• The Will Will Web | 簡易克服 CSS 被瀏覽器快取(Cache)的問題

工具

• JSLint: The JavaScript Code Quality and Coverage Tool
• 桌面編輯器：Sublime Text + 套件：JSLint
• JS Bin - Collaborative JavaScript Debugging 允許下載

延伸閱讀

• 怎樣對 JavaScript 進行偵錯

參考資料

Troubleshooting of ...

• Troubleshooting of Excel errors

• PHP, cUrl, Python, selenium, HTTP status code errors

• Database: SQL syntax debug, MySQL errors, MySQLTuner errors or PostgreSQL errors

• Troubleshooting of regular expression

• HTML/Javascript: Troubleshooting of javascript, XPath

• Software: Mediawiki, Docker, FTP problems, online conference software

• Test connectivity for the web service, Web Ping, Network problem, Web user behavior, Web scrape troubleshooting

Template

• Bug report template