Développement de ressources Web de script à l’aide de Fiddler AutoResponder

  • Article

Lors du développement et du débogage des ressources Web JavaScript, vous pouvez utiliser AutoResponder dans Telerik Fiddler pour remplacer le contenu d’une ressource Web par le contenu d’un fichier local plutôt que de le télécharger dans votre instance Applications basées sur un modèle et de le publier à chaque fois. Utilisez les étapes suivantes ci-dessous pour configurer AutoResponder dans Fiddler.

Installer et configurer Fiddler

  1. Télécharger et installer Fiddler.

  2. Ouvrez Fiddler et dans la barre de menus, accédez à Tools, puis sélectionnez Options.

  3. Sélectionnez l’onglet HTTPS dans la boîte de dialogue, puis cochez les cases Capture HTTPS CONNECTS et Decrypt HTTPS traffic pour que le trafic HTTPS soit intercepté et déchiffré.

    Sélectionner les cases cochées dans l’onglet HTTP

  4. Cliquez sur OK pour fermer la boîte de dialogue.

Notes

Si c’est la première fois que vous activez ce paramètre, Fiddler vous invitera à installer un certificat. Installez le certificat et redémarrez Fiddler pour que les nouveaux paramètres prennent effet.

Si vous avez déjà exécuté Fiddler et que vous obtenez une erreur NET::ERR_CERT_AUTHORITY_INVALID, dans l’onglet HTTPS, cliquez sur le bouton Actions et choisissez Reset All Certificates. Cela présentera également un certain nombre d’invites pour les nouveaux certificats à installer.

Configurer AutoResponder

  1. Ouvrez la page dans l’application pilotée par modèle que vous souhaitez déboguer.

  2. Lancez la capture de trace de Fiddler en cliquant sur le bouton Capturing situé dans le coin inférieur gauche.

    Cliquer sur le bouton Capture pour lancer la capture du trafic HTTPS.

    Notes

    Si vous souhaitez capturer le trafic HTTPS uniquement à partir d’un hôte particulier, dans l’onglet Filters, dans la zone Hosts, dans la liste déroulante -No Host Filter-, sélectionnez Show only the following Hosts dans le menu, puis saisissez la liste des domaines à partir desquels vous souhaitez voir le trafic, séparés par un point-virgule. Informations complémentaires : Référence de filtres. Filtrer le trafic affiché dans Fiddler UI.

  3. Effectuez toute opération nécessaire pour charger le script que vous testez. Vous pouvez arrêter la capture en cliquant à nouveau sur le bouton Capturing.

  4. Sélectionnez les sessions du journal de suivi dans le volet de gauche et recherchez le fichier pour lequel vous souhaitez configurer AutoResponder.

    Par exemple, si le code que vous voulez déboguer est dans une ressource web JavaScript nommée new_testscript.js, utilisez le bouton Find pour ouvrir la boîte de dialogue Find Sessions et recherchez le nom de la ressource web.

    Rechercher une session dans Fiddler.

    Vous verrez apparaître les lignes correspondant à vos critères de recherche dans le volet de gauche.

  5. Sélectionnez cette ligne. Dans le volet de droite, sélectionnez l’onglet AutoResponder.

    Sélectionner l’onglet AutoResponder.

  6. Dans l’onglet AutoResponder, cochez les cases Enable rules et Unmatched requests passthrough.

    Sélectionner les deux cases à cocher mises en surbrillance

  7. Assurez-vous que la session relative à votre fichier cible est toujours sélectionnée, puis cliquez sur le bouton Add Rule de la section AutoResponder. Cela ajoute une nouvelle entrée dans la table des règles.

    Ajouter une nouvelle règle

  8. Lorsque la règle est sélectionnée, l’Éditeur de règles figurant en bas a la ligne du haut renseignée avec l’URL de la session liée à votre fichier et préfixée avec une chaîne du type EXACT:.

    Vous pouvez ensuite modifier la chaîne à faire correspondre pour la simplifier. Avec les ressources web, l’URL contient les valeurs générées dans l’URL ou dans une chaîne de requête pour s’assurer que la dernière version publiée est incluse dans la réponse. Vous verrez probablement que la valeur EXACT ressemblera à ceci :

    EXACT:https://<org URL>/%7B636556138760000160%7D/WebResources/new_testscript.js?    ver=-1229805553

    Vous pouvez simplifier cela pour supprimer les valeurs générées et utiliser ceci à la place :

    /WebResources/new_testscript.js

    La ligne du bas est laissée vide. Saisissez le chemin d’accès à votre fichier local sur votre disque sur cette ligne du bas, puis sauvegardez.

    Ajouter un chemin d’accès à votre fichier local dans l’éditeur de règles

En suivant les étapes ci-dessus, vous avez configuré Fiddler pour écouter les demandes et répondre avec le fichier local au lieu de passer la demande sur le réseau.

Mettre à jour et tester votre code

  1. Appliquez des modifications à votre fichier local.
  2. Lancez à nouveau la capture de trace de Fiddler et revenez à votre navigateur pour recharger la page avec un cache vide.
  3. Dans les outils de développement du navigateur, vous pouvez voir que le fichier qui est maintenant reçu sera le fichier local.
  4. Continuez à répéter ce processus tout en mettant à jour votre code jusqu’à ce que vous obteniez les résultats souhaités.

Voir aussi

Ressources Web
Création de scripts client à l’aide de JavaScript

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).