title: Console.log(); How to & Debugging javascript
body: <p>Ok so I hope this is a question that isn't to basic for you guys.</p>
  
  <p>I know enough jQuery to get myself into  trouble, meaning I can grab elements and do stuff with it,  write my own little functions for interactivity and such. But then something doesn't go as expected,  before I post questions to stackoverflow and get answers that make me slap myself in the forehead I would like to debug it myself and am sick of inserting <code>alert();</code> into my code.  In reading up on the subject there is mention of <code>console.log();</code>, <code>console.info();</code> and the such but I can not find any resource that explains how to use these in real world scenarios for debugging.</p>
  
  <p>Do any of you know of a good resource or tutorial (not afraid to read a book) that can explain how to use these functions for the <strong>layman</strong>.  It seems that the tutorials and such I am finding are either way to advanced or just skim the surface and don't show you how to use them. I understand I can insert <code>console.log();</code> and it will spit out information in the console for <code>firebug</code> or <code>element inspector</code>. But what if my hand baked function is doing something unexpected somewhere up the line, how do I find the problem as the browser parses the javascript.</p>
  
  <p>Any help would be greatly appreciated as I feel learning this will help me understand what is going on in my code, so I can stop staring at the screen going <strong>“Why isn't this working, it worked in the <code>jsfiddle</code>!”</strong></p>