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