移動web 應用開發調試

標籤：

 調試前端頁面我一直使用著神器Chrome開發人員工具, 那個方便, 大家都懂的.

但當我們要調試為行動裝置設計的Web頁面時, 是不是覺得有點力不從心了?
平時開發時我們可以一直都是在案頭調試這個頁面, 但最終的運行環境是行動裝置, 最終還是要在手機上驗證一下, 這個時候各種相容性問題就有可能接踵而來.

當我們在手機上開啟這個頁面時, 發現有個地方樣式有問題, 但案頭上展現正常, 這個時候怎麼辦?
我們是不是只能推理下某個地方樣式有相容性問題, 逐步將問題範圍縮小, 猜想/修改/重新整理手機, 無限迴圈下去, 直到解決問題為止.

這個時候要是有一個像Chrome開發人員工具一樣的調試工具能遠程實現調試手機上開啟的頁面該多好啊.

其實是還真有, 只是我不知道而已, 下面就有請 weinre 閃亮登場!!

weinre is WEb INspector REmote.
weinre is a debugger for web pages, like FireBug and Web Inspector, except it‘s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.
weinre reuses the user interface code from the Web Inspector project at WebKit, so if you‘ve used Safari‘s Web Inspector or Chrome‘s Developer Tools, weinre will be very familiar.

我這裡只是簡單介紹下怎麼使用, 詳情資料大家還是去官網看吧

---------------------------------------------------------------------------------------------------------------------------

接下來我們實戰一把
1. 安裝
    需要Node.js平台, 先安裝好後, 開啟Node.js command prompt, 通過NPM來安裝 weinre

npm -g install weinre

2. 啟動
    安裝完成後, 我們接著啟動 weinre

weinre -httpPort 8081 -boundHost -all-

 

能開啟這個地址就說明weinre啟動成功了

    可以配置 .weinre/server.properties 讓啟動 weinre 變得更方便, 具體方法請參考官網, 配置好後, 以後想啟動 weinre, 直接運行weinre命令即可, 無需每次都追加那些參數了.

3. Instrumenting your web page to act as a debug target
    將如下指令碼追加到你將要調試的頁面上
    <script src="http://你的IP地址:8081/target/target-script-min.js#anonymous"></script>

4. 折騰這麼久, 快點讓我遠端偵錯吧
    在手機上開啟要調試頁面的地址

    http://192.168.31.161:7773/index2.htm      對於原生localhost 也是可以進行調試的。

   在 weinre Access Points 中開始遠端偵錯

點擊anonymous Access Points

 

 同時還有一個外掛程式 ripple  也是比較方便的，對於調試phonegap 應用比較方便

移動web 應用開發調試