title: Debugging jquery or javascript using firebug
body: <p>I wrote a code in jquery. I was not running initially, then i checked online <a href="http://www.javascriptlint.com/online_lint.php" rel="nofollow">jslint</a> for syntax errors. I caught some errors. Now still the code was not working as expected. So i went for firebug. I haven't done a lot of debugging. I am new to it. Here is my code </p>
  
  <pre><code>var j = 2;
  var friends = [];
  var distance =[];
  
  
  $(document).ready(function () {
  
        $('#button').click(function () {
          if (j &lt; 11) {
              $('#friends').append('Friend' + j + ':&lt;input type="text" id="friend' + j + '"/&gt;&lt;br/&gt;&lt;br/&gt;');
              j++;
          }
          else {
              alert("Limit reached");
          }
      });
  
  
  
     $('button').click(function(){
    console.log("button clicked");
     var a =[];
      for(i=1;i&lt;=j;i++)
       {
          a[i] = $("#friend" + i).val();
        }     
  
  
      var gurl = "http://maps.googleapis.com/maps/api/distancematrix/json?"+
          "origins=" +
          a.join('|').replace(/ /g,'+') +
          "&amp;destinations=" +
          a.join('|').replace(/ /g,'+') +
          "&amp;sensor=false";
  
  
    jQuery.ajax(
            {
               type: "GET",
               url: gurl,
               dataType: 'jsonp'
            }).done(function (response) 
               {
                  var rows = response.rows;
                    alert("hello there");
  
                  for (var i = 0; i &lt; rows.length; i++) 
                   {
  
                    for(var j=0;j&lt;elements.length;j++)
                  {
                      distance[i][j] = rows[i].elements[j].distance;
                   }
  
                   }
            alert(distance[1][3]);
                });
  
          });
    });
  </code></pre>
  
  <p>Now, what it should do is Go to this <a href="http://maps.googleapis.com/maps/api/distancematrix/json?origins=%7Cchandigarh%20sector%2020%7Cchandigarh%20sector%2018%7Cpanchkula%20sector%2021%7C%7C&amp;destinations=%7Cchandigarh%20sector%2020%7Cchandigarh%20sector%2018%7Cpanchkula%20sector%2021%7C%7C&amp;sensor=false" rel="nofollow">link</a> and get the data from json file and store it inside the 2 dimensional array distance[][]. Finally after storing all the data, it should display the result of "distance[1][2]" as an alert.</p>
  
  <p>Now i dont know whats wrong in this code and how to find the logical errors using firebug. What should make my work easy ?</p>
  
  <p>ps: heres the HTML file</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
   &lt;head&gt;
  
      &lt;title&gt;TakeMeHome&lt;/title&gt;
  
      &lt;script   src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery-1.9.0.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"&gt;&lt;/script&gt;
  
  
   &lt;/head&gt;
  
    &lt;body&gt;
      &lt;center&gt;
          &lt;form id="locations"&gt;
          Your Place:&lt;input id="source" type="text"&gt;&lt;br/&gt;
          &lt;br/&gt;
  
          &lt;div id="friends"&gt;
           Friend1:&lt;input id="friend1" type="text"&gt;&lt;br/&gt;
          &lt;br/&gt;
          &lt;/div&gt;
  
          &lt;div id="button"&gt;
              Add!&lt;/div&gt;
          &lt;br/&gt;
          &lt;br/&gt;
  
          &lt;button&gt;GO!&lt;/button&gt;
  
          &lt;br/&gt;&lt;br/&gt;
          &lt;div id="map" style = "width: 500px; height: 500px"&gt;&lt;br/&gt;
  
          &lt;/form&gt;
      &lt;/center&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>