var jsonObj2={persons:[{name:"jordan",sex:"m",age:"40"}, {name:"bryant",sex:"m",age:"28"}, {name:"McGrady",sex:"m",age:"27"} ]};

var persons=jsonObj2.persons;
var str="";

var person={name:"yaoMing",sex:"m",age:"26"};
//以下为json对象的操作，去掉注释可以查看操作结果
//jsonObj2.persons.push(person);//数组最后加一条记录
//jsonObj2.persons.pop();//删除最后一项
//jsonObj2.persons.shift();//删除第一项
jsonObj2.persons.unshift(person);//数组最前面加一条记录 只要适合Javascript的方法都是可以用在JSON对象的数组中的！所以还有另外的方法splice( )进行crud操作！ //删除
//jsonObj2.persons.splice(0,2);//开始位置,删除个数
//替换不删除
var self={name:"tom",sex:"m",age:"24"};
var brother={name:"Mike",sex:"m",age:"29"};
jsonObj2.persons.splice(1,0,self,brother,self);//开始位置,删除个数,插入对象
//替换并删除
//jsonObj2.persons.splice(0,1,self,brother);//开始位置,删除个数,插入对象

for(var i=0;i<persons.length;i++){ var cur_person=persons[i]; str+=cur_person.name+"'sex is "+cur_person.sex+" and age is "+cur_person.age+"<br><br>"; }
document.writeln(str);
//转换为json文本
var myjsonobj = JSON.stringify(jsonObj2);
document.writeln(myjsonobj);
</script>

在前端开发中如果你不知道这几个web debug调试插件使用也算是白学了，下面我来给大家再次总结一下这5个js与web debug调试插件，希望对你有点帮助。

在前端开发中，调试技术是必不可少的技能，本文将介绍五种前端开发必备的调试技术。

Weinre

在移动上面开发调试是很复杂的，所以就有了weinre。安装weinre可以实现pc来调试手机页面，所以对于移动开发调试是很重要的哦~

安装weinre

weinre可以通过npm来安装：

 代码如下 复制代码

npm install -g weinre

安装完之后，可执行下面的命令来启动：

 代码如下 复制代码

weinre --httpPort 8080 --boundHost -all-

这样访问自己的127.0.0.1:8080按照提示在需要调试页面中插入一段js，然后就可以调试了。操作界面类似Chrome的 DevTools，具体操作可以看下~pmuellr/weinre/docs/latest/Running.html教程

原理

通过在需要调试的页面中引入一段weinre的js，实现pc和手机的socket通信，从而实现实时调试。

Tips

如果你嫌每次都要在调试的页面引入js麻烦，可以做个书签或者chrome插件

如果嫌安装麻烦，可以使用phonegap的weinre：

DOM断点

DOM断点是一个Firebug和chrome DevTools提供的功能，当js需要操作打了断点的DOM时，会自动暂停，类似debugger调试。

使用DOM断点

Tips

Firebug中，DOM断点可以在Script> Breakpoints里面看到

chrome DevTools中，需要在Elements面板的DOM Breakpoints中看到

javascript的debugger语句

需要调试js的时候，我们可以给需要调试的地方通过debugger打断点，代码执行到断点就会暂定，这时候通过单步调试等方式就可以调试js代码

使用javascript的断点

在需要打断点的地方添加debugger：

1 2 3 if (waldo) { debugger; }

 

这时候打开console面板，就可以调试了

Tips

如果你不知道怎么调试，那么尽快看下：Chrome DevTools中断点部分的教程

原生代码的hook调试

因为浏览器自己会内置一些类似window对象这些原生的js方法，当你知道原生代码的确有问题，但是你又不能跟踪调试的时候，你就可以用这个方法了。

举个例子

例如我们注意到了一个DOM的属性值发生了变化，但是我们不知道是哪里的代码导致的变化，所以我们可以给DOM元素的setAttribute打个断点，代码如下：

1 2 3 4 5 6 7 8 var oldFn = Element.prototype.setAttribute; Element.prototype.setAttribute = (value === "the_droids_you_are_looking_for") { debugger; } oldFn.call(this, attr, value); }

 

这样，当元素的属性发生了变化的时候，就会执行到断点，你就可以在断点的栈中找出调用的地方来~

Tips

这种方法不保证在所有浏览器中有效，比如ios的safari 隐私模式下，我们就不可以修改localStorage方法

远程映射本地调试

当线上某个js/css出现问题，我们可以用代理的方式，将远程的文件代理到本地来实现远程映射调试。其实除了这个功能，还可以作为抓包工具，这在移动端是很重要的

iframe框架是我们经常会用到的一个功能，如使用ifame文件上传或使用iframe调用页面等等，下面我来介绍利用js访问iframe里面的函数与元素,希望此教程对各位有帮助。

访问iframe里面的函数

 代码如下 复制代码

document.getElementById('commentIframe').contentWindow.hasLogined();

commentIframe为iframe的id.

要在 window.onload里面执行，上面不知道大家看懂了没。

例1.访问iframe中的js函数

代码

 代码如下 复制代码