fiddler調式使用(一)深入研究
閱讀目錄
<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4623317.html#_labe0">fiddler的基本概念</a>
<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4623317.html#_labe2">如何安裝fiddler</a>
<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4623317.html#_labe3">了解下fiddler使用者界面</a>
<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4623317.html#_labe4">了解不同圖示和顔色的含義</a>
<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4623317.html#_labe5">web session的常用的快捷鍵</a>
<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4623317.html#_labe6">了解web session上下文菜單</a>
<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4623317.html#_labe7">fiddler如何捕獲firefox中的會話</a>
<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4623317.html#_labe8">fiddler如何捕獲https會話</a>
<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4623317.html#_labe9">fiddler的http統計視圖</a>
<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4623317.html#_labe10">移動開發如何使用fiddler調式代碼</a>
fiddler的基本概念
fiddler是一款基于windows系統的代理伺服器軟體本地運作的程式比如web浏覽器及其他用戶端的應用程式可以把http和https請求發送給fiddlerfiddler通常把這些請求轉發給web伺服器伺服器将這些請求的響應傳回給fiddlerfiddler再把響應轉發給用戶端。
fiddler 是以代理web伺服器的形式工作的,它使用代理位址:127.0.0.1, 端口:8888. 當fiddler會自動設定代理 退出的時候它會自動登出代理這樣就不會影響别的程式。如果fiddler非正常退出這時候因為fiddler沒有自動登出會造成網頁無法通路。解決的辦法是重新啟動下fiddler即可。
安裝fiddler
安裝fiddler之前需要安裝.net framework 我目前的安裝的是fiddler4是以我下載下傳安裝的是.net framework4如下所示
安裝fiddler和安裝一般的軟體沒有什麼差別這裡就不介紹~~
了解下fiddler使用者界面
我這邊是fiddler4的界面如下
在fiddler中web session界面中捕獲到http請求如下所示
web session清單蘭中包含了一些資訊如下
了解不同圖示和顔色的含義下面是常見的
web session的常用的快捷鍵
ctrl+a 選中所有的session
esc: 取消選中所有的session
ctrl+i 反向選中如果session已選中則取消否則選中
ctrl+x 删除所有的session
delete 删除選中的session
shift+delete 删除所有未選中的session
r 重新執行目前請求
shift+r 多次重複執行目前請求
u 無條件重新執行目前請求發送不包含if-modified-since 和 if-none-match的請求頭
shift+u 無條件地多次重複執行目前請求。
alt+enter 檢視目前session的屬性
insert切換是否用紅色粗體标記選中的session
m 給選中的session添加描述
了解web session上下文菜單
我們來點選session一項後右鍵菜單會出現如下所示
autoscroll session list選項用于決定fiddler是否會自動把新增的session添加到web session清單中。
我們先來了解下 copy菜單項的一些session資訊如下
just url 把選中的session的url清單拷貝到剪貼闆每行一個url。如下我們定位到session中
當我們進行粘貼的時候看到是一個url位址如下所示
<a target="_blank" href="http://www.telerik.com/updatecheck.aspx?isbeta=false">http://www.telerik.com/updatecheck.aspx?isbeta=false</a>
上面可以看到我們還可以使用快捷鍵ctrl+u 實作
this column: 拷貝選中session菜單所在列的文本如下
到我們拷貝完成的時候進行粘貼的時候可以看到如下文本
http
terse summary把選中的session的簡要說明複制到剪貼闆中簡要說明中包括請求方法url響應的狀态碼及狀态資訊如果響應是http/3xx重定向文本中也會包括響應頭中location字段的内容如下所示
當我們進行粘貼的時候可以看到如下資訊
get http://www.telerik.com/updatecheck.aspx?isbeta=false
200 ok (text/plain)
當然如上也可以使用快捷鍵
headers only 把session的請求頭複制到剪貼闆中既可以以純文字格式也可以以html格式複制。如下
粘貼如下
get http://www.telerik.com/updatecheck.aspx?isbeta=false http/1.1
user-agent: fiddler/4.5.1.2 (.net 4.0.30319.1026; winnt 6.1.7601 sp1; zh-cn; 2xx86)
pragma: no-cache
accept-language: zh-cn
referer: http://fiddler2.com/client/4.5.1.2
host: www.telerik.com
accept-encoding: gzip, deflate
connection: close
http/1.1 200 ok
cache-control: private
content-type: text/plain; charset=utf-8
content-encoding: gzip
vary: accept-encoding
server: microsoft-iis/7.5
set-cookie: sid=jeler5vxx0gyb7fw53ncxaobr7bcbb+ortlpxuq2iuvsiqp1uosguo2dlc4hoxbgeq5ylfg959jrykol5zx33nbvhffck3uqdbwh5xaprigiso9kjovdhf6ip/udevllywb43itzciaznksxdenidrb3lvo=; expires=wed,
02-jul-2025 01:56:29 gmt; path=/
access-control-allow-origin: http://converter.telerik.com
date: sun, 05 jul 2015 01:56:29 gmt
content-length: 447
session: 把整個session清單複制到剪貼闆中支援以純文字和html這兩種格式進行複制。如下
粘貼結果如下
?
?`i?%&/m?{j?j??t??`?@??????ig#)?*??eve]f@????{???{???;?n'????\fdl??j??!????~|?"????o??????o???w?{??>??wwog?????@??????ig#)?*??eve]f@????{???{???;?n'????\fdl??j??!????~|?"????o??????o???w?{??>??wwog????=[???2o_f?y??d?v]?i?xuu??g?f?o?n????z7?d}q^???#
~'????=?_?????i??o???k???z?.?u??
7}???6[?7? }?-[|:o???w'eu???xz-???uwu5msw????????w??n????v???f???????q?{~????_????q?f????i??????-?ez??-}:????gosb?x^?we;o? ???i??u?]fe?m?|?'??^????m?u?pv?*?'d?4?.???b????4g?ykf?(?s????w???
response datauri :響應資訊的datauri
截圖如下
資訊如下
data:text/plain;base64,h4siaaaaaaaeao29b2acszylji9tynt/svvk1+b0oqiaybmk2jbaeozbim3mkuwdaucjkasqgcplvmvdzhzazo2dvpfee++999577733ujudtif33/8/xgzkawz2zkrayz4hgkrihz9+fb8/ivz/4+t+b5zs/sbj3m+c7i/vj3fhe+n3pr27d3dvz/f+93/jjd1brorqmk9fzto3ezuezkt2xedpsvhvdeu+n6vny2avt9uqbujtn8zqolo36wr9cv68y+kja34n/d7+3t36xwh/lr6pqrjjj9jvf/n6zwv64vv6hs7sl3x10wq3fb3k6jzb0jf0cn2rlvspfdpv29wju3cnzxxrjnu8zovi7xhale6ef7mz/xv3vtvtc3f3/vbo/vbeg7tx86zdbrax+dv2sdzwrtv72/e3iri/cfj7fvf0+cmxx5z+nr9x8maep6/zabwcpaezoi2qzvqdpy19oqmqt+lht3nc46jyxqrxrttpnwmoj9kiszfvvzpdzkwztcp8/bsnz/osxqaligiytap1y1bw2sqvj0tenkmunr76yvu8zvm0z+hza0amkojtjov/aef3j4a5aqaa
full summary 把web session清單中顯示的資訊複制到剪貼闆。如下
# result protocol host url body caching content-type process comments custom
1 200 http www.telerik.com /updatecheck.aspx?isbeta=false 447 private text/plain; charset=utf-8 fiddler:6500
save子菜單中包含了用于把流量儲存到檔案中的一些選項如下所示
selected sessions中的in archivezip 選項是把 web session清單中選中的session儲存到saz檔案中如下所示
selected sessions中的 as text是把選中的所有session一起儲存到一個文本檔案中如下
selected sessions中的as text(headers only) 把選中session的請求頭和響應頭一起儲存到一個文本檔案中下面還有很多選項我這邊就不一一介紹等用到某一項的時候我們再來介紹
fiddler如何捕獲firefox中的會話
fiddler啟動時預設是ie代理設定127.0.0.1:8888,其他浏覽器需要手動設定
firefox手動設定如下工具 –》選項 –》進階 –》網絡 –》設定
即可生效不過上面的設定比較麻煩我們可以安裝一個插件如下
firefox中安裝fiddlerhook插件
當我們安裝好fiddler後就已經安裝好了fiddlerhook插件了我們需要去firefox中啟用這個插件工具—》附加元件—》擴充—》fiddlerhook啟用
啟用即可然後我們需要在firefox中進行設定即可
我們再來看一下firefox手動設定如下工具 –》選項 –》進階 –》網絡 –》設定
我們可以再來安裝一個hostadmin插件即可友善檢視。
fiddler如何捕獲https會話
預設下fiddler不會捕獲https會話需要你設定下, 打開fiddler tool->fiddler options->https tab
彈出框後一直點選yes即可
fiddler的http統計視圖可以優化請求和頁面
fiddler的統計頁籤中顯示了目前session的基本資訊在頁籤的最上方顯示的是文本資訊最下方是個餅圖按mime類型顯示流量。使用statistics頁簽使用者可以通過選擇多個會話來得來這幾個會話的總的資訊統計比如多個請求和傳輸的位元組數。
選擇第一個請求和最後一個請求可獲得整個頁面加載所消耗的總體時間。從條形圖表中還可以分别出哪些請求耗時最多進而對頁面的通路進行通路速度優化。
如下所示
餅圖如下
統計頁籤的一些資訊含義如下解釋
request count 選中的session數
unique hosts 流量流向的獨立目标主機數。如果所有選中的流量都發送到相同的伺服器上則不會顯示該字段。
bytes sent: http請求頭和請求體中向外發送的位元組總數。後面括号中分别給出了頭和body各自的位元組數。
bytes received: http請求頭和請求體中接收到的所有位元組數。在全部計數後面的括号中給出了請求頭和請求體各自的位元組數。
requests started at: fiddler接收到的第一個請求的第一個位元組的時間點。
responses completed at: fiddler發送到用戶端的最後一個響應的最後一個位元組的時間點。
sequence(clock) duration: 第一個請求開始到最後一個響應結束之間的 “時鐘時間”。
aggregate session duration: 所有選中的session從請求到響應之間的時間的和。
dns lookup time: 所有選中的session解析dns所花費的時間的總和。
tcp/ip connect duration: 所有選中session建立tcp/ip連接配接所花費的時間總和。
https handshake duration 所有選中session在https握手上所花費的時間總和。
response codes 選中session中各個http響應碼的計數。
response bytes by content-type: 選中session中響應的各個content-type的位元組數。
estimated performance: 選中的流量在不同語種(local)地區和連接配接方式下所需時間的初步估計。
移動開發如何使用fiddler調式代碼
1. 首先電腦和手機要使用同一個無線網。
2. 配置fiddler點選 tools --> fiddler options
3. 手機端的配置我這邊是android手機(ios也一樣)點選設定進去選擇無線網如下
點選代理設定進去後如下
接下來可以看看我的ip位址如下
如上設定後我們就可以使用手機通路網頁後可以使用fiddler來監控請求或者替換js或者css檔案了
注意有時候我通路的頁面提示 “代理伺服器連接配接失敗”那麼這種情況下很有可能是防火牆或者一些360類似的防毒軟體我們可以在防火牆下設定為fiddler通過如下所示
4. 修改host
如上設定我們可以監聽頁面請求了但是如果我想要監聽本地的伺服器端的代碼就通路不了我本地使用的伺服器是php環境比如上我在本地做demo如果一切好的話我上傳到伺服器端去首先我們需要啟動php伺服器啟動好後我們來使用本機的ip來通路下如下所示
1. 我們需要在fiddler裡面修改配置tools –》 hosts如下
點選儲存按鈕後我們接着再通路頁面就可以通路了如下
頁面可以通路後有時候我們想替換下js或者css檔案我們就可以使用右側的tab選項欄中的autoresponder了如下
在最下面的可以替換一些js或者css檔案即可了這裡就不多介紹了~
如上是目前總結的一些基本fiddler基本知識點 在接下來的業餘時間會多去總結fiddler相關調式方面的知識點~ 如果總結的不好的話希望大家多多指教~~
總結fiddler基本知識點總結如上一些在接下來的時間會全面總結fiddler相關的含義我們平時用到的fiddler一些方面但是我們還需要多去了解其他各個方面的含義為以後使用代理http請求或者優化頁面有更好的了解是以我覺得有必要的多去學習下fiddler知識點~ 是以fiddler一直會有下文總結的~~
<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4637771.html">fiddler實戰請點選</a>