IBM Support

Using the Fiddler CSC (Client Side Capture) plug-in

How To


Objective

Fiddler and Client Side Capture

Overview

Fiddler is a free web debugging proxy for capturing web sessions. The tool is useful for capturing the real-time browser interactions with a web site... for debugging web applications, for evaluating new UI capture library settings, and for saving Tealeaf sessions as replayable ".TLA" files.

To download Fiddler visit:

http://www.telerik.com/download/fiddler

Historically, a version 2 existed, version 4 is now used for general purposes.

Steps

Fiddler Configuration Notes

A few high-level notes on Fiddler settings you may need to adjust:

  • Enable SSL Decodings

    • (A one-time setup, this allows Fiddler to be a ?man in the middle?...and decode the SSL)

    • Go to Tools / Fiddler Options / ?HTTP Tab: Enable decryption

  • Start and Stop capture:

    • Click lower left corner of status bar

  • Filter for desired domain only:

    • (helps reduce clutter from site metrics pages)

    • Go to Filters tab on right

    • Enable ?Use Filters?

    • Select ?Show only the following Hosts? in drop down

    • Enter each host name you want to keep. Wildcards are OK...

  • Filter to capture from desired web browser only:

    • (to further reduce clutter and avoid capturing irrelevant or confidential data)

    • Drag and drop ?Bullseye? in button bar onto the browser you with to capture

  • Find pages of interest:

    • use Find button to look for ?sessions?.

    • A ?session? is just a group of pages that match your filter criteria.

    • A good example is to search for 'tealeaf' to assist in locating tealeaf.js and tealeaftarget.xxx pages

  • Inspect requests and responses:

    • Use the Inspector tools on the right

    • The upper inspector is for the request

    • The lower inspector is for the response

  • Decode GZip compressed pages, etc.

    • Enable the Decode button in the toolbar (for pages captured in the future)

    • Right click the page in the page list and select Decode (for pages that have already been captured)

  • Double click the page and Fiddler should automatically ask if you wish to decompress
    ?

??

Client Side Capture (CSC) plug-in

Tealeaf provides a plugin for Fiddler that you can use to perform a client-side capture of all HTTP traffic passing through Fiddler to your local hard drive. The result from this process is a session TLA file that is similar to a session downloaded from Tealeaf. This tool is useful for debugging capture issues, preparing sessions for replay testing, etc..

CSC plug-in product documentation

https://www.ibm.com/support/knowledgecenter/en/SS2MBL_9.0.2/RTVClientSideCapture/RTV/UseCSCFidd/UsingClient-SideCaptureForFiddler.html

Acquiring the plug-in

As of June, 2015, this plugin has been made publicly available and it does not require distribution by the Tealeaf Professional Services (Lab Services) group. The plugin is not supported and a disclaimer has been provided at the download site <here>:

https://www.ibm.com/developerworks/community/wikis/home?lang=en#!/wiki/W214f7731a379_4712_a1ce_5d7a833d4cca/page/IBM%20Tealeaf%20-%20FiddlerCSC%20plugin

This site provides a link for the Fix Central download, and a CSC capture guide. The guide URL is no longer valid (it's from 9.0.1), so go to the 9.0.2 documentation instead:?

https://www.ibm.com/support/knowledgecenter/en/SS2MBL_9.0.2/RTVClientSideCapture/RTV/UseCSCFidd/UsingClient-SideCaptureForFiddler.html


Additionally, an "IBMTealeaf_CapturePlugin_v1.0_forFiddler " download was posted to Fix Central on June 2, 2015. The DDL build number is 9.0.1.5047. The plug-in has no "globalized" features and is compatible for general use, with either the global or non-global Tealeaf builds, including the newest 9.0.2 fix packs (7 as of mid-2018)

The standard disclaimer:

The is provided as-is with no any express or implied warranties, including, but not limited to, the implied warranties of merchantability,
fitness for a particular purpose and non-infringement are disclaimed. In no event shall IBM be liable for any direct, indirect, incidental,
special, exemplary, or consequential damages (including, but not limited to, procurement of substitute goods or services; loss of use,
data, or profits; or business interruption) however caused and on any theory of liability, whether in contract, strict liability,
or tort (including negligence or otherwise) arising in any way out of the use of this software,
even if advised of the possibility of such damage.

?

Install or upgrade the Fiddler plugin

  1. Unzip the .zip file containing the plugin (FiddlerCSC.dll).
  2. Copy the .dll to the Scripts directory inside the Fiddler install directory. Typically, this directory is one of the following
    C:\Program Files\Fiddler2\Scripts
    C:\Program Files (x86)\Fiddler2\Scripts
    
  3. Launch Fiddler. TeaLeaf CSC should appear on the menu bar.




    Figure: TeaLeaf CSC menu option.

Configure Fiddler

Note: These instructions and screen shots are for Fiddler 2, but remain accurate for Fiddler 4

Click the status bar. Verify that that the capture mode is set to Web Browsers.



Figure: Capture mode should be set to Web Browsers.

In the menu, select File > Capture Traffic??


Figure: File > Capture Traffic should be enabled.

In the menu, select Rules > Hide HTTPS Connects if it is not already selected.



Figure: Rules > Hide HTTPS Connects should be enabled.


In the menu, select Tools > Fiddler Options....




Figure: Select Tools > Fiddler Options...

On the General tab, select the following options:

? ? ? ? Map requests to originating application
? ? ? ? Automatically stream audio & video



Figure: Select the options as shown.

On the HTTPS tab, select the following options:

? ? ? ? Capture HTTP Connects
??????? Decrypt HTTP traffic
??????? Ignore server certificate errors



Figure: Select the options as shown.

On the Connections tab, select the following options (should be set as default):

??????? Reuse client connections
??????? Reuse server connections
??????? Act as system proxy on startup
??????? Monitor all connections



Figure: Select the options as shown

Click OK.

Fiddler Autoresponder notes

The Fiddler auto-responder can be used to remove (or insert) the Tealeaf SDK into a web page, for testing:

  • How does the page behave without the SDK (and...are JS errors on that page actually related to the SDK?)

  • How does the page and capture/replay look with the DSK, for pages that do not already have the DSK?

To inject the UI SDK Library

The Tealeaf CSC configuration dialog provides for adding the SDK to a web site.
Instructions for setting this up are in the Client-Side Capture Manual.

Fiddler CSC Options


This feature is convenient, as it allows a local file to be used rather than a direction to a file published on a web server. To use a file published on a web server, the regular AutoResponder feature is sufficient.

The options:

  • "Inject Tealeaf.js"
    • Choose this option to activates script insertion
  • "Insert tealeaf.js after this string"
    • this field is optional.
    • Use a pattern here to control the insertion point... otherwise a default location is used
      You may enter a regular expression to specify this location, for example <body.*>.
  • The Check for HEAD Tag:
    • It's best to leave this enabled...
    • it prevents injection of the SDK into non-visible hits (where there is no header tag)
  • <JS file location>:
    • Specify the local file name of your library, for example:
      • C:\Temp\Fiddler\tealeaf.js
    • Do not store this file in the Fiddler program directory.
  • "Disable browser caching"
    • This option forces an update of page data to ensure it is requested from external sources.
  • "Auto Clear IE Cache"
    • To automatically clear the IE browse cache when Fiddler starts up

To modify or replace the UI SDK Library

Example 1: In-line editing of the existing SDK

  • Capture a session in Fiddler where the SDK is being pulled in
  • In Autoresponder tab:
  • Enable Automatic Responses
    • This activates ability to alter inbound responses
  • Enable Unmatched requests passthrough
    • This removes the requirement to specify the target page URLs
  • Drag the SDK hit from the left into the Autoresponder tab
    • An "EXACT URI" file for that file is added
    • Right click on the rule and select Edit Response, and go to Raw or Syntax view
  • Edit the SDK
    • At this point, you can alter the SDK as if it web on the web server,

      changing configuration options and adding or altering code
      • For example, as a test, change:
        • maxEvents : 25,

      • to:

        • maxEvents : 2

      • ...proof of this change will be a larger number of small (2 event) posts

    • Close the editor with save...
  • Note that rule is not associated at the bottom of the tab with a virtual file:
    • for example "200-SESSION_89"
    • ... this is a cached copy of the file, to be substituted in later requests
  • At this point, any re-fresh or re-navigation of the site will use the altered SDK rather than the original.
    • This includes both small alterations or replacing the entire content.


Example 2: Replacement of the SDK with a local file

Select the rule and use the editor below to specify your library file location.
The "find a file" browser can help you in setting up the rule:

Example:

???????? C:\UICapture\Tealeaf_4_10_1645.js

  • Be sure to save your rule and clear browser cache, to ensure your changes are picked up.
  • The rule will now use your replacement file whenever the SDK is requested.

To disable the UI SDK Library

  • Start Fiddler capture, and open the page in question with a browser

    • Note that you should start seeing posts to the target page in Fiddler

  • Review the page source and determine the UI SDK library location

  • On the AutoResponder tab, enable both:

    • ?Enable automatic responses?

    • ?Unmatched requests passthrough?

  • Press the Add Rule button in the upper right

    Add the library name in the rule editor, for example:

  • In the dropdown below the URL, pick a saved action, for example:

    • 403_AuthDeny.dat

  • Press the Save button

  • Start a new browser instance, or clear cache, and re-access the page

  • Note that:

    • The load of the UI SDK Library (for example,store/js/tealeaf/Tealeaf.js will appear as failed (403) in the Fiddler session list

    • The Fiddler Session List will no longer show posts to the target page

Capturing a session from a mobile device

There is no Fiddler or equivalent app for mobile devices.
Instead, the common practice practice it to set up the device to 'proxy through' a PC with fiddler.

A guide on this procedure appears here:

http://blog.brianbeach.com/2013/01/using-fiddler-with-iphoneipad.html


Detailed steps:

Enabling Fiddler as a Proxy Server

  • In Fiddler go to Tools > Fiddler Options > Connections and tick the "Allow remote computers to connect".

  • Then configure the Proxy settings on your iPad, etc.,

    • The Proxy IP is the IP address of your server where Fiddler is running

    • The port is 8888.

If you have the CSC (Client Side Capture) plugin for Fiddler, you can create a TLA file from your capture.

Setting up Proxy on a mobile device

IPad example: http://www.amsys.co.uk/2012/blog/how-to-setup-proxy-servers-in-ios/#.UXhKlKDAOfA
Android ICS example : http://androidproxy.thisisntarealdomain.com/ice-cream-sandwich-android-4-0-proxy-settings/

Android steps:

  • Go to? Apps...

  • Settings

  • Wi-Fi

  • Long press your wireless network

  • Click on Modify network

  • Go to the bottom and check ?Show advanced options?

  • Change ?Proxy settings? from None to Manual

  • Enter the Wi-Fi proxy host

  • Enter the Wi-Fi Proxy port

  • Enter any domains for proxy bypass

Additional Information

Privacy and Fiddler Sessions

As a fiddler captured session does not pass through the PCA or Transport service privacy rules, it may contain confidential data. The best way to avoid that problem is to use a test account or test credit card numbers if they are available, but often they are not.

Procedures that will help:

  • Use the Fiddler filters feature to capture hits from the desired domain only
  • Use the Fiddler CSC plug-in filter to apply the SDK to the desired domain only
  • Remove unessential hits (Fiddler calls them "sessions") from the Nav list before saving, or before generating a TLA file
  • The TLA file can be directly edited to munge account numbers, passwords, etc., via advanced RTV editing features

A Fiddler "saz" file can be directly cleaned, as the file is simply a Zip archive of text files. However, re-packaging the zip may be problematic... in testing Fiddler sees the file as corrupt.

[{"Business Unit":{"code":"BU051","label":"N\/A"},"Product":{"code":"SUPPORT","label":"IBM Worldwide Support"},"Component":"","Platform":[{"code":"PF025","label":"Platform Independent"}],"Version":"All Versions","Edition":"","Line of Business":{"code":"LOB33","label":"N\/A"}}]

Document Information

More support for:
IBM Worldwide Support

Software version:
All Versions

Document number:
745085

Modified date:
02 November 2020

UID

ibm10745085