前端調試告別笨辦法

  筆者前一陣在作微信站項目的時候在調試的過程當中遇到了很多的問題，每次調試接口的時候都須要用console.log將數據打印出來，若是有時候想要修改接口數據還很不方便。針對上面調試的痛點，筆者對Fiddler的用法進行了簡單的學習，分享一下學習的心得。

介紹

  首先來介紹一下Fiddler。Fiddler是位於客戶端和服務器端的HTTP代理，也是目前最經常使用的http抓包工具之一 。 它可以記錄客戶端和服務器之間的全部HTTP請求，能夠針對特定的HTTP請求，分析請求數據、設置斷點、調試web應用、修改請求的數據，甚至能夠修改服務器返回的數據，功能很是強大，是web調試的利器。

  是的，你沒有看錯，Fiddler這貨竟然還能設置斷點。不只如此，Fiddler還能修改請求數據或者修改返回數據。這樣在調試的時候能夠隨意的將服務器的返回數據修改爲咱們想要的數據了。除此以外，Fiddler還可以攔截手機端的數據，可以看到手機端發送的請求和請求結果，不過要進行一個小小的設置。好了，介紹了這麼多，來看一下Fiddler的原理：

  既然Fiddler是客戶端和服務器端之間的代理，那麼客戶端全部發起的請求都會通過Fiddler，而後再發送到對應的服務器；一樣，服務器全部的響應數據也會通過Fiddler再發送到客戶端。

界面

  安裝完Fiddler，打開界面以下,整個界面能夠分爲五個部分：

1. 最上面的紅色區域是菜單欄，主要有保存/導入請求、自定義規則、設置選項等功能。
2. 中間的藍色區域是工具欄，針對當前請求的操做，包括清除請求、恢復斷點、查找請求。
3. 左側是請求數據的面板，全部Fiddler捕獲到的請求都會在這個面板裏，每個字段的含義以下圖所示。
4. 右側是數據統計的面板，咱們能夠在這邊看到每一個請求的詳細統計數據（包括請求頭、響應頭、響應主體、請求時間），還能夠設置過濾條件，把咱們須要的請求過濾出來。
5. 命令行輸入QuickExec能夠輸入命令進行一些快捷操做。

配置

  Fiddler簡單介紹完了，下面來看下Fiddler的一些配置。

電腦設置代理

  Fiddler打開後會自動更改IE的代理設置，因爲Chrome默認代理設置是跟IE關聯在一塊兒的，所以Chrome不用進行配置，可是火狐使用獨立的代理設置，所以須要單獨配置。

  首先查看Fiddler的監聽端口。在Fiddler中選擇Tools => Fiddler Options => connections，打開以下界面：

  其中的Fiddler Listens on port就是Fiddler的監聽端口，咱們只要代理到這個端口就能夠用Fiddler進行監聽了。而後把Allow remote computers to connect這一行前面的勾打上，容許其餘電腦來鏈接。

  Firefox手動設置以下，打開工具 => 選項 => 高級 => 網絡 => 設置，而後進行以下設置。

  不過上面的手動設置比較麻煩，咱們能夠安裝一個FiddlerHook插件，安裝好後啓用這個插件就行。

手機端設置代理

  Fiddler不只可以代理電腦的請求，也可以代理手機端的請求，當咱們開發微信站或者手機站的時候，就能夠很方便咱們來進行調試。

IOS設置

  IOS選擇對應的無線網設置，而後找到HTTP代理，服務器一欄填寫電腦的IP地址，端口號是Fiddler端口號，默認8888。

Android設置

  在Android中，長按所鏈接的無線網，而後修改網絡，在代理的選項卡里選擇手動。一樣，服務器一欄填寫電腦的IP地址，端口號默認8888.

捕獲HTTPS

  默認狀況下，Fiddler不會捕獲HTTPS會話，所以若是不開啓HTTPS捕獲的話自動應答器是不會替換HTTPS的會話。打開Tools => Fiddler Options => HTTPS

  彈出框須要安裝一個證書，而後全程點Yes就能夠了。

功能

統計結果

  Fiddler的統計選項卡中顯示了當前Session的基本信息，在選項卡的最上方顯示的是文本信息，最下方是個餅圖，按MIME類型顯示流量。使用Statistics頁籤，用戶能夠經過選擇多個會話來得來這幾個會話的總的信息統計，好比多個請求和傳輸的字節數。

  選擇第一個請求和最後一個請求，可得到整個頁面加載所消耗的整體時間。從條形圖表中還能夠分別出哪些請求耗時最多，從而對頁面的訪問進行訪問速度優化。

查看請求頭和響應結果

  在左側請求數據列表中選中一條記錄會自動切換到Insprctors面板，這個面板分爲上下兩個，上面是請求頭的一些信息，下面是返回的響應主體。

自動應答器

  在平常工做中，有時候腳本樣式或者頁面有點問題是屢見不鮮，常常須要對文件進行修改。可是每次都須要發佈到測試環境才能看到效果很麻煩，咱們但願在本身本機就能看到調試的效果。Fiddler就提供了自動應答器這個功能，能讓咱們直接看到效果。   打開AutoResponder面板，咱們能夠添加URL匹配規則，讓請求的URL從本地返回文件而不是從服務器。   例如如今須要將線上地址https://acexyf.github.io/替換爲本地的一個HTML文件，首先勾選Enable rules使全部的匹配規則生效，而後勾選Unmatched request passthrough，讓沒有匹配到的規則經過（若是不勾選這個，打開其餘網頁會失敗）。   而後點Add rules來新增一個匹配規則，在x下面的Rule Editor輸入要替換的URL和本地文件的路徑，而後Save就添加成功了。

  雖然這樣添加匹配成功了，可是產生了一個心得問題，因爲是匹配URL，因此只要是URL中帶有https://acexyf.github.io/都會被替換掉，因此該域名下全部的腳本、樣式以及子頁面都會被替換，這樣顯然不利於咱們調試。可是Fiddler提供了另外的四種匹配規則。

1. 前綴爲「EXACT:」表示徹底匹配（大小寫敏感）
2. 前綴爲「NOT:」表示發現就不匹配
3. 前綴爲「REGEX:」表示使用正則表達式匹配
4. 前綴爲「REGEX:(?insx)」表示匹配方式其中：

• i表示不區分大小寫；
• n表示指定的惟一有效的捕獲是顯式命名或編號的形式；
• s表示單行模式；
• x表示空格說明的；

  所以修改一下咱們的匹配規則，改成EXACT:https://acexyf.github.io/就能夠了。還有一個小Tips：

• 將左側的會話列表中選擇一條數據，直接拖拽到AutoResponder面板會直接生成匹配規則。
• 點擊Rule Editor的第二個輸入框旁邊的小三角找到Find a file能夠選擇文件路徑。
• Test...能夠測試匹配規則。
• 在匹配規則上右擊會有選項框，你驚不驚喜，意不意外。

構造器

  構造器composer用來建立一個HTTP請求而後發送到服務器。能夠本身定義一個請求，也能夠講會話列表中拖拽一個已有的請求過來。

Parsed請求

  打開Composer面板，第一個就是Parsed選項卡，在表單中咱們輸入一個HTTP請求，好比對baidu.com發送一個請求。點擊Execute按鈕，這個請求就發送出去了。這時候在會話列表中就多了一次請求。

Raw請求

  第二個選項卡是Raw，也是原始請求，若是熟悉HTTP請求，能夠直接手動輸入。

ScratchPad暫存

  第三個選項卡是ScratchPad，能夠同時保存多條原始請求，而後選擇性的發送。高亮選中你要發送的請求，而後點擊Execute就發送出去了。

Options選項

  幾個選項說明：

• Inspector Session：使用同一個 Session 進行鏈接（同一個域名或者主機的狀況下）
• Fix Content-Length Header： 當你發送 Post 請求時，自動加上或者修正 Header 中的 Content-Length.
• Follow Redirect：自動根蹤 HTTP 狀態碼爲 301 和 302 中返回帶 Location 的請求。
• Automatically Authenticate：自動進行身份驗證。
• Tear Off：將 Composer 變成一個浮動窗口。

過濾器

  有時候請求刷新一個頁面會有不少的請求，看得眼花繚亂，可是絕大多數請求可能並非咱們想要的，這時候咱們就須要對請求進行一些過濾。

  在Zone Filter中有三個選項，分別過濾如下請求：

• No Zone Filter：不過濾
• Show only Intranet Hosts：僅顯示內網的請求
• Show only Internet Hosts：僅顯示外網的請求

  在Host Filter中有四個選項，分別過濾如下請求

• No Host Filter：不過濾
• Hide the following Hosts：隱藏下面的主機
• Show only the following Hosts：僅顯示下面的主機
• Flag the following Hosts：標記下面的主機

命令行輸入

  命令行QuickExec容許咱們快速的執行一些腳本命令。

select命令

  select命令用來選擇全部類型爲指定類型的HTTP請求，即根據請求的content-type來選擇全部同一類型的。經常使用的select css選擇全部的樣式請求，select image選擇全部的圖片請求。

allbut命令

  allbut命令用於清除除了指定類型以外的其餘HTTP請求，僅保留指定類型。例如allbut image僅保留圖片的請求。若是跟一個不存在的類型，執行效果和csl，命令相同，清除全部的請求。

?text命令

  當你在問號後輸入一些文本的時候，Fiddler會高亮URL中帶有這些文本的全部請求。

>size和<size命令

  大於號小於號命令選擇響應主體的大小大於（或者小於）指定大小。

=status和=method命令

  等號命令用於選擇狀態碼等於指定狀態碼或者指定請求方法的會話。

@host命令

  選擇包含指定HOST的所有請求。

bold命令

  若是之後的請求的URL中帶有指定的字符串，那麼將會被加粗顯示。bold /bar.aspx表示加粗URL帶有bar.aspx。再次執行bold會清除加粗。

bpafter（bpu）、bps、、bpv（bpm）

  這幾個命令用於批量設置斷點。

• bpafter和bpu: 中斷URL包含指定字符的所有會話
• bps: 中斷響應狀態爲指定字符的所有會話
• bpv和bpm: 中斷指定請求方式的所有會話

cls命令

  清除請求列表。

斷點調試

  雖然bpafter和bpu都是用於中斷URL包含指定字符的所有會話，可是打斷點的時間是不同的。bpu是在瀏覽器發送請求的時候進行斷點，能夠對請求參數進行修改；而bpafter是在服務器響應的後進行斷點，能夠對響應結果進行修改。   咱們使用用express模擬簡單的ajax請求。

var express = require('express');
var path = require('path');
var app = express();
var port = process.env.PORT || 8088;

app.get('/test',function(req,res){
	var params = req.param('name') || '';
	res.json({name:'request name is '+params});
});

var server=app.listen(port,function(){
	console.log('server is listening on port:'+port);
});
複製代碼

修改請求參數bpu

  咱們輸入命令 bpu /test，而後Fiddler就會進入等待。在瀏覽器中輸入網址，這時候瀏覽器就會進入等待的狀態。在會話列表中選擇進入斷點狀態的請求，而後修改請求參數，修改完後點擊Run to Completion結束斷點。這時候，瀏覽器頁面也結束等待，出現修改後的結果。

  調試完後咱們不須要Fiddler再進行斷點，能夠輸入bpu清除全部bpu的斷點。

修改響應結果bpafter

  一樣，咱們輸入命令 bpafter /test，而後Fiddler就會進入等待。在瀏覽器中輸入網址，這時候瀏覽器就會進入等待的狀態。在會話列表中選擇進入斷點狀態的請求，而後修改響應結果，修改完後點擊Run to Completion結束斷點。這時候，瀏覽器頁面也結束等待，出現修改後的結果。

調試完後咱們不須要Fiddler再進行斷點，能夠輸入bpafter清除全部bpafter的斷點。

總結

  筆者會不按期更新更多心得，若是以爲寫得還不錯，請關注個人掘金主頁。更多文章請訪問個人博客地址