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調試