在前端開發中，除錯技術是必不可少的技能，本文將介紹五種前端開發必備的除錯技術。

• Weinre移動除錯
• DOM 斷點
• debugger斷點
• native方法hook
• 遠端對映本地除錯

Weinre

在移動上面開發除錯是很複雜的，所以就有了weinre。安裝weinre可以實現pc來除錯手機頁面，所以對於移動開發除錯是很重要的哦~

安裝weinre

weinre可以通過npm來安裝：

npm install -g weinre

安裝完之後，可執行下面的命令來啟動：

weinre --httpPort 8080 --boundHost -all-

這樣訪問自己的127.0.0.1:8080按照提示在需要除錯頁面中插入一段js，然後就可以除錯了。操作介面類似Chrome的DevTools，具體操作可以看下[教程](<http<a rel=”nofollow” href=”“></a>>

原理

通過在需要除錯的頁面中引入一段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：

if (waldo) {
  debugger;
}

這時候開啟console皮膚，就可以除錯了

Tips

如果你不知道怎麼除錯，那麼儘快看下：Chrome DevTools中斷點部分的教程

原生程式碼的hook除錯

因為瀏覽器自己會內建一些類似window物件這些原生的js方法，當你知道原生程式碼的確有問題，但是你又不能跟蹤除錯的時候，你就可以用這個方法了。

舉個例子

例如我們注意到了一個DOM的屬性值發生了變化，但是我們不知道是哪裡的程式碼導致的變化，所以我們可以給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);
}

這樣，當元素的屬性發生了變化的時候，就會執行到斷點，你就可以在斷點的棧中找出呼叫的地方來~

Tips

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

遠端對映本地除錯

當線上某個js/css出現問題，我們可以用代理的方式，將遠端的檔案代理到本地來實現遠端對映除錯。其實除了這個功能，還可以作為抓包工具，這在移動端是很重要的。推薦Mac用[charles Proxy](http://www.charlesproxy.com/），
windows使用者使用fiddle。

這個就不多說了，直接上國內的幾篇文章：

• http://www.cnblogs.com/tankxiao/archive/2012/02/06/2337728.html
• http://www.cnblogs.com/TankXiao/p/3063871.html

轉載自：五種前端開發必備的除錯技術