15 troubleshooting and debugging
DESCRIPTION
TRANSCRIPT
![Page 1: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/1.jpg)
JAVASCRIPT TROUBLESHOOTING AND DEBUGGING
![Page 2: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/2.jpg)
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)
![Page 3: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/3.jpg)
Unmatched parens, braces, and quotes are a common mistake var restaurant = 'Joe's Diner';!$('selector').each(function() {! if (thingIsTrue()) {! // Do stuff! }!);!
![Page 4: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/4.jpg)
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
![Page 5: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/5.jpg)
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');!}!
![Page 6: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/6.jpg)
Remember, JavaScript is case-sensitive
![Page 7: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/7.jpg)
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
![Page 8: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/8.jpg)
Disappearing variables and function
When variables are referenced out of scope
![Page 9: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/9.jpg)
Firebug rules!
It's a Firefox add-on that needs to be installed
![Page 10: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/10.jpg)
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.")!
![Page 11: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/11.jpg)
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
![Page 12: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/12.jpg)
Performance console.profile()!console.profileEnd()!function profiledFunction(){! console.profile("Test Auto Profiler");! timeThisTask();! profileMe();! console.profileEnd("Test Auto Profiler");!}!
![Page 13: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/13.jpg)
Tracing • console.trace() will give you a full-up stack trace with
values of all the parameters
![Page 14: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/14.jpg)
You can pseudo-unit test • console.assert()
![Page 15: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/15.jpg)
You can actually make changes to the CSS and HTML and see the changes live
(Obviously the changes don't stick)
![Page 16: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/16.jpg)
Other plug-ins to Firefox • YSlow for performance improvement • Firecookie to add/edit cookies • Pixelperfect • FireQuery for jQuery
![Page 17: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/17.jpg)
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
![Page 18: 15 troubleshooting and debugging](https://reader030.vdocuments.us/reader030/viewer/2022020110/5474a961b4af9f9d0a8b5781/html5/thumbnails/18.jpg)
Lab • Using the Firebug console tutorial – pp. 481 – 484 • Debugging tutorial – pp. 489 - 495