Javascript debug: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
Tags: Mobile edit Mobile web edit |
||
| Line 7: | Line 7: | ||
* 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] | ||
* 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]]. | * 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]]. | ||
Latest revision as of 05:50, 9 December 2025
<< Testing: Javascript
Steps of troubleshooting[edit]
- 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
- 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.
- Verify the format of JSON file if the file was used by javascript by using JSONLint - The JSON Validator tools.
- Disable the browser extension e.g. switch to incognito window on Chrome
- 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
- 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.
- Firefox
- 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[edit]
- JSLint,The JavaScript Code Quality Tool
- desktop editor: Sublime Text + package: JSLint[3]
- JS Bin - Collaborative JavaScript Debugging
allow to download
Further reading[edit]
References[edit]
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