Javascript debug: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
(30 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<< [[Testing]] | << [[Testing]]: [[Javascript]] | ||
== 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] | |||
* 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]]. | |||
* Verify the format of JSON file if the file was used by javascript by using [https://jsonlint.com/ JSONLint - The JSON Validator] tools. | |||
* Disable the browser extension e.g. switch to '''incognito window''' on {{Chrome}} | |||
* Clear or disable the browser cache<ref>[https://www.java.com/zh_TW/download/help/webcache.xml 我要如何清除網頁瀏覽器快取?]</ref> | |||
* Reload the webpage again | |||
* Switch to different network environment | |||
== methods / functions == | |||
Print message | |||
* alert() Method: [http://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] | |||
* 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 ) | |||
** {{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] | |||
* [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}} | |||
DOM | |||
* 如果是進行 DOM 操作,可以將選定的 DOM 元素標上顏色,確認有選到。 ex: using [http://api.jquery.com/addClass/ .addClass() | jQuery API Documentation] | |||
Data type | |||
* [http://www.w3schools.com/jsref/jsref_isnan.asp isNaN() Function], [http://www.w3schools.com/jsref/jsref_isfinite.asp isFinite() Function], typeof variable | |||
Browser tool | |||
* [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] on {{Chrome}} | |||
Browser cache issue | |||
* [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)的問題] | |||
== tools == | |||
* [http://www.javascriptlint.com/online_lint.php The Online Lint] | * [http://www.javascriptlint.com/online_lint.php The Online Lint] | ||
* [http:// | * [http://www.jslint.com/ JSLint,The JavaScript Code Quality Tool] | ||
* [http:// | ** 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> | ||
* [http://jsbin.com/ JS Bin - Collaborative JavaScript Debugging] {{Gd}} allow to download | |||
== references == | |||
<references/> | |||
{{Template:Troubleshooting}} | |||
[[Category:Programming]] | [[Category:Programming]] | ||
[[Category:Web_Dev]] | [[Category:Web_Dev]] | ||
[[Category:Javascript]] |
Revision as of 11:09, 12 November 2020
<< Testing: Javascript
Steps of troubleshooting
- Were the required js fils were included?
- Was the function was conflict with different js libraries? e.g. javascript - Uncaught TypeError: $(...).tooltip is not a function - Stack Overflow
- Verify the format of JSON file if the file was used by javascript by using JSONLint - The JSON Validator tools.
- Clear or disable the browser cache[2]
- Reload the webpage again
- Switch to different network environment
methods / functions
Print message
- alert() Method: Window alert() Method equivalent: window.alert("some message...");
- Is there an equivalent for var_dump (PHP) in Javascript? - Stack Overflow
- console.log()
- Firefox : Firebug and Logging : Firebug, 利用Firebug的console功能作JavaScript偵錯 - iT邦幫忙::IT知識分享社群 for Firefox not work for the Firebug Lite for Google Chrome(tested version: 1.4.0.11967 )
- Chrome : Using the Console - Chrome Developer Tools — Google Developers Enter the javascript scripts in the console ( after the > symbol) directly.
- IE v.9: Using the F12 Tools Console to View Errors and Status (Windows) / 使用 F12 工具主控台檢視錯誤和狀態 (Windows) not IE v.8
- Javascript var_dump function | Tsung's Blog
- JSON.stringify()[1] "Convert a JavaScript object into a string" [Last visited: 2017-09-11]
DOM
- 如果是進行 DOM 操作,可以將選定的 DOM 元素標上顏色,確認有選到。 ex: using .addClass() | jQuery API Documentation
Data type
- isNaN() Function, isFinite() Function, typeof variable
Browser tool
- javascript - How do I view events fired on an element in Chrome DevTools? - Stack Overflow on Chrome
Browser cache issue
tools
- The Online Lint
- JSLint,The JavaScript Code Quality Tool
- desktop editor: Sublime Text + package: JSLint[3]
- JS Bin - Collaborative JavaScript Debugging allow to download
references
Troubleshooting of ...
- PHP, cUrl, Python, selenium, HTTP status code errors
- Database: SQL syntax debug, MySQL errors, MySQLTuner errors or PostgreSQL errors
- 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