五个你必须知道的javascript和web 调试技术

Weinre

安装weinre

原理

Tips

DOM断点

使用DOM断点

Tips

javascript的debugger语句

使用javascript的断点

Tips

原生代码的hook调试

举个例子

Tips

远程映射本地调试

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

1. Weinre移动调试
2. DOM 断点
3. debugger断点
4. native方法hook
5. 远程映射本地调试

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

1. 若是你嫌每次都要在调试的页面引入js麻烦，能够作个书签或者chrome插件
2. 若是嫌安装麻烦，可使用phonegap的weinre：http://debug.phonegap.com/

DOM断点

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

使用DOM断点

1. 选择你要打断点的DOM节点
2. 右键选择Break on..
3. 选择断点类型

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

varoldFn = Element.prototype.setAttribute;   Element.prototype.setAttribute =function(attr, value) {     if(value ==="the_droids_you_are_looking_for") {         debugger;     }     oldFn.call(this, attr, value); }

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

Tips

这种方法不保证在全部浏览器中有效，好比ios的safari 隐私模式下，咱们就不能够修改localStorage方法

远程映射本地调试

当线上某个js/css出现问题，咱们能够用代理的方式，将远程的文件代理到本地来实现远程映射调试。其实除了这个功能，还能够做为抓包工具，这在移动端是很重要的。推荐Mac用charles Proxy（http://www.charlesproxy.com/）， windows用户使用fiddler（http://fiddler2.com/）