Weinre遠程調試工具

1.Weinre是什麼？

Weinre全稱  Web  Inspector  Remote，是一個簡單好用的遠程調試工具。咱們能夠在本身的PC上修改對應網頁的頁面元素、樣式，或是查看Javascript變量，同時還能夠看到手機上頁面的錯誤和警告信息。舉個栗子：當咱們訪問雲課堂的購物車頁面時，頁面以下圖所示，當我設置課程卡片的樣式：background-color：red後，手機上實時顯示了修改後的樣式，下面的附圖展現了實時的調試過程。

       

 

二、Weinre組成原理

Weinre遠程調試工具由一下幾部分組成：

• 目標頁面（target）：也就是調試的頁面，頁面中須要嵌入weinre提供的遠程js，這裏的js至關一個錨點做用，後文會提到；
• 服務端（agent）：一個HTTP Server，爲目標頁面與客戶端創建通訊；
• 客戶端（client）：本地的Web Inspector調試客戶端。

三、安裝及運行Weinre

Weinre支持Windows與Mac（Weinre是運行在java環境下的，請確保機器上有正確的java運行環境），之前Weinre是用安裝包安裝的方式，如今Weinre 也發佈到 NPM 上了。

首先安裝 Weinre：

npm install -g weinre

安裝完成以後，在本地開啓一個監聽服務器，獲取本機的局域網地址：10.240.154.164，這時候執行以下命令開啓：

weinre --boundHost 10.240.154.164weinre --boundHost 10.240.154.164

【PS】Weinre 提供了6個可選的啓動參數，經常使用的是如下兩個參數，其它的用默認值就能夠了。

• httpPort 調試服務器運行的端口，默認的 8080，若是這個端口有在用，能夠改成其它端口；
• boundHost 調試服務器綁定的 IP 地址（或域名），默認 localhost，若是設置爲 -all-，表示綁定到全部當前機器能夠訪問的接口。

weinre --boundHost -all-weinre --boundHost -all-

 

訪問http://10.240.154.164:8080,出現如下頁面，說明安裝成功！

 

按照頁面中的提示，將Target Script中給的地址放到你須要調試的頁面中，而後訪問debug client(上圖第一個紅框中的地址)。訪問後，咱們可以看到一個相似於chrome控制檯的東西出現了，這個時候，你就能夠爲所欲爲調試啦！同時，注意到Targets中標明瞭如今調用遠程Weinre js的頁面

 

這個時候嘗試改變頁面的一些樣式，當即會在手機上呈現出來。

其實，這個時候用Fiddler抓包，咱們能看到來自於target、client的請求

【PS】利用Weinre也能在console裏面查看js的變量，這一點很是方便。