網頁設計進階工具-Fiddler

2007-12-21 16:54:00 by: joooooohs

Fiddler 算是微軟的一個「地下產品」。
這軟體是免費的、不太推廣、也不掛Micorsoft LOGO。
不過只有Windows可以用，尚不支援mac。

Fiddler 基本上是一套Debug軟體，他可以會監測我們「看網站」的時候，究竟讀取了哪些網頁，跟哪些程式互動了，load 了哪些圖片、Flash、JavaScript、影片、CSS。Fiddler 也可以偵測你的瀏覽器和遠端主機互相傳遞(send or load)了哪些資料欄位。

除了Debug的功用之外，換個思路，就可以幫設計師做到一些怪怪的事情。

例如：
1. 抓Flash:
很多Load 來 Load去的Flash網站，你原本只能抓到一個最外層的swf，但現在可以把那些「看的到、但抓不到」的swf全部抓下來。

2. 抓JS,CSS:
不用看HTML原始碼，就知道某網站用了哪些JavaScript、CSS。

3. 抓FLV:
不用看原始碼，就把無名影音或是Youtube的影片(flv)抓回來。
4. 抓圖:
Flash裡頭Load的圖檔。

5. 輕鬆解決網頁設計時的「路徑問題」，尤其是跨網域或是目錄很多層，又有html又有flash的時候。

步驟是：
1. 打開IE (Chrome、Firefox應該也支援了)。
按下Fiddler的按鈕。(可以從Rules\ Hide Images選項，關掉gif,jpg等圖片的紀錄)
2. 進入你要監測的網站。
3. Fiddler 的視窗上面，會出現該網站全部的Session紀錄。(如下圖)
4. 無論你做什麼動作，IE 瀏覽器讀取過哪些程式或flash，都會給你網址。

左邊小圖示會告訴你相關的檔案類型，還有結果的http代碼(例如404是找不到檔案)

自己試試。http://www.fiddlertool.com/fiddler/
Debug功能我不說了，程式設計師才會用到。

必須安裝.net framework才能啟動fiddler
http://www.microsoft.com/downloads/details.aspx?FamilyID=0856eacb-4362-4b0d-8edd-aab15c5e04f5&DisplayLang=zh-TW

除了Firbug之外，Firebug這工具也是我寫程式或研究別人網站時所必備的。

--------------------------------------------------------
- No.7 : ) 說:
好多東西學不完@@" 凹嗚嗚

joooooohs-西街少年要服老了說:
這不用學了，灌就好了哈哈

- No.7 : ) 說:
有這麼容易喔

joooooohs-西街少年要服老了說:
例如一個網站，用index.swf 去load 7-8個swf 單元，一般我們抓不到

但是這軟體會把index.swf 去load的每一個swf, 把URL秀給你

« 2007 » « December »
Su	Mo	Tu	We	Th	Fr	Sa
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

桑河數位科技blog

會員登入

搜尋

文章分類

行事曆

最新文章

最新回應看全部

本站統計

連結

網頁設計進階工具-Fiddler

★ 我要留言 (不須登入)
表情符號允許 UBB Codes 自動轉換網址顯示表情符號	暱稱： * 必填驗證碼： * 必填. 填入左側的數字 Email：網址：私密留言

帳號:
密碼: