Telerik blogs

Adding Tabs with FiddlerScript

June 18, 2014 Productivity, Debugging 0 Comments


Fiddler is a highly-extensible web debugging platform, and you can extend it using any .NET language, or via the built-in FiddlerScript engine. While most major UI extensions are built in C#, you can add simple UI extensions very easily in FiddlerScript.

For example, say that you’ve decided that http://httpstatusdogs.com is the coolest site on the Internet, and you want to enhance Fiddler with this meme. Doing so is super-simple with FiddlerScript.

First, click Rules > Customize Rules to open your FiddlerScript rules. If you have installed the (recommended) FiddlerScript editor, it will appear, otherwise your default text editor will open.

At the very top of the script file, add the line:

  import System.Text;

…just above the other import statements.

Then, move the cursor to just inside the Handlers class:

image

There, add the following code:

public BindUITab("HTTPStatusDogs", true)
static function ShowStatusDogs(arrSess: Session[]):String
{
   if (arrSess.Length < 1) return "<html>Please select one or more sessions.</html>";
 
   var oSB: System.Text.StringBuilder = new System.Text.StringBuilder();
   oSB.Append("<html><head>");
   oSB.Append("<style>iframe { width: '100%'; height: 600px; frameBorder:0 }</style>");
   oSB.Append("</head><body>");
   for (var i:int = 0; i<arrSess.Length; i++)
   {
     oSB.AppendFormat("<iframe frameBorder=0 scrolling='no' src='http://httpstatusdogs.com/{0}'></iframe>",
       arrSess[i].responseCode);
   }
   oSB.Append("</body></html>");
   return oSB.ToString();
}

Save the script file, and the script will automatically recompile. A new “HTTPStatusDogs” tab will appear; when you activate it, the image for each Selected Session’s HTTP response code will be shown in the tab.

New HTTPStatusDogs tab

The “magic” that makes this work is invoked by the BindUITab attribute atop the function declaration:

public BindUITab("HTTPStatusDogs", true)
static function ShowStatusDogs(arrSess: Session[]):String

The presence of this attribute informs Fiddler that the following function will provide data to be rendered to a new tab, whose name is provided by the first parameter ("HTTPStatusDogs"). The second parameter (true) indicates that the string returned by the function should be rendered as HTML in a web browser view. To easily debug your HTML, change that true to false, and Fiddler will instead show the returned string as plain text in a textbox.

Obviously, you can easily customize this code to accomplish more productive tasks. :-)

Happy fiddling!

-Eric

Fiddler

Comments

Comments are disabled in preview mode.