Weinre最大的特點(diǎn)是在PC上遠(yuǎn)程調(diào)試移動網(wǎng)站及 PhoneGap 應(yīng)用 全稱是遠(yuǎn)程 Web 調(diào)試工具 功能與Firebug類似 不僅可以調(diào)試調(diào)試 DOM 元素 CSS 樣式 和 JavaScript 還可以監(jiān)聽網(wǎng)絡(luò)請求

① 安裝
由于Weinre是基于node.js實現(xiàn) 安裝前需要安裝Node
之后便可以通過npm命令安裝Weinre

npm -g install weinre

② 使用
weinre安裝完成后 便可以使用weinre命令啟動服務(wù)器 weinre提供了以下參數(shù)

boundHost:  -all-
httpPort:  8081
reuseAddr:  true
readTimeout:  1
deathTimeout: 5

常用的參數(shù)只有兩個

--httpPort 調(diào)試服務(wù)器端口 默認(rèn)是8080
--boundHost 調(diào)試服務(wù)器綁定的 IP 地址或域名 默認(rèn)localhost
 如果指定為-all- 表示綁定到當(dāng)前機(jī)器可以訪問的所有IP

啟動服務(wù)器

weinre --httpPort 9090 --boundHost -all-

httpPort盡量不要占用8080 以免與你的項目端口沖突

啟動完成后 在瀏覽器中訪問http://localhost:9090/

weinre服務(wù)器首頁

在頁面中找到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

Targets表示所有調(diào)試的頁面

調(diào)試頁面

為了方便看到效果 我是通過PC瀏覽器的訪問的調(diào)試頁面
當(dāng)鼠標(biāo)懸浮在元素之上時 便可以在手機(jī)端看到右側(cè)效果
并可以看到CSS

歡迎關(guān)注微信個人訂閱號：DevTipss

DevTips.jpg

本文完~~~