27

I was thinking of using Fiddler for the following purpose...

I have a JavaScript based service I want to demonstrate to potential clients. In order to show them what their website could look like if they install (i.e. include) my script, I want to set up Fiddler on my PC, so that when fetching the client's website, the

<script type="text/JavaScript" src="myscript.js"></script>

line will be included in the HTML <head> section.

Can this be easily done with Fiddler? Could someone point me to where I may find the documentation covering that, if it is?

Thanks!

----Update----

For the time being I have resorted to using a BHO to add my script to the page. I use execScript(), upon onDocumentComplete, to run a simple piece of JavaScript which appends the .js file I need to the page. But EricLaw's pointers and jitter's answer seem like the way to go for a more complete (and elegant) way to do what I need.

If someone is interested I could upload the BHO code here. -Thanks!

w5m
  • 2,286
  • 3
  • 34
  • 46
odedbd
  • 2,285
  • 3
  • 25
  • 33
  • 1
    The example of doing this is in Fiddler's discussion group here: http://groups.google.com/group/httpfiddler/browse_thread/thread/b3d45f1daaac57b1/7725fcbf80d2ff7e?lnk=gst or the wiki here: http://fiddler.wikidot.com/misc-information-page#toc13 – EricLaw Dec 21 '09 at 02:21
  • Thanks, these seem to be what I need! (I don't know how to mark a comment as an answer...) – odedbd Dec 21 '09 at 15:52

3 Answers3

32

Open fiddler -> Menu Rules -> Customize Rules (or hit Ctrl+R)

The CustomRule.js file opens. Scroll down until you find the line

static function OnBeforeResponse(oSession: Session)

This is where your code goes. Here you can change the server response before the browser sees it.

The following code sample shows how to include a custom piece of jQuery code which replaces the Unanswered link in the horizontal menu with a link which serves as short cut to Unanswered jQuery Questions

I first show you the jQuery code I want to include

<script type='text/javascript'>
    $(function() {
        var newLink = '<a href="/unanswered/tagged/jquery">Unanswered jQuery</a>';
        $('div#hmenus div.nav:first ul li:last a').replaceWith(newLink);
    });
</script>

Now the fiddler code (based on code found in CustomRules.js and code samples from the FiddlerScript CookBook)

//is it a html-response and is it from stackoverflow.com
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html") &&
    oSession.HostnameIs("stackoverflow.com")) {

    // Remove any compression or chunking
    oSession.utilDecodeResponse();

    var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);

    // Match the jQuery script tag
    var oRegEx = /(<script[^>]*jquery.min.js"><\/script>)/gi;
    // replace the script tag withitself (no change) + append custom script tag
    oBody = oBody.replace(oRegEx, "$1<script type='text/javascript'>$(function() {$('div#hmenus div.nav:first ul li:last a').replaceWith('<a href=\"/unanswered/tagged/jquery\">Unanswered jQuery</a>');})</script>");

    // Set the response body to the changed body string
    oSession.utilSetResponseBody(oBody); 
}

I think you should now able to hackyourself together a piece of code which fits your problem.

Example

// Match the head end
var oRegEx = /(<\/head>)/gi;
// replace with new script
oBody = oBody.replace(oRegEx, "<script type='text/javascript' src='http://url/myscript.js'></script>$1");
Cœur
  • 37,241
  • 25
  • 195
  • 267
jitter
  • 53,475
  • 11
  • 111
  • 124
  • +1 BTW when regex is not required, you can use the simpler `oSession.utilReplaceInResponse`, see http://docs.telerik.com/fiddler/knowledgebase/fiddlerscript/modifyrequestorresponse – Ohad Schneider May 25 '14 at 12:13
  • Also it is highly recommended to install the *Syntax-Highlighting Add-Ons* from http://www.telerik.com/fiddler/add-ons – Ohad Schneider May 25 '14 at 15:30
  • 1
    And one last thing, JScript RegEx reference can be found here: http://msdn.microsoft.com/en-us/library/28hw3sce(v=vs.100).aspx – Ohad Schneider May 25 '14 at 15:31
0

if you use jQuery you can add js on the fly. I would probably think you can have a method which would include/exclude your script based on some query param. This is how you would include JS with jQuery

$.getScript('someScript.js',function(){
//Do something here after your script loads
});
ram
  • 11,468
  • 16
  • 63
  • 89
0

Haven't tried it, but how about GreaseMonkey for IE?

bobince
  • 528,062
  • 107
  • 651
  • 834