版權歸作者所有，任何形式轉載請聯系作者。
作者：U_U（來自豆瓣）
來源：https://www.douban.com/note/289846168/
調試前端頁面我一直使用着神器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. 折騰這麼久, 快點讓我遠端調試吧
在手機上打開要調試頁面的位址
在 weinre Access Points 中開始遠端調試
點選anonymous Access Points
點選一下激活target
終于可以調試了! 接下來随便怎麼玩都可以了, 大家應該都很熟練了吧...
轉自：http://Www.CnBlogs.Com/WebEnh/
| 本部落格Android APP 下載下傳 |
 |
| 支援我們就給我們點打賞 |
 |
| 支付寶打賞 支付寶掃一掃二維碼 |
| |
| 微信打賞 微信掃一掃二維碼 |
| |
如果想下次快速找到我，記得點下面的關注哦！