Download - 15 troubleshooting and debugging
JAVASCRIPT TROUBLESHOOTING AND DEBUGGING
JavaScript doesn't have an industry-wide IDE so its debugging tools are lacking • We should discuss …
• Common programming mistakes • Debuggers (such as they are)
Unmatched parens, braces, and quotes are a common mistake var restaurant = 'Joe's Diner';!$('selector').each(function() {! if (thingIsTrue()) {! // Do stuff! }!);!
We sometimes use reserved words
• for • if • break • case • comment • void • default • in
• export • switch • label • this • document • short • int • continue
• import • long • native • null
• location • self • eval • super
Comparisons use double- or triple-equal signs if (score = 0) {! alert('game over');!}!• This will always display 'game over' if (score == 0) {! alert('game over');!}!
Remember, JavaScript is case-sensitive
Incorrect paths can mess you up • Three types of url paths • absolute paths
• http://www.tic.com/scripts/area.js
• root-relative paths • /scripts/area.js
• document-relative paths • ../area.js
Disappearing variables and function
When variables are referenced out of scope
Firebug rules!
It's a Firefox add-on that needs to be installed
Firebug allows messages to the console console.info("This is an 'info' message.");!console.log("I am a 'console.log.'");!console.warn("Warning!");!console.error("There is an error here.")!
You can break in the debugger • Click to the left of any line • Enable 'Break on all errors' • Use the debugger command
• You can create conditional breakpoints by clicking on that red circle
Performance console.profile()!console.profileEnd()!function profiledFunction(){! console.profile("Test Auto Profiler");! timeThisTask();! profileMe();! console.profileEnd("Test Auto Profiler");!}!
Tracing • console.trace() will give you a full-up stack trace with
values of all the parameters
You can pseudo-unit test • console.assert()
You can actually make changes to the CSS and HTML and see the changes live
(Obviously the changes don't stick)
Other plug-ins to Firefox • YSlow for performance improvement • Firecookie to add/edit cookies • Pixelperfect • FireQuery for jQuery
Conclusion • There are several common mistakes that everyone makes
• Omitting parens, braces, or quotes • Using reserved words • Using single equals in conditionals • Using the wrong case • Missing the scope
• Debugging is available for JavaScript but it must be done in the browser
• Firebug is available for Firefox
Lab • Using the Firebug console tutorial – pp. 481 – 484 • Debugging tutorial – pp. 489 - 495