查看Json輸出的"最方便"的方法
項目的表現層使用MVC+Extjs。在開發過程中，一旦頁面顯示不正常，第一個需要排查的總是“Action是否輸出了正確的Json？”。由於開發人員會日復一日地頻繁進行這個操作，所以我們的目標是，要找到一種方法，可以
不用耗費額外的精力隨時查看Json輸出
“不用耗費額外的精力”指的是：當需要查看Json輸出時，只要轉轉眼球（可能至少還需要點兩下鼠標，恐怕）就能很快找到想看的結果。
查看Json輸出的方法很多，我們所能找的最接近這個目標的方案是“Fiddler2+JsonViewer插件+自定義Fiddler2過濾條件”。想要查看Json輸出時，只要先將Fiddler運行起來，然後在瀏覽器里正常操作Web頁面，就可以在Fiddler裏面看到截獲的Json輸出了，效果如下圖所示。
安裝Fiddler2+JsonViewer插件
Fiddler2是一款老牌Web調試工具。下載、安裝之後，通過點擊“開始|程序|Fiddler2”或點擊IE的菜單“工具|Fiddler2”將其運行起來後，它會自動把自己註冊成IE的代理服務器，從而截獲任何乾洗機經過IE的請求/應答；當關閉它時，它又會自動把代理服務器配置取消（當年使用Fiddler1的時候，還得自己添加代理服務器配置，很麻煩的說）。
JsonViewer是一款查看Json對象的小工具。解壓後，可以看到3個子目錄：
- JsonView：可獨立運行版。
- Visualizer：VS2005插件。
- Fiddler：Fiddler2插件。
我們接下來要安裝JsonViewer的Fiddler2插件。方法是，將Fiddler目錄中的所有文件複製到“Fiddler2的安裝目錄/Inspectors/”。然後修改“Fiddler2的安裝目錄/fiddler.exe.config”，如下圖所示，粗體部分是需要我們添加的配置信息。
fiddler.exe.config
<configuration>
<runtime>
<generatePublisherEvidence enabled="false"/>
<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
<probing privatePath="Inspectors" />
</assemblyBinding>
</runtime>
</configuration>
注意 IE7 和 .NET Framework 被硬編碼成只要是對localhost的請求，就不通過代理服務器。所以像“http://localhost:8000/Default.aspx”這樣的請求不會被Fiddler2截獲。解決方法是：1) 將“localhost”替換成“localhost.”,如“http://localhost.:8000/Default.aspx”；2) 將“localhost”替換成本機IP地址，如“http://172.16.75.78:8000/Default.aspx”。
現在，讓我們把Fiddler2運行起來，再操作一下頁面，就可以在Fiddler2窗體左側的“Web Sessions”列表裏看到一大堆請求/應答。點擊返回Json的那一條，再點擊進入右側的“Inspectors”、“Json”Tab頁，就可以了。只是，Fiddler2默認會把所有經過乾洗設備IE的任何請求/應答全都顯示出來，這樣一來，“Web Sessions”列表裏的東東就嫌太多了，能不能把與Json不相干的東東全部過濾掉呢？這個並不難，只要在Fiddler2的“CustomRules”裏面增加幾行代碼就可以了。
自定義過濾條件
點擊Fiddler2的菜單“Rules|Customize Rules...”，會自動由記事本打開可添加自定義規則的代碼文件。
在第81行增加如下代碼，目的是在Fiddler2的Rules菜單裏增加一個“只顯示Json”的菜單項：
// jcl20091121
public static RulesOption("只顯示 &Json")
var m_ShowJsonOnly: boolean = false;
在OnBeforeResponse事件裏增加如下代碼，意思是如果“Rules|只顯示Json”菜單項被選中了，就過濾掉所有Content-Type!="application/json; charset=utf-8"的應答。
// jcl:2009-11-21
if(m_ShowJsonOnly) {
//MessageBox.Show(oSession.oResponse.headers.Item("Content-Type").ToString());
if (!oSession.oResponse.headers.ExistsAndContains("Content-Type", "application/json; charset=utf-8")) {
oSession["ui-hide"] = "hide"; // String value not important
}
}
所有源碼在此：
自定義規則
import System;
import System.Windows.Forms;
import Fiddler;
// GLOBALIZATION NOTE:
// Be sure to save this file with UTF-8 Encoding if using any non-ASCII characters
// in strings, etc.
//
// JScript Reference
// http://www.fiddler2.com/redir/?id=msdnjsnet
//
// FiddlerScript Reference
// http://www.fiddler2.com/redir/?id=fiddlerscriptcookbook
//
// FiddlerScript Editor:
// http://www.fiddler2.com/redir/?id=fiddlerscripteditor
class Handlers
{
// The following snippet demonstrates a custom-bound column for the web sessions list.
// See http://www.fiddler2.com/fiddler/help/configurecolumns.asp for more info
//public static BindUIColumn("Method", 60)
//function FillMethodColumn(oS: Session){
// if ((oS.oRequest != null) && (oS.oRequest.headers != null))
// return oS.oRequest.headers.HTTPMethod; else return String.Empty;
//}
public static RulesOption("Hide 304s")
var m_Hide304s: boolean = false;
// Cause Fiddler to override the Accept-Language header with one of the defined values
public static RulesOption("Request &Japanese Content")
var m_Japanese: boolean = false;
// Cause Fiddler to override the User-Agent header with one of the defined values
RulesString("&User-Agents", true)
RulesStringValue(0,"Netscape &3", "Mozilla/3.0 (Win95; I)")
RulesStringValue(1,"&IEMobile", "Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 6.12)")
RulesStringValue(2,"&Safari (XP)", "Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/531.9 (KHTML, like Gecko) Version/4.0.3 Safari/531.9.1")
RulesStringValue(3,"IE &6 (XPSP2)", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)")
RulesStringValue(4,"IE &7 (Vista)", "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1)")
RulesStringValue(5,"IE &8 (Win2k3 x64)", "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; WOW64; Trident/4.0)")
RulesStringValue(6,"IE 8 (Win7)", "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)")
RulesStringValue(7,"IE 8 (IE7 CompatMode)", "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0)")
RulesStringValue(8,"&Opera 10", "Opera/9.80 (Windows NT 5.2; U; en) Presto/2.2.15 Version/10.00")
RulesStringValue(9,"&Firefox 2", "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.10) Gecko/20071115 Firefox/2.0.0.10")
RulesStringValue(10,"&Firefox 3.5", "Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3")
RulesStringValue(10,"&Firefox (Mac)", "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3")
RulesStringValue(12,"Chrome", "Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.24 Safari/532.0")
RulesStringValue(13,"&Custom", "%CUSTOM%")
public static var sUA: String = null;
// Cause Fiddler to delay HTTP traffic to simulate typical 56k modem conditions
public static RulesOption("Simulate &Modem speeds", "Per&formance")
var m_SimulateModem: boolean = false;
// Removes HTTP-caching related headers and specifies "no-cache" on requests and responses
public static RulesOption("&Disable Caching", "Per&formance")
var m_DisableCaching: boolean = false;
// Show the duration between the start of Request.Send and Response.Completed in Milliseconds
public static RulesOption("&Show Time-to-Last-Byte", "Per&formance")
var m_ShowTTLB: boolean = false;
// Show the time of response completion
public static RulesOption("Show Response &Timestamp", "Per&formance")
var m_ShowTimestamp: boolean = false;
// Create a new option on the Rules menu. Set the default value for the option.
public static RulesOption("&UNTITLED")
var m_bUNTITLED: boolean = false;
// Create a new item on the Tools menu.
public static ToolsAction("&UNTITLED")
function DoUNTITLED(oSessions: Fiddler.Session[]){
// Write your code here
}
// jcl20091121
public static RulesOption("只顯示 &Json")
var m_ShowJsonOnly: boolean = false;
// Force a manual reload of the script file. Resets all
// RulesOption variables to their defaults.
public static ToolsAction("Reset Script")
function DoManualReload(){
FiddlerObject.ReloadScript();
}
public static ContextAction("Decode Selected Sessions")
function DoRemoveEncoding(oSessions: Session[]){
for (var x = 0; x < oSessions.Length; x++){
oSessions[x].utilDecodeRequest();
oSessions[x].utilDecodeResponse();
}
}
static function OnBoot(){
// MessageBox.Show("Fiddler has finished booting");
// System.Diagnostics.Process.Start("iexplore.exe");
// FiddlerObject.UI.ActivateRequestInspector("HEADERS");
// FiddlerObject.UI.ActivateResponseInspector("HEADERS");
}
static function OnShutdown(){
// MessageBox.Show("Fiddler has shutdown");
}
static function OnAttach(){
// MessageBox.Show("Fiddler is now the system proxy");
// System.Diagnostics.Process.Start("proxycfg.exe", "-u"); // Notify WinHTTP of proxy change
}
static function OnDetach(){
// MessageBox.Show("Fiddler is no longer the system proxy");
// System.Diagnostics.Process.Start("proxycfg.exe", "-u"); // Notify WinHTTP of proxy change
}
static function OnBeforeRequest(oSession: Session)
{
// Sample Rule: Color ASPX requests in RED
// if (oSession.uriContains(".aspx")) { oSession["ui-color"] = "red"; }
// Sample Rule: Flag POSTs to fiddler2.com in italics
// if (oSession.HostnameIs("www.fiddler2.com") && oSession.HTTPMethodIs("POST")) { oSession["ui-italic"] = "yup"; }
// Sample Rule: Break requests for URLs containing "/sandbox/"
// if (oSession.uriContains("/sandbox/")){
// oSession.oFlags["x-breakrequest"] = "yup"; // Existence of the x-breakrequest flag creates a breakpoint; the "yup" value is unimportant.
// }
if ((null != gs_ReplaceToken) && (oSession.url.indexOf(gs_ReplaceToken)>-1)){ // Case sensitive
oSession.url = oSession.url.Replace(gs_ReplaceToken, gs_ReplaceTokenWith);
}
if ((null != gs_OverridenHost) && (oSession.host.toLowerCase() == gs_OverridenHost)){
oSession["x-overridehost"] = gs_OverrideHostWith;
}
if ((null!=bpRequestURI) && oSession.uriContains(bpRequestURI)){
oSession["x-breakrequest"]="uri";
}
if ((null!=bpMethod) && (oSession.HTTPMethodIs(bpMethod))){
oSession["x-breakrequest"]="method";
}
if ((null!=uiBoldURI) && oSession.uriContains(uiBoldURI)){
oSession["ui-bold"]="QuickExec";
}
if (m_SimulateModem){
// Delay sends by 300ms per KB uploaded.
oSession["request-trickle-delay"] = "300";
}
if (m_DisableCaching){
oSession.oRequest.headers.Remove("If-None-Match");
oSession.oRequest.headers.Remove("If-Modified-Since");
oSession.oRequest["Pragma"] = "no-cache";
}
// User-Agent Overrides
if (null != sUA){
oSession.oRequest["User-Agent"] = sUA;
}
if (m_Japanese){
oSession.oRequest["Accept-Language"] = "ja";
}
}
static function OnBeforeResponse(oSession: Session)
{
if (m_SimulateModem){
// Delay receives by 150ms per KB downloaded.
oSession["response-trickle-delay"] = "150";
}
if (m_DisableCaching){
oSession.oResponse.headers.Remove("Expires");
oSession.oResponse["Cache-Control"] = "no-cache";
}
if (m_ShowTimestamp){
oSession["ui-customcolumn"] = DateTime.Now.ToString("H:mm:ss.ffff") + " " + oSession["ui-customcolumn"];
}
if (m_ShowTTLB){
oSession["ui-customcolumn"] = oSession.oResponse.iTTLB + "ms " + oSession["ui-customcolumn"];
}
if (m_Hide304s && oSession.responseCode == 304){
oSession["ui-hide"] = "true";
}
if ((bpStatus>0) && (oSession.responseCode == bpStatus)){
oSession["x-breakresponse"]="status";
}
if ((null!=bpResponseURI) && oSession.uriContains(bpResponseURI)){
oSession["x-breakresponse"]="uri";
}
// jcl:2009-11-21
if(m_ShowJsonOnly) {
//MessageBox.Show(oSession.oResponse.headers.Item("Content-Type").ToString());
if (!oSession.oResponse.headers.ExistsAndContains("Content-Type", "application/json; charset=utf-8")) {
oSession["ui-hide"] = "hide"; // String value not important
}
}
// Uncomment to reduce incidence of "unexpected socket closure" exceptions in .NET code.
// Note that you really should also fix your .NET code to gracefully handle unexpected connection closure.
//
// if (!(((oSession.responseCode == 401) && oSession.oResponse["WWW-Authenticate"].Length > 9) ||
// ((oSession.responseCode == 407) && oSession.oResponse["Proxy-Authenticate"].Length > 9))) {
// oSession.oResponse["Connection"] = "close";
// }
}
static function Main()
{
var today: Date = new Date();
FiddlerObject.StatusText = " CustomRules.js was loaded at: " + today;
// Uncomment to add a "Server" column containing the response "Server" header, if present
// FiddlerObject.UI.lvSessions.AddBoundColumn("Server", 50, "@response.server");
}
// These static variables are used for simple breakpointing & other QuickExec rules
static var bpRequestURI:String = null;
static var bpResponseURI:String = null;
static var bpStatus:int = -1;
static var bpMethod: String = null;
static var uiBoldURI: String = null;
static var gs_ReplaceToken: String = null;
static var gs_ReplaceTokenWith: String = null;
static var gs_OverridenHost: String = null;
static var gs_OverrideHostWith: String = null;
// The OnExecAction function is called by either the QuickExec box in the Fiddler window,
// or by the ExecAction.exe command line utility.
static function OnExecAction(sParams: String[]){
FiddlerObject.StatusText = "ExecAction: " + sParams[0];
var sAction = sParams[0].toLowerCase();
switch (sAction){
case "bold":
if (sParams.Length<2) {uiBoldURI=null; FiddlerObject.StatusText="Bolding cleared"; return;}
uiBoldURI = sParams[1]; FiddlerObject.StatusText="Bolding requests for " + uiBoldURI;
break;
case "bp":
FiddlerObject.alert("bpu = breakpoint request for uri/nbpm = breakpoint request method/nbps=breakpoint response status/nbpafter = breakpoint response for URI");
break;
case "bps":
if (sParams.Length<2) {bpStatus=-1; FiddlerObject.StatusText="Response Status breakpoint cleared"; return;}
bpStatus = parseInt(sParams[1]); FiddlerObject.StatusText="Response status breakpoint for " + sParams[1];
break;
case "bpv":
case "bpm":
if (sParams.Length<2) {bpMethod=null; FiddlerObject.StatusText="Request Method breakpoint cleared"; return;}
bpMethod = sParams[1].toUpperCase(); FiddlerObject.StatusText="Request Method breakpoint for " + bpMethod;
break;
case "bpu":
if (sParams.Length<2) {bpRequestURI=null; FiddlerObject.StatusText="RequestURI breakpoint cleared"; return;}
if (sParams[1].toLowerCase().StartsWith("http://")){sParams[1] = sParams[1].Substring(7);}
bpRequestURI = sParams[1];
FiddlerObject.StatusText="RequestURI breakpoint for "+sParams[1];
break;
case "bpafter":
if (sParams.Length<2) {bpResponseURI=null; FiddlerObject.StatusText="ResponseURI breakpoint cleared"; return;}
if (sParams[1].toLowerCase().StartsWith("http://")){sParams[1] = sParams[1].Substring(7);}
bpResponseURI = sParams[1];
FiddlerObject.StatusText="ResponseURI breakpoint for "+sParams[1];
break;
case "overridehost":
if (sParams.Length<3) {gs_OverridenHost=null; FiddlerObject.StatusText="Host Override cleared"; return;}
gs_OverridenHost = sParams[1].toLowerCase();
gs_OverrideHostWith = sParams[2];
FiddlerObject.StatusText="Connecting to [" + gs_OverrideHostWith + "] for requests to [" + gs_OverridenHost + "]";
break;
case "urlreplace":
if (sParams.Length<3) {gs_ReplaceToken=null; FiddlerObject.StatusText="URL Replacement cleared"; return;}
gs_ReplaceToken = sParams[1];
gs_ReplaceTokenWith = sParams[2].Replace(" ", "%20"); // Simple helper
FiddlerObject.StatusText="Replacing [" + gs_ReplaceToken + "] in URIs with [" + gs_ReplaceTokenWith + "]";
break;
case "select":
if (sParams.Length<2) { FiddlerObject.StatusText="Please specify Content-Type to select."; return;}
FiddlerObject.UI.actSelectSessionsWithResponseHeaderValue("Content-Type", sParams[1]);
MessageBox.Show(sParams[1]);
FiddlerObject.StatusText="Selected sessions returning Content-Type: " + sParams[1] + ".";
if (FiddlerObject.UI.lvSessions.SelectedItems.Count > 0){
FiddlerObject.UI.lvSessions.Focus();
}
break;
case "allbut":
case "keeponly":
if (sParams.Length<2) { FiddlerObject.StatusText="Please specify Content-Type to retain during wipe."; return;}
FiddlerObject.UI.actSelectSessionsWithResponseHeaderValue("Content-Type", sParams[1]);
MessageBox.Show(sParams[1]);
FiddlerObject.UI.actRemoveUnselectedSessions();
FiddlerObject.UI.lvSessions.SelectedItems.Clear();
FiddlerObject.StatusText="Removed all but Content-Type: " + sParams[1];
break;
case "stop":
FiddlerObject.UI.actDetachProxy();
break;
case "start":
FiddlerObject.UI.actAttachProxy();
break;
case "cls":
case "clear":
FiddlerObject.UI.actRemoveAllSessions();
break;
case "g":
case "go":
FiddlerObject.UI.actResumeAllSessions();
break;
case "help":
Utilities.LaunchHyperlink("http://www.fiddler2.com/redir/?id=quickexec");
break;
case "hide":
FiddlerObject.UI.actMinimizeToTray();
break;
case "nuke":
FiddlerObject.UI.actClearWinINETCache();
FiddlerObject.UI.actClearWinINETCookies();
break;
case "show":
FiddlerObject.UI.actRestoreWindow();
break;
case "tail":
if (sParams.Length<2) { FiddlerObject.StatusText="Please specify # of sessions to trim the session list to."; return;}
FiddlerObject.UI.TrimSessionList(int.Parse(sParams[1]));
break;
case "quit":
FiddlerObject.UI.actExit();
break;
case "dump":
FiddlerObject.UI.actSelectAll();
FiddlerObject.UI.actSaveSessionsToZip(CONFIG.GetPath("Captures") + "dump.saz");
FiddlerObject.UI.actRemoveAllSessions();
FiddlerObject.StatusText = "Dumped all sessions to " + CONFIG.GetPath("Captures") + "dump.saz";
break;
default:
if (sAction.StartsWith("http") || sAction.StartsWith("www")){
System.Diagnostics.Process.Start(sAction);
}
else
FiddlerObject.StatusText = "Requested ExecAction: " + sAction + " not found. Type HELP to learn more.";
}
}
}
現在“Web Sessions”列表已經清爽多了，可是，如果我們想忙裏偷閒，去博客園首頁逛逛，就會發現“Web Sessions”列表裏面多了幾條博客園首頁的Json輸出，這是因爲Fiddler2默認會截獲所有經由IE的請求/應答。能不能讓它只顯示本機的請求/應答呢？這個只需要配置一下Fiddler2的Filter選項就可以了