前端調試工具

 

Weinre

Weinre(WebInspector Remote)是一款基於Web Inspector(Webkit)的遠程調試工具，藉助於網絡，能夠在PC上直接調試運行在移動設備上的遠程頁面

Weinre組成原理

目標頁面（target）:調試頁面，頁面中須要嵌入weinre提供的遠程js，這裏的Js至關於一個錨點做用
服務器（agent）:一個HTTP Server，爲目標頁面與客戶端創建通訊
客戶端（client）:本地的Web Inspector調試客戶端
Weinre相關命令
weinre --help:顯示weinre的help
weinre --httpPort [portNumber]:設置weinre使用的端口號，默認8080
weinre --boundHost [hostname| ip address | -all-] : 默認是'localhost'， 這個參數是爲了限制能夠訪問Weinre Server的設備， 設置爲-all-或者指定ip， 那麼任何設備均可以訪問Weinre Server
weinre --verbose [true | false] : 若是想看到更多的關於Weinre運行狀況的輸出， 那麼能夠設置這個選項爲true， 默認爲false
weinre --debug [true | false] : 這個選項與--verbose相似， 會輸出更多的信息。默認爲false
weinre --readTimeout [seconds] : Server發送信息到Target/Client的超時時間， 默認爲5s
weinre --deathTimeout [seconds] : 默認爲3倍的readTimeout， 若是頁面超過這個時間都沒有任何響應， 那麼就會斷開鏈接

在有nodejs開發環境下配置： 

第一步：

安裝與服務啓動命令

npm -g install weinre //安裝weinre 

weinre --boundHost [hostname | ip address |-all-] --httpPort [port] //啓動weinre

例：weinre --boundHost 10.69.69.103
有nodejs開發環境的配置到這就能使用了，Java開發環境下的配置方法本身百度吧

第二步：

瀏覽器訪問：http://10.69.69.103:8080/出現如下頁面，說明安裝成功

將Target Script中給的地址放到你須要調試的頁面中，而後訪問debug client(debug client user interface:http://10.69.69.103:8080/client/#anonymous)
狀況一：單獨調試一個文件，如圖所示

 

狀況二：沒法訪問app裏webview的頁面

缺點：wenire 須要插入一段代碼，在線上調試比較難

 spy-debugger

特性

一、頁面調試＋抓包

二、操做簡單，無需USB鏈接設備

三、支持HTTPS。

四、spy-debugger內部集成了weinre、node-mitmproxy、AnyProxy。

五、自動忽略原生App發起的https請求，只攔截webview發起的https請求。對使用了SSL pinning技術的原生App不形成任何影響。

六、能夠配合其它代理工具一塊兒使用(默認使用AnyProxy) (設置外部代理)

安裝

Windows 下

npm install spy-debugger -g

Mac 下

sudo npm install spy-debugger -g

啓動Spy-debugger

Spy-debugger

注意事項

第一步：手機和PC保持在同一網絡下（好比同時連到一個wifi下）

第二步：命令行輸入spy-debugger，按命令行提示用瀏覽器打開相應地址 http://127.0.0.1:56591/

第三步：設置手機的HTTP代理，代理IP地址設置爲PC的IP地址，端口爲spy-debugger的啓動端口（默認端口：9888）

①　Android設置代理步驟：設置 - WLAN - 長按選中網絡 - 修改網絡 - 高級 - 代理設置 - 手動

②　iOS設置代理步驟：設置 - 無線局域網 - 選中網絡 - HTTP代理手動

第四步：用手機瀏覽器訪問你要調試的頁面便可，舉例說明：

 

手機展現如圖

 

 

自定義選項

端口（默認端口：9888）

Spy-debugger -p 8888  //設置手機配置代理端口

設置外部代理（默認使用AnyProxy）

Spy-debugger -e http://127.0.0.1:8888【平時用不到設置外部代理，使用Spy-debugger已足夠用】

spy-debugger內置AnyProxy提供抓包功能，可是也可經過設置外部代理和其它抓包代理工具一塊兒使用，如：Charles、Fiddler。

頁面編輯模式

啓動命令：spy-debugger -w true

  編輯後  

 

是否容許weinre監控iframe加載的頁面（默認false）

Spy-debugger -i true

是否只攔截瀏覽器發起的https請求（默認true）

Spy-debugger -b false

有些瀏覽器發出的connect請求沒有正確的攜帶userAgent，這個判斷有時候會出錯，如UC瀏覽器。這個時候須要設置爲false。大多數狀況建議啓用默認配置：true，因爲目前大量App應用自身（非WebView）發出的請求會使用到SSL pinning技術，自定義的證書將不能經過app的證書校驗。

是否容許HTTP緩存（默認false）

spy-debugger -c true

spy-debugger原理是集成了weinre，簡化了weinre須要給每一個調試的頁面添加js代碼。spy-debugger原理是攔截全部html頁面請求注入weinre所須要的js代碼。讓頁面調試更加方便。建議使用spy-debugger比較方便。