ONE:Firebug:
Firebug是網頁瀏覽器 Mozilla Firefox下的一款開發類插件, 現屬於Firefox的五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體,是開發 JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀,從各個不同的角度剖析Web頁面內部的細節層面, 給Web開發者帶來很大的便利。例如 Yahoo! 的網頁速度優化建議工具 YSlow。
Firebug也是一個除錯工具。用戶可以利用它除錯、編輯、甚至刪改任何網站的 CSS、HTML、DOM以及JavaScript代碼,下面給大家介紹下Firebug的詳細使用方法:
方法/步驟
-
對於網頁開發人員來說,Firebug是Firefox瀏覽器中最好的插件之一,
也可以說Firebug的CSS調試器是專為網頁設計師們量身定做的;那么如何安裝firebug呢?首先進入瀏覽器的
-
進入附加組件之后,然后在搜索框中搜索Firebug附加組件,找到之后安裝即可,安裝完成后重啟瀏覽器就行了,如下圖所示:
-
下面來說說Firebug的詳細使用方法,Firebug可以隨時編輯頁面:
在HTML標簽中,點擊窗口上方的“inspect”命令,然后再選擇頁面中的文本節點,你可以對其進行修改,修改結果會馬上反應在頁面中。
-
Firebug有6個主要的Tab按鈕,本經驗將主要介紹這幾方面的功能,下面說的是Console 控制台:
-
Fire的查看和修改HTM代碼功能:
利用Inspect檢查功能,我們還可以用鼠標在頁面中直接選擇一些區塊,查看相應的HTML源代碼和CSS樣式表,真正的做到所見即所得,如果你使用了外部編輯器修改了當前網頁,可以點擊Firebug的reload圖片重新載入網頁,它會繼續跟蹤你之前用Inspect選中的區塊,方便調試。
-
Firebug的DOM功能:
該功能主要用於查看頁面DOM信息,通過提供的搜索功能實現DOM的快速准確定位,並可雙擊來實現DOM節點屬性或值的修改。
-
Firebug的腳本(Javascript)功能:
腳本功能主要是一個腳本調試器,可以進行單步調試、斷點設置、變量查看等功能,同時通過右邊的監控功能來實現腳本運行時間的查看和統計,提高運行效率。
-
Firebug的網絡(Net)功能:該標簽功能主要用來監控網頁各組成元素的運行時間的信息,方便找出其中運行時間較慢的部分,進一步優化運行效率。
-
使用Firebug插件在附加組件中打開Firebug啟用開關,啟用開關默認未開,如果未打開此功能,那么很可能會出現點擊后Firebug插件無效的情況;
使用firefox進行網絡抓包:抓包工具,目的就是用它分析網絡數據包的內容,無論是POST數據還是GET數據。想要寫個網絡蜘蛛,網站登陸輔助程序之類是離不開抓包工具的。今天介紹一款免費的抓包工具:Firebug。
准備:安裝了firebug的火狐瀏覽器。
-
打開火狐瀏覽器,點擊右上角Firebug的圖標。

-
啟用Firebug,進入控制台。

-
點擊旁邊的網絡。

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


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

-
TWO:httpwatch
-
httpwatch抓包工具的使用方法
- |
- 瀏覽:5286
- |
- 更新:2013-05-20 20:19
火狐瀏覽器下有著名的httpfox,而HttpWatch則是IE下強大的網頁數據分析工具。這個工具到底有哪些具體功能呢?這個我就不再贅述了,百度百科上列的很全面,但也比較抽象。我只想說我曾經用這個工具去分析QQ農場的數據包,根據數據包制作輔助工作(當然只是純技術研究,未對游戲商造成任何不好影響),教程最后會提供一下擴展閱讀,對網頁游戲輔助工具制作感興趣的朋友可以感受下。
方法/步驟
-
第一步當然是先下載本教程的主角:HttpWatchPro-v6.014。
下載安裝。。。
-
打開HttpWatch
話說這個HttpWatch,只支持IE,我不怎么使用IE,但是為了抓包,只好忍... 打開IE,可以按下圖的操作,打開HttpWatch,圖中分別截取的是IE8、IE9下的工具位置,不同版本的瀏覽器,這個工具的具體位置可能不同,各位仔細找找。
-
正式開始抓包!
我們來抓什么呢?就從最簡單的開始,我們來抓一個,農場挖地的包 先用IE登陸qzone.qq.com(這個...人人皆知) 輸入帳號密碼登陸,進入農場
先按下HttpWatch的 這個Record按鈕,開始截取!當然,抓其他包也一樣,順序是
抓包=>Record->執行動作->Stop->包就抓好了(見本步驟第一張圖)
至於那個Stop,后面會講到,主要為了防止抓去多余的數據包影響分析數據
我們來鏟掉任意一塊地(不是我狠心,如果你想做輔助工具,就按我的去做吧,之后還會介紹制作的方法)
(見本步驟第二張圖)
鏟掉以后,馬上點擊 Stop 這個按鈕
停止抓包,你是不是會驚奇地發現- -!數據出來了!
(見本步驟第三張圖)
沒錯,這就是大家夢寐以求的數據!下一步,來分析這些數據! -
分析數據!
既然是分析,就每一項都要看到 先看"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代表有 -
制作輔助!
這里要用到工具貓魔盒了! 我們先寫界面代碼 創建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工作流程編輯
(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請求和響應視圖。同類的工具有: httpwatch, firebug, wireshark。 -






















