Weinre最大的特點(diǎn)是在PC上遠(yuǎn)程調(diào)試移動(dòng)網(wǎng)站及 PhoneGap 應(yīng)用 全稱是遠(yuǎn)程 Web 調(diào)試工具 功能與Firebug類似 不僅可以調(diào)試調(diào)試 DOM 元素 CSS 樣式 和 JavaScript 還可以監(jiān)聽網(wǎng)絡(luò)請(qǐng)求
① 安裝
由于Weinre是基于node.js實(shí)現(xiàn) 安裝前需要安裝Node
之后便可以通過npm命令安裝Weinre
npm -g install weinre
② 使用
weinre安裝完成后 便可以使用weinre命令啟動(dòng)服務(wù)器 weinre提供了以下參數(shù)
boundHost: -all-
httpPort: 8081
reuseAddr: true
readTimeout: 1
deathTimeout: 5
常用的參數(shù)只有兩個(gè)
--httpPort 調(diào)試服務(wù)器端口 默認(rèn)是8080
--boundHost 調(diào)試服務(wù)器綁定的 IP 地址或域名 默認(rèn)localhost
如果指定為-all- 表示綁定到當(dāng)前機(jī)器可以訪問的所有IP
啟動(dòng)服務(wù)器
weinre --httpPort 9090 --boundHost -all-
httpPort盡量不要占用8080 以免與你的項(xiàng)目端口沖突
啟動(dòng)完成后 在瀏覽器中訪問http://localhost:9090/
在頁面中找到Target Script
Target Script表示你要調(diào)試的頁面
在頁面中引入target-script-min.js 如下:
<script src="http://localhost:9090/target/target-script-min.js#anonymous"></script>
之后在手機(jī)中訪問調(diào)試頁面
回到weinre首頁 找到Access Points -> debug client user interface
點(diǎn)擊鏈接 http://localhost:9090/client/#anonymous
Targets表示所有調(diào)試的頁面
為了方便看到效果 我是通過PC瀏覽器的訪問的調(diào)試頁面
當(dāng)鼠標(biāo)懸浮在元素之上時(shí) 便可以在手機(jī)端看到右側(cè)效果
并可以看到CSS
歡迎關(guān)注微信個(gè)人訂閱號(hào)：DevTipss
本文完~~~
