javascript和web 调试技术

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

Weinre移动调试

DOM 断点

debugger断点

native方法hook

远程映射本地调试

Weinre

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

http://people.apache.org/~pmuellr/weinre/docs/latest/images/weinre-demo.jpg

安装weinre

weinre可以通过npm来安装：

1

npm install -g weinre

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

1

weinre --httpPort 8080 --boundHost -all-

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

原理

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

Tips

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

如果嫌安装麻烦，可以使用phonegap的weinre：http://debug.phonegap.com/

DOM断点

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

使用DOM断点

选择你要打断点的DOM节点

右键选择Break on..

选择断点类型

Tips

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

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

javascript的debugger语句

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

使用javascript的断点

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

 

if(waldo) {

debugger;

}

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

Tips

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

原生代码的hook调试