[轉]web調試工具總結(firebug/fidder/httpwatch/wireshark)


ONE:Firebug:

Firebug是網頁瀏覽器 Mozilla Firefox下的一款開發類插件, 現屬於Firefox的五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體,是開發 JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀,從各個不同的角度剖析Web頁面內部的細節層面, 給Web開發者帶來很大的便利。例如 Yahoo! 的網頁速度優化建議工具 YSlow。

     Firebug也是一個除錯工具。用戶可以利用它除錯、編輯、甚至刪改任何網站的 CSS、HTML、DOM以及JavaScript代碼,下面給大家介紹下Firebug的詳細使用方法:

 

工具/原料

  • FIrebug調試工具

  • 火狐瀏覽器、谷歌瀏覽器或者其他支持Firebug的瀏覽器皆可​

方法/步驟

  1. 對於網頁開發人員來說,Firebug是Firefox瀏覽器中最好的插件之一,

    也可以說Firebug的CSS調試器是專為網頁設計師們量身定做的;那么如何安裝firebug呢?首先進入瀏覽器的

     

     

     

  2. 進入附加組件之后,然后在搜索框中搜索Firebug附加組件,找到之后安裝即可,安裝完成后重啟瀏覽器就行了,如下圖所示:

     

     

  3. 下面來說說Firebug的詳細使用方法,Firebug可以隨時編輯頁面:

    在HTML標簽中,點擊窗口上方的“inspect”命令,然后再選擇頁面中的文本節點,你可以對其進行修改,修改結果會馬上反應在頁面中。

     

     

  4. Firebug有6個主要的Tab按鈕,本經驗將主要介紹這幾方面的功能,下面說的是Console 控制台:

     

     

  5. Fire的查看和修改HTM代碼功能:

    利用Inspect檢查功能,我們還可以用鼠標在頁面中直接選擇一些區塊,查看相應的HTML源代碼和CSS樣式表,真正的做到所見即所得,如果你使用了外部編輯器修改了當前網頁,可以點擊Firebug的reload圖片重新載入網頁,它會繼續跟蹤你之前用Inspect選中的區塊,方便調試。

     

     

  6. Firebug的DOM功能:

    該功能主要用於查看頁面DOM信息,通過提供的搜索功能實現DOM的快速准確定位,並可雙擊來實現DOM節點屬性或值的修改。

     

     

  7. Firebug的腳本(Javascript)功能:

    腳本功能主要是一個腳本調試器,可以進行單步調試、斷點設置、變量查看等功能,同時通過右邊的監控功能來實現腳本運行時間的查看和統計,提高運行效率。  

     

     

     

  8. Firebug的網絡(Net)功能:該標簽功能主要用來監控網頁各組成元素的運行時間的信息,方便找出其中運行時間較慢的部分,進一步優化運行效率。

     

     

  9. 使用Firebug插件在附加組件中打開Firebug啟用開關,啟用開關默認未開,如果未打開此功能,那么很可能會出現點擊后Firebug插件無效的情況;

     

     

    使用firefox進行網絡抓包:

    抓包工具,目的就是用它分析網絡數據包的內容,無論是POST數據還是GET數據。想要寫個網絡蜘蛛,網站登陸輔助程序之類是離不開抓包工具的。今天介紹一款免費的抓包工具:Firebug。

     

    准備:安裝了firebug的火狐瀏覽器。

     

    1. 打開火狐瀏覽器,點擊右上角Firebug的圖標。

    2. 啟用Firebug,進入控制台。

    3. 點擊旁邊的網絡。

    4. 啟用網絡面板。訪問需要分析的頁面。網絡面板已經把所有的POST和GET請求都記錄了下來,包括圖片,JS等等,當然有些對我們寫代碼來說是沒有用的,firebug已經幫我們標為灰色的了,一般情況下我們只需要分析黑體的請求。

       

       

    5. 這里舉個例子。點開黑色的get請求,可以查看具體信息,包括頭信息,相應,緩存,cookie等。可以對其進行分析了。

    6. TWO:httpwatch

    7. httpwatch抓包工具的使用方法

      • |
      • 瀏覽:5286
      • |
      • 更新:2013-05-20 20:19

      火狐瀏覽器下有著名的httpfox,而HttpWatch則是IE下強大的網頁數據分析工具。這個工具到底有哪些具體功能呢?這個我就不再贅述了,百度百科上列的很全面,但也比較抽象。我只想說我曾經用這個工具去分析QQ農場的數據包,根據數據包制作輔助工作(當然只是純技術研究,未對游戲商造成任何不好影響),教程最后會提供一下擴展閱讀,對網頁游戲輔助工具制作感興趣的朋友可以感受下。

      工具/原料

      • HttpWatchPro-v6.014

      • 工具貓魔盒

      方法/步驟

      1. 第一步當然是先下載本教程的主角:HttpWatchPro-v6.014。

        下載安裝。。。

      2. 打開HttpWatch

        話說這個HttpWatch,只支持IE,我不怎么使用IE,但是為了抓包,只好忍... 打開IE,可以按下圖的操作,打開HttpWatch,圖中分別截取的是IE8、IE9下的工具位置,不同版本的瀏覽器,這個工具的具體位置可能不同,各位仔細找找。

         

      3. 正式開始抓包!

        我們來抓什么呢?就從最簡單的開始,我們來抓一個,農場挖地的包 先用IE登陸qzone.qq.com(這個...人人皆知) 輸入帳號密碼登陸,進入農場
        先按下HttpWatch的  這個Record按鈕,開始截取!當然,抓其他包也一樣,順序是
        抓包=>Record->執行動作->Stop->包就抓好了(見本步驟第一張圖)
        至於那個Stop,后面會講到,主要為了防止抓去多余的數據包影響分析數據
        我們來鏟掉任意一塊地(不是我狠心,如果你想做輔助工具,就按我的去做吧,之后還會介紹制作的方法)
        (見本步驟第二張圖)
        鏟掉以后,馬上點擊 Stop 這個按鈕
        停止抓包,你是不是會驚奇地發現- -!數據出來了!
        (見本步驟第三張圖)
        沒錯,這就是大家夢寐以求的數據!下一步,來分析這些數據!

      4. 分析數據!

        既然是分析,就每一項都要看到 先看"Overview"這一項
        (見本步驟第一張圖)
        最重要的數據,就是我用紅框框起來的,這個是要post到的地址!所謂post,也就是請求,就是向騰訊的服務器發送一個請求,他會給你相對的回應,達到模擬操作農場的目的 這可是最最重要,如果沒這個地址,就算你有再強的東西,也發不出去! "Time Chart"無視- -! 接下來,看"Headers",這個叫做"標頭",里面是一些重要的數據 可是,好像在js里面,這些數據都被封裝了! 但是,我寫C#的時候 Content-Type\Cookie\Referer這些東西都是要手動去添加的 方便就是方便,繼續向下看 "Cookies"不必我多說,這是詳細分析cookie數據的
        (見本步驟第二張圖)
        筆直看到"postData",這個可是一大要點啊! 這是要Post的數據,讓我們來分析一下下! 如果抓到的包是post類型,就都會有這些數據,還有一種類型是get,這里不做介紹.
        (見本步驟第三張圖)
        我把數據列舉出來 cropStatus 0 farmKey fbbae8559ebc4f62f3d2b597141464b8 //這個是根據farmTime計算出來的 farmTime 1279757891 //這個是操作的時間,好像精確到了毫秒 ownerId 361410091 //這是ID place 17 //這個是第幾塊地 是從0開始數的 17其實是17+1=第18快地! uIdx 361410091 //同樣是ID uinY 361429651 //這個是你的QQ 再看到content,這個是返回數據!
        (見本步驟第四張圖)
        我們把數據拿來分析,稍微懂一點英語,就能看懂! {"code":1,"direction":"","exp":0,"farmlandIndex":17,"levelUp":false} code代表操作類型,1就肯定是鏟除了 direction這個,我也不知道代表什么,反正是空的! exp代表增加的經驗,因為我的作物還沒有成熟,所以得到的經驗是0! farmlandIndex也就是代表多少塊地,farm:農場land:陸地Index:索引 levelUp也就代表是否升級,false代表沒有,true代表有

      5. 制作輔助!

        這里要用到工具貓魔盒了! 我們先寫界面代碼 創建main.htm,用記事本打開即可 代碼為:

        <html>

        <head>

        <script type="text/javascript" src="./lib/gnbox.js" title="魔盒核心庫"></script>

        <script type="text/javascript" src="./lib/cn.js" title="魔盒中文化庫"></script>

        <script type="text/javascript" src="./lib/md5.js" title="MD5加密函數"></script>

        <script type="text/javascript" src="./lib/qqapp.js" title="QQ常用函數庫"></script>

        </head>

        <body>

        <div id="qqlogin">當前登錄QQ:<span id="cqq"></span></div>

        <input type="button" value="鏟除" onclick="action((tt1).value)"></input>

        //點擊這個按鈕,就執行action這個函數,他的參數為tt1的內容,也就是,下面的輸入框,代表鏟除多少塊地

        <input id="tt1" type="text" value="18"></input>

        <script type="text/javascript">

        installXMLHTTP();

        /*讓用戶安裝xmlhttp 5.0*/

        var qq=getqq();

        /*獲取QQ號碼*/

        $("cqq").innerHTML=qq;

        /*設置 id="cqq" 的東西的內容 等於 qq*/

        </script>

        <!--程序界面代碼開始-->

        <div style="width:100%;padding:10px;">

               塊地

        </div>

        <!--程序界面代碼結束-->

        <script type="text/javascript" src="./main.js" title="程序主要JS"></script>

        </body>

        </html>

         

        核心代碼,打開main.js編輯 寫入 action函數,

        function action(place)

        {

        var uId ;

        //用戶id

        var time = new Date().getTime();

        time = Math.floor(time/1000);

        //這兩句是算farmTime的,具體算法我也不清楚,gn說一個十位數,然后把算法給我了!

        var key = getkey2(parseInt(time));

        //這是qqapp.js里的一個函數,取farmKey,注意,getkey1是第一版農場,2才是最新版本

        var index = parseInt(place) - 1;

        //這是代表鏟除的地,我給大家說過,post的時候,這個是從0開始計數的!所以,我們要減去1

        var qq = getqq();

        //這個不多說,取到用戶的qq

        if(place == "")

        {

        alert("請輸入第幾塊地!");

        return null;

        }

        //這幾句是異常處理,如果輸入的是一個空東西,就會彈出提示,然后返回空.如果不加,會報錯的!

        Net.post("http://nc.qzone.qq.com/cgi-bin/cgi_farm_index",{

        "mod" : "user",

        "act" : "run",

        "farmKey" : "85f004b176ec8fdb332a27422b145a02",

        "farmTime" : "1258167411"

        },function(rs){

        var $rs=eval("("+rs+")");

        uId=$rs.user.uId;

        }

        )

        //這個是取用戶的數據,大家post就知道,返回的是一大堆的東西,用alert只能彈出一部分,我推薦大家用write寫出,

        我們只需要uId= xxxx,因為在發送的時候,需要uId,var $rs=eval("("+rs+")");這一句是說,把返回的內容轉換為json數據

        uId=$rs.user.uId;這個不要多說了吧,為uId這個變量賦值,為返回數據user這一部分的uId

        Net.post("http://nc.qzone.qq.com/cgi-bin/cgi_farm_plant?mod=farmlandstatus&act=scarify",{

        "cropStatus" : 0,

        "farmKey" : key,

        "farmTime" : time,

        "ownerId" : uId,

        "place" : index.toString(),

        "uIdx" : uId,

        "uinY" : qq

        },function(返回){

        alert(返回);

        })

        //這就是發送鏟地的數據了

        }

         

        以上代碼僅作參考。看看效果圖

        Three:wireshark

      Wireshark工作流程編輯

      (1)確定Wireshark的位置。如果沒有一個正確的位置,啟動Wireshark后會花費很長的時間捕獲一些與自己無關的數據。
      (2)選擇捕獲接口。一般都是選擇連接到Internet網絡的接口,這樣才可以捕獲到與網絡相關的數據。否則,捕獲到的其它數據對自己也沒有任何幫助。
      (3)使用捕獲過濾器。通過設置捕獲過濾器,可以避免產生過大的捕獲文件。這樣用戶在分析數據時,也不會受其它數據干擾。而且,還可以為用戶節約大量的時間。
      (4)使用顯示過濾器。通常使用捕獲過濾器過濾后的數據,往往還是很復雜。為了使過濾的數據包再更細致,此時使用顯示過濾器進行過濾。
      (5)使用着色規則。通常使用顯示過濾器過濾后的數據,都是有用的數據包。如果想更加突出的顯示某個會話,可以使用着色規則高亮顯示。
      (6)構建圖表。如果用戶想要更明顯的看出一個網絡中數據的變化情況,使用圖表的形式可以很方便的展現數據分布情況。
      (7)重組數據。Wireshark的重組功能,可以重組一個會話中不同數據包的信息,或者是一個重組一個完整的圖片或文件。由於傳輸的文件往往較大,所以信息分布在多個數據包中。為了能夠查看到整個圖片或文件,這時候就需要使用重組數據的方法來實現。

    Four: fiddler

    Fiddler支持 斷點調試技術,當你在 軟件菜單—rules—automatic breakpoints選項選擇before request,或者當這些請求或響應屬性能夠跟目標的標准相匹配,Fiddler就能夠暫停Http通訊,並且允許修改請求和響應。這種功能對於 安全測試是非常有用的,當然也可以用來做一般的 功能測試,因為所有的代碼路徑都可以用來演習。
    通過顯示所有的Http通訊,Fiddler可以輕松地演示哪些用來生成一個頁面,通過統計頁面(就是Fiddler左邊的那個大框)用戶可以很輕松地使用多選,來得到一個WEB頁面的“總重量”(頁面文件以及相關js,css等)你也可以很輕松地看到你請求的某個頁面,總共被請求了多少次,以及多少字節被轉化了。
    用戶可以加入一個Inspector 插件對象,來使用.net下的任何語言來編寫Fiddler擴展。RequestInspectors 和 ResponseInspectors提供一個格式規范的,或者是被指定的(用戶自定義)Http請求和響應視圖。
    另外,通過暴露HTTP頭,用戶可以看見哪些頁面被允許在 客戶端或者是代理端進行緩存。如果要是一個響應沒有包含Cache-Control 頭,那么他就不會被 緩存客戶端[1]  
    同類的工具有: httpwatch, firebug, wireshark。

     


免責聲明!

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



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