Debugging jquery or javascript using firebug

Question

I wrote a code in jquery. I was not running initially, then i checked online jslint 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

var j = 2;
var friends = [];
var distance =[];


$(document).ready(function () {

      $('#button').click(function () {
        if (j < 11) {
            $('#friends').append('Friend' + j + ':<input type="text" id="friend' + j + '"/><br/><br/>');
            j++;
        }
        else {
            alert("Limit reached");
        }
    });



   $('button').click(function(){
  console.log("button clicked");
   var a =[];
    for(i=1;i<=j;i++)
     {
        a[i] = $("#friend" + i).val();
      }     


    var gurl = "http://maps.googleapis.com/maps/api/distancematrix/json?"+
        "origins=" +
        a.join('|').replace(/ /g,'+') +
        "&destinations=" +
        a.join('|').replace(/ /g,'+') +
        "&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 < rows.length; i++) 
                 {

                  for(var j=0;j<elements.length;j++)
                {
                    distance[i][j] = rows[i].elements[j].distance;
                 }

                 }
          alert(distance[1][3]);
              });

        });
  });

Now, what it should do is Go to this link 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.

Now i dont know whats wrong in this code and how to find the logical errors using firebug. What should make my work easy ?

ps: heres the HTML file

<!doctype html>
<html>

 <head>

    <title>TakeMeHome</title>

    <script   src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>


 </head>

  <body>
    <center>
        <form id="locations">
        Your Place:<input id="source" type="text"><br/>
        <br/>

        <div id="friends">
         Friend1:<input id="friend1" type="text"><br/>
        <br/>
        </div>

        <div id="button">
            Add!</div>
        <br/>
        <br/>

        <button>GO!</button>

        <br/><br/>
        <div id="map" style = "width: 500px; height: 500px"><br/>

        </form>
    </center>

  </body>

</html>

[You might want to look at this question.](http://stackoverflow.com/questions/2921745/how-to-make-cross-domain-ajax-calls-to-google-maps-api) — Pointy, Jan 26 '13 at 15:03
For debugging purpose you should use console.log() instead of alerts. This a best practice, plus this is nicer since you can log any object. — Alexandre de Champeaux, Jan 26 '13 at 15:04
Another best practice would be not to use
to add some spaces in your document but to use CSS instead. — Alexandre de Champeaux, Jan 26 '13 at 15:14
http://jsfiddle.net/w3Gxf/ Heres is the jsfiddle link. Please help — user1263375, Jan 26 '13 at 16:05

score 1 · Answer 1 · answered Jan 26 '13 at 15:10

The easiest way to debug is to use firebug and console.log() variables or messages at certain points in your script, so that you can better understand what is going on at various steps of your script. You can see the output in the Console tab of firebug.

You can also add breakpoints and watches from some of the other tabs. For example in the DOM tab you can rightclick on a variable and add a watch, or from the Script tab you can click on a position in your script to set a breakpoint or watch, and it will stop the script at that point and/or show a dump of vars at that point.

Alexandre de Champeaux · Accepted Answer · 2013-01-26T16:53:59.647

1

Hey here is a working fiddle with your code, and some examples of ways to debug your js :

http://jsfiddle.net/QxP7p/3/

As you see you can do nice stuff like :

console.log("distance : ");
console.log(distance);

Hope it helps

They were a few mistakes as well, couldn't help fixing them

edited Jan 26 '13 at 16:53

answered Jan 26 '13 at 16:04

Alexandre de Champeaux

1,832
16
23

is it working ? please tell me the mistakes. I am new to js and cant figure it out – user1263375 Jan 26 '13 at 16:14
Have you tried the fiddle? You should see the distances correctly logged in your console. (I personnally tried it with two friends, one in Paris and one in Berlin) – Alexandre de Champeaux Jan 26 '13 at 16:18
its saying "rows" undefined . Line 66 – user1263375 Jan 26 '13 at 16:21
And what response is logged? – Alexandre de Champeaux Jan 26 '13 at 16:23
TypeError: rows is undefined [Break On This Error] for (var i = 0; i < rows.length; i++) – user1263375 Jan 26 '13 at 16:26
There actually was a mistake, I was initializing the distance[i] array in the wrong place, here is the updated fiddle : http://jsfiddle.net/QxP7p/2/ – Alexandre de Champeaux Jan 26 '13 at 16:26
What's your browser? I don't get this error. This cannot be undefined, since the line just above is var rows = response.rows; – Alexandre de Champeaux Jan 26 '13 at 16:28
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/23415/discussion-between-user1263375-and-champi) – user1263375 Jan 26 '13 at 16:30

Debugging jquery or javascript using firebug

2 Answers2