15 troubleshooting and debugging
Upcoming SlideShare
Loading in...5
×
 

15 troubleshooting and debugging

on

  • 370 views

 

Statistics

Views

Total Views
370
Views on SlideShare
370
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

15 troubleshooting and debugging 15 troubleshooting and debugging Presentation Transcript

  • JAVASCRIPTTROUBLESHOOTINGAND DEBUGGING
  • JavaScript doesnt have an industry-wideIDE so its debugging tools are lacking•  We should discuss … •  Common programming mistakes •  Debuggers (such as they are)
  • Unmatched parens, braces, and quotesare a common mistakevar restaurant = Joes Diner;!$(selector).each(function() {! if (thingIsTrue()) {! // Do stuff! }!);! View slide
  • We sometimes use reserved words •  for •  export •  if •  switch •  break •  label •  case •  this •  comment •  document •  import •  location •  void •  short •  long •  self •  default •  int •  native •  eval •  in •  continue •  null •  super View slide
  • Comparisons use double- or triple-equalsignsif (score = 0) {! alert(game over);!}!•  This will always display game overif (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!Its 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
  • Performanceconsole.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 tothe CSS and HTML and see thechanges live(Obviously the changes dont 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