使用 firebug 调试 jquery 或 javascript
Debugging jquery or javascript using firebug
我用jquery写了一个代码。我最初没有运行,然后我检查了在线 jslint 是否存在语法错误。我发现了一些错误。现在代码仍然没有按预期工作。所以我去找了萤火虫。我还没有做很多调试。我是新手。这是我的代码
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]);
});
});
});
现在,它应该做的是转到此链接并从 json 文件中获取数据并将其存储在二维数组距离 [][] 内。最后,在存储所有数据后,它应该显示"距离[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>
嘿,
这是您的代码的工作摆弄,以及一些调试 js 的方法示例:
http://jsfiddle.net/QxP7p/3/
如您所见,您可以做一些好事,例如:
console.log("distance : ");
console.log(distance);
希望对你有帮助
它们也有一些错误,忍不住修复它们
最简单的调试方法是在脚本中的某些点使用 firebug 并console.log()
变量或消息,以便更好地了解脚本各个步骤中发生的情况。 您可以在 firebug 的控制台选项卡中看到输出。
还可以从其他一些选项卡添加断点和监视。例如,在 DOM 选项卡中,您可以右键单击变量并添加监视,或者从脚本选项卡中单击脚本中的某个位置以设置断点或监视,它将在该点停止脚本和/或显示该点的 var 转储。
相关文章:
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- Javascript(jQuery)给了我奇怪的结果
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- Javascript/jQuery中的并行Ajax调用
- 我可以在Javascript/jQuery中使用一个变量作为键吗
- Javascript/Jquery/PHP加载页面-如何
- Javascript/Jquery Blob not showing Chrome PDF
- 如何使用javascript/jquery获取iframe的URL的锚点属性
- OnClick/Onhover Javascript/jquery
- 如何从javascript/jquery中的复选框中获取布尔值
- javascript/jquery将utc转换为短格式的本地时间
- 在不设置协议的情况下,使用javascript/jquery更改iframe-src
- 如何向这个javascript/jquery函数添加参数
- 用JavaScript/jQuery点击图片,选中多个方框
- 使用Javascript/JQuery获取JSON GET数据
- 从数组中删除元素的最佳方法是:javascript/jquery
- Javascript/jQuery压缩一个图像正确的评论帖子,并使用Ajax Laravel 5.2保存到控制器中
- 用DRY方式Javascript/JQuery动态替换HTML
- 类似Javascript JQuery的库
- 如何在 Javascript/jQuery 中获取一些随机下拉列表的选定值