前端除錯告別笨辦法

謝小飛發表於2017-06-25
前端除錯

　　筆者前一陣在做微信站專案的時候在除錯的過程中遇到了不少的問題，每次除錯介面的時候都需要用console.log將資料列印出來，如果有時候想要修改介面資料還很不方便。針對上面除錯的痛點，筆者對Fiddler的用法進行了簡單的學習，分享一下學習的心得。

介紹

　　首先來介紹一下Fiddler。Fiddler是位於客戶端和伺服器端的HTTP代理，也是目前最常用的http抓包工具之一 。 它能夠記錄客戶端和伺服器之間的所有HTTP請求，可以針對特定的HTTP請求，分析請求資料、設定斷點、除錯web應用、修改請求的資料，甚至可以修改伺服器返回的資料，功能非常強大，是web除錯的利器。

Fiddler-Logo.jpg
Fiddler-Logo.jpg

　　是的，你沒有看錯，Fiddler這貨居然還能設定斷點。不僅如此，Fiddler還能修改請求資料或者修改返回資料。這樣在除錯的時候可以隨意的將伺服器的返回資料修改成我們想要的資料了。除此之外，Fiddler還能夠攔截手機端的資料，能夠看到手機端傳送的請求和請求結果，不過要進行一個小小的設定。好了，介紹了這麼多，來看一下Fiddler的原理：

theory.png
theory.png

　　既然Fiddler是客戶端和伺服器端之間的代理，那麼客戶端所有發起的請求都會經過Fiddler，然後再傳送到對應的伺服器；同樣，伺服器所有的響應資料也會經過Fiddler再傳送到客戶端。

介面

　　安裝完Fiddler，開啟介面如下,整個介面可以分為五個部分：

Interface.png
Interface.png

  1. 最上面的紅色區域是選單欄，主要有儲存/匯入請求、自定義規則、設定選項等功能。
  2. 中間的藍色區域是工具欄，針對當前請求的操作，包括清除請求、恢復斷點、查詢請求。
  3. 左側是請求資料的皮膚，所有Fiddler捕獲到的請求都會在這個皮膚裡，每一個欄位的含義如下圖所示。
  4. 右側是資料統計的皮膚，我們可以在這邊看到每個請求的詳細統計資料（包括請求頭、響應頭、響應主體、請求時間），還可以設定過濾條件，把我們需要的請求過濾出來。
  5. 命令列輸入QuickExec可以輸入命令進行一些快捷操作。

Columns.png
Columns.png

配置

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

電腦設定代理

　　Fiddler開啟後會自動更改IE的代理設定，由於Chrome預設代理設定是跟IE關聯在一起的，因此Chrome不用進行配置，但是火狐使用獨立的代理設定，因此需要單獨配置。

　　首先檢視Fiddler的監聽埠。在Fiddler中選擇Tools => Fiddler Options => connections，開啟如下介面：

FiddlerPort.png
FiddlerPort.png

　　其中的Fiddler Listens on port就是Fiddler的監聽埠，我們只要代理到這個埠就可以用Fiddler進行監聽了。然後把Allow remote computers to connect這一行前面的勾打上，允許其他電腦來連線。

　　Firefox手動設定如下，開啟工具 => 選項 => 高階 => 網路 => 設定，然後進行如下設定。

Firefoxpng.png
Firefoxpng.png

　　不過上面的手動設定比較麻煩，我們可以安裝一個FiddlerHook外掛，安裝好後啟用這個外掛就行。

FirefoxPlugin.png
FirefoxPlugin.png

手機端設定代理

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

IOS設定

　　IOS選擇對應的無線網設定，然後找到HTTP代理，伺服器一欄填寫電腦的IP地址，埠號是Fiddler埠號，預設8888。

IOS-Setting.png
IOS-Setting.png

Android設定

　　在Android中，長按所連線的無線網，然後修改網路，在代理的選項卡里選擇手動。同樣，伺服器一欄填寫電腦的IP地址，埠號預設8888.

Android-Setting.jpg
Android-Setting.jpg

捕獲HTTPS

　　預設情況下，Fiddler不會捕獲HTTPS會話，因此如果不開啟HTTPS捕獲的話自動應答器是不會替換HTTPS的會話。開啟Tools => Fiddler Options => HTTPS

Open-HTTPS.png
Open-HTTPS.png

　　彈出框需要安裝一個證照，然後全程點Yes就可以了。

功能

統計結果

　　Fiddler的統計選項卡中顯示了當前Session的基本資訊，在選項卡的最上方顯示的是文字資訊，最下方是個餅圖，按MIME型別顯示流量。使用Statistics頁籤，使用者可以通過選擇多個會話來得來這幾個會話的總的資訊統計，比如多個請求和傳輸的位元組數。

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

Statistics.png
Statistics.png

檢視請求頭和響應結果

　　在左側請求資料列表中選中一條記錄會自動切換到Insprctors皮膚，這個皮膚分為上下兩個，上面是請求頭的一些資訊，下面是返回的響應主體。

Inspectors.png
Inspectors.png

自動應答器

　　在日常工作中，有時候指令碼樣式或者頁面有點問題是家常便飯，經常需要對檔案進行修改。但是每次都需要釋出到測試環境才能看到效果很麻煩，我們希望在自己本機就能看到除錯的效果。Fiddler就提供了自動應答器這個功能，能讓我們直接看到效果。
　　開啟AutoResponder皮膚，我們可以新增URL匹配規則，讓請求的URL從本地返回檔案而不是從伺服器。
　　例如現在需要將線上地址http:http://xieyufei.com替換為本地的一個HTML檔案，首先勾選Enable rules使所有的匹配規則生效，然後勾選Unmatched request passthrough，讓沒有匹配到的規則通過（如果不勾選這個，開啟其他網頁會失敗）。
　　然後點Add rules來新增一個匹配規則，在x下面的Rule Editor輸入要替換的URL和本地檔案的路徑，然後Save就新增成功了。

AutoResponder.png
AutoResponder.png

　　雖然這樣新增匹配成功了，但是產生了一個心得問題，由於是匹配URL，所以只要是URL中帶有http:http://xieyufei.com都會被替換掉，所以該域名下所有的指令碼、樣式以及子頁面都會被替換，這樣顯然不利於我們除錯。但是Fiddler提供了另外的四種匹配規則。

  1. 字首為“EXACT:”表示完全匹配（大小寫敏感）
  2. 字首為“NOT:”表示發現就不匹配
  3. 字首為“REGEX:”表示使用正規表示式匹配
  4. 字首為“REGEX:(?insx)”表示匹配方式其中：
  • i表示不區分大小寫；
  • n表示指定的唯一有效的捕獲是顯式命名或編號的形式；
  • s表示單行模式；
  • x表示空格說明的；

　　因此修改一下我們的匹配規則，改為EXACT:http:http://xieyufei.com就可以了。還有一個小Tips：

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

構造器

　　構造器composer用來建立一個HTTP請求然後傳送到伺服器。可以自己定義一個請求，也可以講會話列表中拖拽一個已有的請求過來。

Parsed請求

　　開啟Composer皮膚，第一個就是Parsed選項卡，在表單中我們輸入一個HTTP請求，比如對baidu.com傳送一個請求。點選Execute按鈕，這個請求就傳送出去了。這時候在會話列表中就多了一次請求。

Composer.png
Composer.png

Raw請求

　　第二個選項卡是Raw，也是原始請求，如果熟悉HTTP請求，可以直接手動輸入。

ScratchPad暫存

　　第三個選項卡是ScratchPad，可以同時儲存多條原始請求，然後選擇性的傳送。高亮選中你要傳送的請求，然後點選Execute就傳送出去了。

ScratchPad.png
ScratchPad.png

Options選項

　　幾個選項說明：

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

過濾器

　　有時候請求重新整理一個頁面會有很多的請求，看得眼花繚亂，但是絕大多數請求可能並不是我們想要的，這時候我們就需要對請求進行一些過濾。

Filters.png
Filters.png

　　在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允許我們快速的執行一些指令碼命令。

QuickExecBox.png
QuickExecBox.png

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結束斷點。這時候，瀏覽器頁面也結束等待，出現修改後的結果。

Bpu.png
Bpu.png

　　除錯完後我們不需要Fiddler再進行斷點，可以輸入bpu清除所有bpu的斷點。

修改響應結果bpafter

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

Bpafter.png
Bpafter.png

除錯完後我們不需要Fiddler再進行斷點，可以輸入bpafter清除所有bpafter的斷點。

總結

　　筆者會不定期更新更多心得，如果覺得寫得還不錯，請關注我的掘金主頁。更多文章請訪問我的部落格地址

相關文章