Editing Javascript debug in Mandarin

Javascript 程式碼偵錯

{{LanguageSwitcher | content = [[Javascript debug | English]], [[Javascript debug in Mandarin | 漢字]] }}

== 疑難排解步驟 ==
* 是否已包含所需的 JavaScript 檔案？

* 函式是否與不同的 JavaScript 函式庫發生衝突？例如：[https://stackoverflow.com/questions/41961708/uncaught-typeerror-tooltip-is-not-a-function JavaScript - Uncaught TypeError: $(...).tooltip is not a function - Stack Overflow]

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

* 使用 [https://www.jslint.com/ JSLint] 或本文下方其他偵錯工具，檢查拼寫等錯誤、或編譯類型錯誤。

* 如果 JavaScript 使用了 JSON 檔案，請使用 [https://jsonlint.com/ JSONLint - The JSON Validator] 工具驗證 JSON 檔案的格式。

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

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

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

* 重新載入網頁。

* 切換不同的網路環境。

== 協助偵錯的方法/函數 ==

顯示訊息
* alert() 方法：[https://www.w3schools.com/jsref/met_win_alert.asp alert() Method]，等同於：window.alert("some message...");
* [http://stackoverflow.com/questions/323517/is-there-an-equivalent-for-var-dump-php-in-javascript Is there an equivalent for var_dump (PHP) in Javascript? - Stack Overflow]
* console.log()
* Firefox：[http://getfirebug.com/logging Firebug and Logging : Firebug]
* Chrome：[https://developer.chrome.com/docs/devtools/ Chrome DevTools  |  Chrome for Developers] 可以直接在主控台（>符號後）輸入 JavaScript 程式碼
* [http://blog.longwin.com.tw/2007/07/javascript''var''dump''2007/ Javascript var''dump function | Tsung's Blog]
* [https://www.w3schools.com/js/js_json_stringify.asp JSON.stringify()]

DOM
* 如果是進行 DOM 操作，可以將選定的 DOM 元素標上顏色，確認有選到。例如：使用 [http://api.jquery.com/addClass/ .addClass() | jQuery API Documentation]

資料型別
* [http://www.w3schools.com/jsref/jsref_isnan.asp isNaN() Function], [http://www.w3schools.com/jsref/jsref_isfinite.asp isFinite() Function], typeof variable

瀏覽器工具
* [https://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-devtools javascript - How do I view events fired on an element in Chrome DevTools? - Stack Overflow] 在 Chrome 上

瀏覽器快取問題
* [https://stackoverflow.com/questions/44958022/managing-browser-cache javascript - Managing browser cache - Stack Overflow]
* [https://blog.miniasp.com/post/2008/02/03/Avoid-browser-cache-problem-on-css-or-javascript-file.aspx The Will Will Web | 簡易克服 CSS 被瀏覽器快取(Cache)的問題]

== 工具 ==
* [https://www.jslint.com/ JSLint: The JavaScript Code Quality and Coverage Tool]
* 桌面編輯器：[http://www.sublimetext.com/ Sublime Text] + 套件：JSLint
* [http://jsbin.com/ JS Bin - Collaborative JavaScript Debugging] 允許下載

== 延伸閱讀 ==
* [https://errerrors.blogspot.com/2021/04/how-to-debug-javascript.html 怎樣對 JavaScript 進行偵錯]

== 參考資料 ==
<references/>

{{Template: Troubleshooting}}

[[Category: Programming]]
[[Category: Web_Dev]]
[[Category: Javascript]]