網頁設計進階工具-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秀給你
[上一次編輯 by joooooohs, 於 2012-04-23 11:15:11]

★ 我要留言 (不須登入)
表情符號
[smile] [confused] [cool] [cry]
[eek] [angry] [wink] [sweat]
[lol] [stun] [razz] [redface]
[rolleyes] [sad] [yes] [no]
[heart] [star] [music] [idea]
允許 UBB Codes
自動轉換網址
顯示表情符號
暱稱:
* 必填
驗證碼:
驗證碼 * 必填. 填入左側的數字
Email:

網址:

 
引用 vincehon | |
[ 2008-04-15 20:58:00 ]
Hi, my name is Vince Hon, Web Design & Developer lover, I'm impressed with your personal blog about web design.

I would like to invite you to become our author to contribute articles or news about "Web Design" to our I.T. Knowledge-Base. http://www.hksilicon.com/kb (support English and Traditional / Simplified Chinese)

This is my article as an example: http://www.hksilicon.com/kb/articles/2/1/10-Essential-SEO-Tips/Page1.html

You can add your blog's link as a Bio in your article, so that more user can visit your personal website.

Author Registration page:
http://www.hksilicon.com/kb/pages/Become-Author.html

Looking forward to hearing from you.
引用 joooooohs | |
[ 2008-04-15 21:41:00 ]
vincehon thx. I'll try it.
引用 joooooohs | |
[ 2008-06-23 12:58:00 ]
XUE。謝謝
引用 kimi | |
[ 2009-06-13 21:54:00 ]
請問像http://ken-on.channel.yahoo.co.jp/index.php?itemid=38
日本的一些影片都抓不下,Fiddler抓得下來嗎?
因為我用了Fiddler也找不到swf檔的網址…

再請問如果找到網址後,如何存檔到桌面呢?
因為都英文>"<
謝謝!
引用 kimi | |
[ 2009-06-14 16:01:00 ]
你好,上面那條網址我已經找到swf檔,也另存好了
現在發現另一個網頁裡的影片都沒有swf檔耶
http://ch.panasonic.co.jp/index.html?contents=01609

還有這個網頁的flash檔是不是也沒辦法抓下來呢?
http://panasonic.jp/mobile/docomo/p07a/special/

謝謝
1

>>>>>>>>>>