Weinre遠程調試工具

1.Weinre是什么？

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

       

 

2、Weinre組成原理

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

• 目標頁面（target）：也就是調試的頁面，頁面中需要嵌入weinre提供的遠程js，這里的js相當一個錨點作用，后文會提到；
• 服務端（agent）：一個HTTP Server，為目標頁面與客戶端建立通信；
• 客戶端（client）：本地的Web Inspector調試客戶端。

3、安裝及運行Weinre

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

首先安裝 Weinre：

npm install -g weinre

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

weinre --boundHost 10.240.154.164

【PS】Weinre 提供了6個可選的啟動參數，常用的是以下兩個參數，其它的用默認值就可以了。

• httpPort 調試服務器運行的端口，默認的 8080，如果這個端口有在用，可以改為其它端口；
• boundHost 調試服務器綁定的 IP 地址（或域名），默認 localhost，如果設置為 -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的變量，這一點非常方便。