前端調試工具

 

Weinre

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

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, 若是頁面超過這個時間都沒有任何響應, 那麼就會斷開鏈接node

在有nodejs開發環境下配置: web

第一步:npm

安裝與服務啓動命令api

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比較方便。

相關文章
相關標籤/搜索