Javascript debug: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
Tags: Mobile edit Mobile web edit
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
<< [[Testing]]: [[Javascript]]
<< [[Testing]]: [[Javascript]]


{{LanguageSwitcher | content = [[Javascript debug | English]], [[Javascript debug in Mandarin | 漢字]] }}
== Steps of troubleshooting ==
* Were the required js fils were included?
* Was the function was conflict with different js libraries? e.g. [https://stackoverflow.com/questions/41961708/uncaught-typeerror-tooltip-is-not-a-function javascript - Uncaught TypeError: $(...).tooltip is not a function - Stack Overflow]
* Check for syntax conflicts between different versions of JavaScript frameworks, e.g., Bootstrap 3 vs Bootstrap 5 syntax differences
* Checking the typo or "ensure that there are no compile-time errors"<ref>[https://stackoverflow.com/help/mcve How to create a Minimal, Complete, and Verifiable example - Help Center - Stack Overflow]</ref> by using [https://www.jslint.com/ JSLint] or other [[Javascript debug#tools | tools]].
* Verify the format of JSON file if the file was used by javascript by using [https://jsonlint.com/ JSONLint - The JSON Validator] tools.


== Steps to troubleshooting ==
* Checking the typo or "ensure that there are no compile-time errors"<ref>[https://stackoverflow.com/help/mcve How to create a Minimal, Complete, and Verifiable example - Help Center - Stack Overflow]</ref> by using [https://www.jslint.com/ JSLint] [[Javascript debug#tools | tools]].
* Disable the browser extension e.g. switch to '''incognito window''' on {{Chrome}}
* Disable the browser extension e.g. switch to '''incognito window''' on {{Chrome}}
* Clear or disable the browser cache
 
* Quit the browser helper software e.g. video downloader
 
* Clear or disable the browser cache<ref>[https://www.java.com/zh_TW/download/help/webcache.xml 我要如何清除網頁瀏覽器快取？]</ref>
 
* Reload the webpage again
* Reload the webpage again
* Switch to different network environment
* Switch to different network environment


== methods / functions ==
== Methods/Functions to Help with Debugging ==


Print message
Print message
* alert() Method: [http://www.w3schools.com/jsref/met_win_alert.asp Window alert() Method] equivalent: window.alert("some message...");
* alert() Method: [https://www.w3schools.com/jsref/met_win_alert.asp Window alert() Method] equivalent: 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]
* [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()
* console.log()
** {{Fx}}: [http://getfirebug.com/logging Firebug and Logging : Firebug], [http://ithelp.ithome.com.tw/question/10000465 利用Firebug的console功能作JavaScript偵錯 - iT邦幫忙::IT知識分享社群] for {{Fx}} {{exclaim}} not work for the [https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench Firebug Lite for Google Chrome](tested version: 1.4.0.11967 )
** {{Fx}}: [http://getfirebug.com/logging Firebug and Logging : Firebug], [http://ithelp.ithome.com.tw/question/10000465 利用Firebug的console功能作JavaScript偵錯 - iT邦幫忙::IT知識分享社群] for {{Fx}} {{exclaim}} not work for the [https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench Firebug Lite for Google Chrome](tested version: 1.4.0.11967 )
** {{Chrome}}: [https://developers.google.com/chrome-developer-tools/docs/console Using the Console - Chrome Developer Tools — Google Developers] Enter the javascript scripts in the console ( after the {{kbd | key = <nowiki>></nowiki>}} symbol) directly.
** {{Chrome}}: [https://developers.google.com/chrome-developer-tools/docs/console Using the Console - Chrome Developer Tools — Google Developers] Enter the javascript scripts in the console ( after the {{kbd | key = <nowiki>></nowiki>}} symbol) directly.
** {{IE}} v.9: [http://msdn.microsoft.com/en-US/library/ie/gg589530(v=vs.85).aspx Using the F12 Tools Console to View Errors and Status (Windows)] / [http://msdn.microsoft.com/zh-tw/library/ie/gg589530(v=vs.85).aspx 使用 F12 工具主控台檢視錯誤和狀態 (Windows)] {{exclaim}} not {{IE}} v.8
* [http://blog.longwin.com.tw/2007/07/javascript_var_dump_2007/ Javascript var_dump function | Tsung's Blog]
* [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()][https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify] "Convert a JavaScript object into a string" {{access | date = 2017-09-11}}
* [https://www.w3schools.com/js/js_json_stringify.asp JSON.stringify()][https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify] "Convert a JavaScript object into a string" {{access | date = 2017-09-11}}
Line 35: Line 49:


== tools ==
== tools ==
* [http://www.javascriptlint.com/online_lint.php The Online Lint]
* [http://www.jslint.com/ JSLint,The JavaScript Code Quality Tool]
* [http://www.jslint.com/ JSLint,The JavaScript Code Quality Tool]
** desktop editor: [http://www.sublimetext.com/ Sublime Text] + package: JSLint<ref>[http://opensourcehacker.com/2012/04/12/jslint-integration-for-sublime-text-2/ JSLint integration for Sublime Text 2]</ref>
** desktop editor: [http://www.sublimetext.com/ Sublime Text] + package: JSLint<ref>[http://opensourcehacker.com/2012/04/12/jslint-integration-for-sublime-text-2/ JSLint integration for Sublime Text 2]</ref>
Line 41: Line 54:




== references ==
== Further reading ==
* [https://errerrors.blogspot.com/2021/04/how-to-debug-javascript.html 怎樣對 JavaScript 進行偵錯]
 
== References ==
<references/>
<references/>


{{Template:Troubleshooting}}
{{Template:Troubleshooting}}


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

Latest revision as of 05:50, 9 December 2025

<< Testing: Javascript

🌐 Switch language: English, 漢字


Steps of troubleshooting[edit]

  • Were the required js fils were included?
  • Check for syntax conflicts between different versions of JavaScript frameworks, e.g., Bootstrap 3 vs Bootstrap 5 syntax differences
  • Checking the typo or "ensure that there are no compile-time errors"[1] by using JSLint or other tools.
  • Disable the browser extension e.g. switch to incognito window on Chrome Browser chrome.png
  • Quit the browser helper software e.g. video downloader
  • Clear or disable the browser cache[2]
  • Reload the webpage again
  • Switch to different network environment

Methods/Functions to Help with Debugging[edit]

Print message

DOM

Data type

Browser tool

Browser cache issue

tools[edit]


Further reading[edit]

References[edit]

  1. ↑ How to create a Minimal, Complete, and Verifiable example - Help Center - Stack Overflow
  2. ↑ 我要如何清除網頁瀏覽器快取？
  3. ↑ JSLint integration for Sublime Text 2


Troubleshooting of ...

Template

Retrieved from "https://wiki.planetoid.info/index.php?title=Javascript_debug&oldid=26108"