五個你必須知道的javascript和web 調試技術

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

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/）