五種前端開發必備的調試技術

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

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

---

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

via js8.in