[推荐]查看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”，如下图所示，粗体部分是需要我们添加的配置信息。

<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选项就可以了，如下图所示。



参考

让Fiddler调试localhost和127.0.0.1
FiddlerScript CookBook

2009-11-27 更新

　　有时候我们除了Json，还想看看表单数据啥的，这种时候就并不想“只显示Json”，所以我又新增了一个菜单项“隐藏所有非功能性请求(css js image 304)”，如果勾选了这个菜单，就会把js、css、所有图片和304请求全部过滤掉。这是新版的CustomRules.js。