2009-12-19 5 views
23

Je pensais à l'aide Fiddler aux fins suivantes ...JavaScript Injecter dans l'élément de tête de site Web en utilisant Fiddler

J'ai un service JavaScript Je veux démontrer aux clients potentiels. Pour leur montrer ce que leur site pourrait ressembler si elles installent (c.-à inclure) mon script, je veux mettre en place Fiddler sur mon PC, de sorte que lors de la récupération du site web du client, la ligne

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

sera inclus dans la section HTML <head>.

Est-ce que cela peut être fait facilement avec Fiddler? Est-ce que quelqu'un pourrait me diriger vers où je pourrais trouver la documentation couvrant cela, si c'est le cas?

Merci!

---- ---- Mise à jour

Pour le moment j'ai eu recours à l'aide d'un BHO ajouter mon script à la page. J'utilise execScript(), après onDocumentComplete, pour exécuter un simple morceau de JavaScript qui ajoute le fichier .js dont j'ai besoin à la page. Mais les pointeurs d'EricLaw et la réponse à la gigue semblent être la voie à suivre pour une manière plus complète (et élégante) de faire ce dont j'ai besoin.

Si quelqu'un est intéressé, je pourrais télécharger le code BHO ici. -Merci!

+1

L'exemple de le faire est dans le groupe de discussion de Fiddler ici: http://groups.google.com/group/httpfiddler/browse_thread/thread/b3d45f1daaac57b1/7725fcbf80d2ff7e?lnk=gst ou wiki ici: http://fiddler.wikidot.com/misc-information-page#toc13 – EricLaw

+0

Merci, ceux-ci semblent être ce dont j'ai besoin! (Je ne sais pas comment marquer un commentaire comme une réponse ...) – odedbd

Répondre

0

Si vous utilisez jQuery, vous pouvez ajouter js à la volée. Je pense probablement que vous pouvez avoir une méthode qui inclurait/exclurait votre script basé sur un paramètre de requête. Voici comment vous devez inclure JS avec jQuery

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

Fiddler Ouvrir -> Règles du menu -> Personnaliser les règles (ou appuyez sur Ctrl + R)

Les CustomRule.js fichier sera ouvert. Faites défiler jusqu'à ce que vous trouviez la ligne

static function OnBeforeResponse(oSession: Session) 

C'est où votre code va. Ici vous pouvez changer la réponse du serveur avant que le navigateur ne le voit.

L'exemple de code suivant montre comment inclure un morceau personnalisé code jQuery qui remplace le lien Unanswered dans le menu horizontal avec un lien qui sert de raccourci pour Unanswered jQuery Questions

que je vous montre le code jQuery Je veux d'inclure

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

maintenant, le code Fiddler (basé sur le code trouvé dans CustomRules.js et des exemples de code de la 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); 
} 

Résultat ressemble à ce

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

Je pense que vous devriez maintenant pouvoir hackyourself ensemble un morceau de code qui correspond à votre problème.

Exemple

// 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 lorsque regex n'est pas nécessaire, vous pouvez utiliser le plus simple 'oSession.utilReplaceInResponse', voir http://docs.telerik.com/fiddler/knowledgebase/fiddlerscript/modifyrequestorresponse –

+0

De même, il est fortement recommandé d'installer les modules complémentaires * Syntax-Highlighting * sur http://www.telerik.com/fiddler/add-ons –

+1

Et une dernière chose, la référence JScript RegEx peut être trouvée ici: http://msdn.microsoft.com/en-us/library/28hw3sce(v=vs.100).aspx –