移動web調式利器---Rosin研究


移動web調式利器---Rosin研究

閱讀目錄

一:關於Rosin

   Rosin是Fiddler的一個插件,它能接受頁面中的JS的console.log輸出的值,將值持久存儲在本地,我們可以通過Fiddler代理來開發移動端頁面。

   更多關於Rosin的具體介紹,可以看如下鏈接:

http://www.alloyteam.com/2015/03/mobile-web-debug-tool-rosin/ 

如果我們使用的是Fiddler2的話,請下載如下:

Rosin  For Fiddler2

如果我們使用的是Fiddler4的話,請下載如下:

Rosin  For  Fiddler4

我們可以下載完成后,直接點擊下載完后的.exe文件進行安裝即可完成,安裝完成后,重寫打開Fiddler,我們可以看到Fiddler的選項卡中有Rosin選項卡;如下所示:

二: Rosin在Fiddler中如何使用

首先打開Fiddler,切換到Rosin選項卡中,然后點擊 add Rule按鈕后,打開規則添加面板如下:

可以看到如上下拉框,它支持三種類型的匹配方法,第一種默認是 域名匹配 如上所示;

第二種是路徑匹配,如下所示:

第三種是正則匹配,如下所示:

在匹配規則 Rule添加具體的規則即可,比如如上Type右邊有相應的提示,如何使用,我們目前使用的最多的是 域名(host)匹配;下面我們來具體看看域名匹配,我們首先在本地服務器下做一個demo;

1.  首先我們來添加Rule,點擊Add  Rule按鈕后,會彈出如下框:

進行如上配置即可;

2. 點擊ok按鈕后,變成如下:

現在我們需要在手機端訪問域名下 192.168.1.101下的頁面,在訪問頁面之前,我們需要如下設置即可:

如何使用手機調式移動端頁面,請點擊如下鏈接查看,還是和之前一樣設置即可:

http://www.cnblogs.com/tugenhua0707/p/4623317.html#_labe10

如上設置完成后,我們使用手機來訪問如下頁面:

假如我現在a.html頁面的JS代碼如下:

運行完成后,我們回到Fiddler,切換到Rosin的Log選項卡,選擇我們的測試頁面,查看日志;如下所示:

我們也可以進行一些復雜的對象輸出,JS代碼如下:

<script>

       var obj = {"a":1,"b":11,"c":'abc'};

        console.log(obj);

 </script>

 同樣我們進入頁面后運行下,然后我們使用Rosin選項卡的Log標簽來查看結果如下:

我們可以雙擊右鍵 ObjectC4AO  彈出JSON View,點擊此按鈕;

進入如下頁面查看

我們也可以切換到Text標簽內查看;如下所示:

等等查看效果,基本的 域名匹配如上所示;其他的匹配也是一樣的意思,而我們在頁面上調式使用到最多的是可以使用域名來匹配即可;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM