本文將介紹五種前端開發(fā)必備的調(diào)試技術(shù)：

1. Weinre移動調(diào)試
2. DOM 斷點
3. debugger斷點
4. native方法hook
5. 遠程映射本地調(diào)試

 1 、 Weninre

在移動上面開發(fā)調(diào)試是很復(fù)雜的，所以就有了Weinre。安裝Weinre可以實現(xiàn)pc來調(diào)試手機頁面，所以對于移動開發(fā)調(diào)試是很重要的哦~

安裝Weinre

Weinre可以通過npm來安裝：

npm install -g weinre

安裝完之后，可執(zhí)行下面的命令來啟動：

weinre –httpPort 8080 –boundHost -all-

這樣訪問自己的127.0.0.1:8080按照提示在需要調(diào)試頁面中插入一段js，然后就可以調(diào)試了。操作界面類似Chrome的 DevTools，具體操作可以看下http://people./~pmuellr/weinre/docs/latest/Running.html教程

原理

通過在需要調(diào)試的頁面中引入一段Weinre的JS，實現(xiàn)pc和手機的socket通信，從而實現(xiàn)實時調(diào)試。

Tips

如果你嫌每次都要在調(diào)試的頁面引入js麻煩，可以做個書簽或者chrome插件

如果嫌安裝麻煩，可以使用phonegap的weinre：http://debug./

 2、DOM斷點

DOM斷點是一個Firebug和chrome DevTools提供的功能，當(dāng)js需要操作打了斷點的DOM時，會自動暫停，類似debugger調(diào)試。

使用DOM斷點

1. 選擇你要打斷點的DOM節(jié)點
2. 右鍵選擇Break on..
3. 選擇斷點類型

Tips

• Firebug中，DOM斷點可以在Script> Breakpoints里面看到
• chrome DevTools中，需要在Elements面板的DOM Breakpoints中看到

 3、 JavaScript的debugger語句

需要調(diào)試js的時候，我們可以給需要調(diào)試的地方通過debugger打斷點，代碼執(zhí)行到斷點就會暫定，這時候通過單步調(diào)試等方式就可以調(diào)試js代碼

使用javascript的斷點

在需要打斷點的地方添加debugger：

if (waldo) {

debugger;

}

這時候打開console面板，就可以調(diào)試了

Tips

如果你不知道怎么調(diào)試，那么盡快看下：Chrome DevTools中斷點部分的教程

 4、原生代碼的hock調(diào)試

因為瀏覽器自己會內(nèi)置一些類似window對象這些原生的js方法，當(dāng)你知道原生代碼的確有問題，但是你又不能跟蹤調(diào)試的時候，你就可以用這個方法了。

舉個例子

例如我們注意到了一個DOM的屬性值發(fā)生了變化，但是我們不知道是哪里的代碼導(dǎo)致的變化，所以我們可以給DOM元素的setAttribute打個斷點，代碼如下：

var oldFn = Element.prototype.setAttribute;

Element.prototype.setAttribute = function (attr, value) {

if (value === “the_droids_you_are_looking_for”) {

debugger;

}

oldFn.call(this, attr, value);

}

這樣，當(dāng)元素的屬性發(fā)生了變化的時候，就會執(zhí)行到斷點，你就可以在斷點的棧中找出調(diào)用的地方來~

Tips

這種方法不保證在所有瀏覽器中有效，比如iOS的Safari 隱私模式下，我們就不可以修改localStorage方法

 5、 遠程映射本地調(diào)試

當(dāng)線上某個js/css出現(xiàn)問題，我們可以用代理的方式，將遠程的文件代理到本地來實現(xiàn)遠程映射調(diào)試。其實除了這個功能，還可以作為抓包工具，這在移動端是很重要的。推薦Mac用charles Proxy（http://www./）， windows用戶使用fiddler（http:///）。