whistle,用於實現跨平台的web調試的代理工具,是基於Node實現的,它采用類似配置系統hosts的方法,可以用於查看、修改HTTP、HTTPS、Websocket的請求、響應,還可以作為HTTP代理服務器使用。在whistle里,一切操作都可以通過配置來實現。
whistle參考文檔地址:http://wproxy.org/whistle/
以下為whistle的一些常用操作:
1.設置host
www.ifeng.com 127.0.0.1/127.0.0.1:8080
#or
127.0.0.1:8080 www.ifeng.com
釋義:把www.ifeng.com的請求轉發到本地/本地8080端口
2.本地替換
www.ifeng.com file://E:\xx\test
#or
www.ifeng.com file://E:\xx\test\index.html
釋義:訪問http://www.ifeng.com,或先嘗試加載/E:\xx\test的文件,如果不存在,會加載E:\xx\test\index.html,如果沒有對應的文件,則返回404
3.請求轉發
www.ifeng.com www.aliexpress.com
1
釋義:把www.ifeng.com域名下的請求都替換成對應的www.aliexpress.com的域名
4.注入HTML、JS、CSS
www.ifeng.com html://E:\xx\test\test.html
www.ifeng.com js://E:\xx\test\test.js
www.ifeng.com css://E:\xx\test\test.css
釋義:所有www.ifeng.com域名下的請求,whistle都會根據響應類型,將處理好的文本注入到響應內容里面,如果是HTML請求,JS和CSS會分別自動加上script和style標簽后,追加到內容后面
5.調試遠程頁面
利用whistle提供的weinre和log兩個協議,實現修改遠程頁面DOM結構和自動捕獲頁面JS錯誤及console打印的信息,還可以在頁面頂部或JS底部注入制定的腳本調試頁面信息
weinre: www.ifeng.com weinre://test
log: www.ifeng.com log://{test.js}
6.設置手機代理
可以通過手機端,設置相關代理,進行小程序、APP等的調試。
使用示例
項目中真實域名的代理,配置如下:
http://test-whistle-page/queryData http://127.0.0.1:8080/queryData
http://test-whistle-page http://127.0.0.1:8080
以上配置的意思是:
第一行配置服務端訪問:如果在http://test-whistle-page域名下,訪問了帶queryData的接口,那么會把這個請求轉發到127.0.0.1:8080服務器,並訪問這台服務上的 http://127.0.0.1:8080/queryData接口,這里127.0.0.1:8080是使用的本地ip和端口號,可以修改成服務部署的Ngix等。
第二行配置客戶端訪問,當訪問到http://test-whistle-page這個域名,這個域名的相關請求會轉發到本地啟動的服務上,即可以通過這種代理的方法,訪問測試/生產環境,並且在本地進行調試。這里的ip和端口號同①中服務器的配置。