javascript - 使用 firebug 调试 jquery 或 javascript

标签 javascript jquery firebug

我用 jquery 写了一段代码。一开始没跑,后来上网查了下jslint对于语法错误。我发现了一些错误。现在代码仍然没有按预期工作。所以我去找 Firebug 。我没有做过很多调试。我是新手。这是我的代码

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]);
              });

        });
  });

现在,它应该做的是转到这个 link并从 json 文件中获取数据并将其存储在二维数组 distance[][] 中。最后在存储所有数据后,它应该显示“distance[1][2]”的结果作为警报。

现在我不知道这段代码有什么问题,也不知道如何使用 Firebug 找到逻辑错误。什么应该让我的工作变得轻松?

ps: 这是 HTML 文件

<!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>

最佳答案

嘿,这里是你的代码的工作 fiddle ,以及一些调试 js 的方法示例:

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

如您所见,您可以做一些不错的事情,例如:

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

希望对你有帮助

也有一些错误,忍不住改正

关于javascript - 使用 firebug 调试 jquery 或 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14538123/

相关文章:

javascript - 如何阻止 Firebug 在控制台中 chop 字符串?

javascript - 在 Meteor 中访问 node.js 文件系统模块

jquery - jQuery UI 布局和 jQuery UI 选项卡的问题

javascript - 为什么 `toString` 不等于 `window.toString` ?

jquery - 将数据传递给 Bootstrap 模式

javascript - 使用localstorage隐藏alert div

javascript - 当代码在单独的 JS 文件中时如何在 Firebug 中调试?

javascript - 在移动 View 中隐藏广告横幅

javascript - knockout 对象绑定(bind)

javascript - 多次调用 jQuery 函数