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>

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
– Alexandre de Champeaux, Commented Jan 26, 2013 at 15:04
Another best practice would be not to use <br/> to add some spaces in your document but to use CSS instead. — Alexandre de Champeaux
– Alexandre de Champeaux, Commented Jan 26, 2013 at 15:14

Alexandre de Champeaux · Accepted Answer · 2013-01-26 16:53:59Z

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, 2013 at 16:53

answered Jan 26, 2013 at 16:04

Alexandre de Champeaux

1,9121 gold badge16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user1263375 Over a year ago

is it working ? please tell me the mistakes. I am new to js and cant figure it out

Alexandre de Champeaux Over a year ago

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)

user1263375 Over a year ago

its saying "rows" undefined . Line 66

Alexandre de Champeaux Over a year ago

And what response is logged?

user1263375 Over a year ago

TypeError: rows is undefined [Break On This Error] for (var i = 0; i < rows.length; i++)

|

CrayonViolent · Accepted Answer · 2013-01-26 15:10:10Z

1

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.

answered Jan 26, 2013 at 15:10

CrayonViolent

32.6k6 gold badges61 silver badges80 bronze badges

Collectives™ on Stack Overflow

Debugging jquery or javascript using firebug

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related