1.Weinre是什么？
Weinre全稱 Web Inspector Remote，是一個(gè)簡(jiǎn)單好用的遠(yuǎn)程調(diào)試工具。我們可以在自己的PC上修改對(duì)應(yīng)網(wǎng)頁(yè)的頁(yè)面元素、樣式盖袭，或是查看Javascript變量，同時(shí)還可以看到手機(jī)上頁(yè)面的錯(cuò)誤和警告信息彼宠。舉個(gè)栗子：當(dāng)我們?cè)L問(wèn)云課堂的購(gòu)物車頁(yè)面時(shí)鳄虱，頁(yè)面如下圖所示，當(dāng)我設(shè)置課程卡片的樣式：background-color：red后凭峡，手機(jī)上實(shí)時(shí)顯示了修改后的樣式拙已，下面的附圖展示了實(shí)時(shí)的調(diào)試過(guò)程。
2摧冀、Weinre組成原理
Weinre遠(yuǎn)程調(diào)試工具由一下幾部分組成：
目標(biāo)頁(yè)面（target）：也就是調(diào)試的頁(yè)面倍踪，頁(yè)面中需要嵌入weinre提供的遠(yuǎn)程js，這里的js相當(dāng)一個(gè)錨點(diǎn)作用索昂，后文會(huì)提到建车；
服務(wù)端（agent）：一個(gè)HTTP Server，為目標(biāo)頁(yè)面與客戶端建立通信椒惨；
客戶端（client）：本地的Web Inspector調(diào)試客戶端缤至。
3、安裝及運(yùn)行Weinre
Weinre支持Windows與Mac（Weinre是運(yùn)行在java環(huán)境下的康谆，請(qǐng)確保機(jī)器上有正確的java運(yùn)行環(huán)境）领斥，以前Weinre是用安裝包安裝的方式，現(xiàn)在Weinre 也發(fā)布到 NPM 上了沃暗。
首先安裝 Weinre：
npm install -g weinre
安裝完成之后月洛，在本地開啟一個(gè)監(jiān)聽服務(wù)器，獲取本機(jī)的局域網(wǎng)地址：10.240.154.164孽锥，這時(shí)候執(zhí)行如下命令開啟：
weinre --boundHost 10.240.154.164
【PS】Weinre 提供了6個(gè)可選的啟動(dòng)參數(shù)嚼黔，常用的是以下兩個(gè)參數(shù)细层，其它的用默認(rèn)值就可以了。
httpPort 調(diào)試服務(wù)器運(yùn)行的端口唬涧，默認(rèn)的 8080今艺，如果這個(gè)端口有在用，可以改為其它端口爵卒；
boundHost 調(diào)試服務(wù)器綁定的 IP 地址（或域名），默認(rèn) localhost撵彻，如果設(shè)置為 -all-钓株，表示綁定到所有當(dāng)前機(jī)器可以訪問(wèn)的接口。
weinre --boundHost -all-
訪問(wèn)http://10.240.154.164:8080,出現(xiàn)以下頁(yè)面陌僵，說(shuō)明安裝成功轴合！
按照頁(yè)面中的提示，將Target Script中給的地址放到你需要調(diào)試的頁(yè)面中碗短，然后訪問(wèn)debug client(上圖第一個(gè)紅框中的地址)受葛。訪問(wèn)后，我們能夠看到一個(gè)類似于chrome控制臺(tái)的東西出現(xiàn)了偎谁，這個(gè)時(shí)候总滩，你就可以隨心所欲調(diào)試?yán)玻⊥瑫r(shí)巡雨，注意到Targets中標(biāo)明了現(xiàn)在調(diào)用遠(yuǎn)程Weinre js的頁(yè)面
這個(gè)時(shí)候嘗試改變頁(yè)面的一些樣式闰渔，立即會(huì)在手機(jī)上呈現(xiàn)出來(lái)。
其實(shí)铐望，這個(gè)時(shí)候用Fiddler抓包冈涧，我們能看到來(lái)自于target、client的請(qǐng)求
【PS】利用Weinre也能在console里面查看js的變量正蛙，這一點(diǎn)非常方便
