2009-12-19 2 views
23

Ich dachte Fiddler verwenden zu folgendem Zweck ...Injizieren JavaScript in Kopfelement der Website Fiddler mit

Ich habe einen JavaScript-basierten Dienst, den ich, um potenzielle Kunden demonstrieren will. Um ihnen zu zeigen, was ihre Website aussehen könnte, wenn sie installiert werden (dh enthalten) mein Skript, ich möchte Fiedler auf meinem PC einzurichten, so dass, wenn die Kunden-Website zu holen, die

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

Linie sein wird, in der HTML-<head> Abschnitt enthalten.

Kann dies mit Fiddler einfach gemacht werden? Könnte mich jemand darauf hinweisen, wo ich die Dokumentation finden könnte, wenn das der Fall ist?

Danke!

---- ---- aktualisiert

Für die Zeit zurückgegriffen habe ich werde ein BHO zu meinem Skript zur Seite hinzufügen zu verwenden. Ich benutze execScript(), auf onDocumentComplete, um ein einfaches Stück JavaScript auszuführen, das die .js-Datei an die Seite anfügt. Aber EricLaws Hinweise und die Antwort des Jitters scheinen der Weg zu sein, auf eine vollständigere (und elegantere) Weise zu tun, was ich brauche.

Wenn jemand interessiert ist, könnte ich den BHO-Code hier hochladen. -Danke!

+1

Das Beispiel macht diese Diskussionsgruppe in Fiddlers hier: http://groups.google.com/group/httpfiddler/browse_thread/thread/b3d45f1daaac57b1/7725fcbf80d2ff7e?lnk=gst oder die Wiki hier: http://fiddler.wikidot.com/misc-information-page#toc13 – EricLaw

+0

Danke, diese scheinen zu sein, was ich brauche! (Ich weiß nicht, wie man einen Kommentar als Antwort markiert ...) – odedbd

Antwort

0

Wenn Sie jQuery verwenden, können Sie js on the fly hinzufügen. Ich würde wahrscheinlich denken, dass Sie eine Methode haben können, die Ihr Skript basierend auf irgendeinem Abfrageparameter einschließen/ausschließen würde. Dies ist, wie Sie JS mit jQuery

$.getScript('someScript.js',function(){ 
//Do something here after your script loads 
}); 
0

es Haben Sie nicht versucht umfassen würde, aber wie wäre es GreaseMonkey for IE?

+0

Dies ist ein einfacherer Ansatz als die Verwendung von fiddler – chulian

26

öffnen Fiedler -> Menü-Regeln -> Anpassen Regeln (oder drücken Sie Strg + R)

Die CustomRule.js-Datei öffnet. Scrollen Sie nach unten, bis Sie die Zeile finden

static function OnBeforeResponse(oSession: Session) 

Dies ist, wo Ihr Code geht. Hier können Sie die Server-Antwort ändern, bevor der Browser sie sieht.

Das folgende Codebeispiel zeigt, wie ein benutzerdefiniertes Stück jQuery-Code enthält, die mit einem Link, um den Unanswered Link in dem horizontalen Menü ersetzt, die auf Unanswered jQuery Questions

ich den jQuery-Code zuerst zeigt Ihnen als Abkürzung dient ich will

<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> 

nun den Fiedler Code enthalten (basierend auf Code in CustomRules.js gefunden und Codebeispiele aus dem 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); 
} 

Ergebnis sieht wie folgt aus

Modified stackoverflow.com http://img269.imageshack.us/img269/570/clipboard01ym.jpg

Ich glaube, Sie jetzt in der Lage sollte zusammen ein Stück Code hackyourself, die Ihr Problem passt.

Beispiel

// 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"); 
+0

+1 BTW, wenn Regex nicht erforderlich ist, können Sie die einfachere 'oSession.utilReplaceInResponse' verwenden, siehe http://docs.telerik.com/fiddler/knowledgebase/fiddlerscript/modifyrequestorresponse –

+0

Außerdem wird dringend empfohlen, die * Syntax-Highlighting Add-Ons * von http://www.telerik.com/fiddler/add-ons zu installieren –

+1

Und eine letzte Sache, JScript RegEx Referenz kann hier gefunden werden: http://msdn.microsoft.com/en-us/library/28hw3sce(v=vs.100).aspx –

Verwandte Themen