14,953
edits
Javascript debug: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
|||
| Line 1: | Line 1: | ||
<< [[Testing]]: [[Javascript]] | << [[Testing]]: [[Javascript]] | ||
{{LanguageSwitcher | content = [[Javascript debug | English]], [[Javascript debug in Mandarin | 漢字]] }} | |||
== Steps of troubleshooting == | == Steps of troubleshooting == | ||
| Line 7: | Line 8: | ||
* 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] | * 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] | ||
* 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]]. | * 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. | * Verify the format of JSON file if the file was used by javascript by using [https://jsonlint.com/ JSONLint - The JSON Validator] tools. | ||
| Line 21: | Line 22: | ||
* Switch to different network environment | * Switch to different network environment | ||
== Methods / | == Methods/Functions to Help with Debugging == | ||
Print message | Print message | ||
* alert() Method: [ | * 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. | ||
* [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 47: | Line 47: | ||
== tools == | == tools == | ||
* [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 61: | Line 60: | ||
{{Template:Troubleshooting}} | {{Template:Troubleshooting}} | ||
[[Category:Programming]] | [[Category: Programming]] | ||
[[Category:Web_Dev]] | [[Category: Web_Dev]] | ||
[[Category:Javascript]] | [[Category: Javascript]] | ||