在前端開發中,調試技術是必不可少的技能,本文将介紹五種前端開發必備的調試技術。
- Weinre移動調試
- DOM 斷點
- debugger斷點
- native方法hook
- 遠端映射本地調試
Weinre
在移動上面開發調試是很複雜的,是以就有了weinre。安裝
weinre可以實作pc來調試手機頁面,是以對于移動開發調試是很重要的哦~
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5CM2MzN0IWZykTMlRDO2UWOxEjY0M2YwMGNjNDMkJWYm9CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)
安裝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
- 如果你嫌每次都要在調試的頁面引入js麻煩,可以做個書簽或者chrome插件
- 如果嫌安裝麻煩,可以使用phonegap的weinre: http://debug.phonegap.com/ http://debug.phonegap.com/
DOM斷點
DOM斷點是一個Firebug和chrome DevTools提供的功能,當js需要操作打了斷點的DOM時,會自動暫停,類似debugger調試。
使用DOM斷點
- 選擇你要打斷點的DOM節點
- 右鍵選擇
Break on..
- 選擇斷點類型
- Firebug中,DOM斷點可以在Script> Breakpoints裡面看到
- chrome DevTools中,需要在Elements面闆的DOM Breakpoints中看到
javascript的debugger語句
需要調試js的時候,我們可以給需要調試的地方通過
debugger
打斷點,代碼執行到斷點就會暫停,這時候通過單步調試等方式就可以調試js代碼
使用javascript的斷點
在需要打斷點的地方添加
debugger
:
if (waldo) {
debugger;
}
這時候打開console面闆,就可以調試了
如果你不知道怎麼調試,那麼盡快看下:
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);
這樣,當元素的屬性發生了變化的時候,就會執行到斷點,你就可以在斷點的棧中找出調用的地方來~
這種方法不保證在所有浏覽器中有效,比如ios的safari隐私模式下,我們就不可以修改
localStorage
方法
當線上某個js/css出現問題,我們可以用代理的方式,将遠端的檔案代理到本地來實作遠端映射調試。其實除了這個功能,還可以作為抓包工具,這在移動端是很重要的。推薦Mac用[charles Proxy](
http://www.charlesproxy.com/),
windows使用者使用
fiddle。