Javascript debug

<< Testing: Javascript

🌐 Switch language: English, 漢字

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

• Checking the typo or "ensure that there are no compile-time errors" 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

• Reload the webpage again

• Switch to different network environment

Methods/Functions to Help with Debugging

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.
• 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

• javascript - Managing browser cache - Stack Overflow
• The Will Will Web | 簡易克服 CSS 被瀏覽器快取(Cache)的問題

tools

• JSLint,The JavaScript Code Quality Tool
  • desktop editor: Sublime Text + package: JSLint
• JS Bin - Collaborative JavaScript Debugging allow to download

Further reading

• 怎樣對 JavaScript 進行偵錯

References

Troubleshooting of ...

• Troubleshooting of Excel errors

• PHP, cUrl, Python, selenium, HTTP status code errors

• Database: SQL syntax debug, MySQL errors, MySQLTuner errors or PostgreSQL errors

• Troubleshooting of regular expression

• 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

• Bug report template