Remplacer localement le contenu Web et les en-têtes de réponse HTTP

Sofia Emelianova
Sofia Emelianova
GitHub

Les forçages locaux vous permettent de remplacer les en-têtes de réponse HTTP et le contenu Web, y compris les requêtes XHR et fetch, pour simuler des ressources distantes même si vous n'y avez pas accès. Cela vous permet de prototyper des modifications sans attendre que le backend les prenne en charge. Les forçages locaux vous permettent également de conserver les modifications que vous apportez dans les outils de développement lors des chargements de page.

Fonctionnement :

  • Lorsque vous apportez des modifications dans les outils de développement, ceux-ci enregistrent une copie du fichier modifié dans un dossier que vous spécifiez.
  • Lorsque vous actualisez la page, les outils de développement diffusent le fichier local modifié plutôt que la ressource réseau.

Limites

Les forçages locaux fonctionnent pour les en-têtes de réponse du réseau et pour la plupart des types de fichiers, y compris les requêtes XHR et de récupération, à quelques exceptions près:

  • Le cache est désactivé lorsque les forçages locaux sont activés.
  • Les outils de développement n'enregistrent pas les modifications apportées dans l'arborescence DOM du panneau Éléments.
  • Si vous modifiez le code CSS dans le volet Styles et que la source de ce code CSS est un fichier HTML, les outils de développement n'enregistreront pas vos modifications.

En revanche, vous pouvez modifier les fichiers HTML dans le panneau Sources.

Configurer des forçages locaux

Vous pouvez remplacer immédiatement le contenu Web ou les en-têtes de réponse dans le panneau Network:

  1. Ouvrez les outils de développement, accédez au panneau Network, effectuez un clic droit sur la requête à remplacer, puis sélectionnez Remplacer les en-têtes ou Remplacer le contenu dans le menu déroulant. Choisir le contenu de remplacement dans le menu contextuel d'une requête.
  2. Si vous n'avez pas encore configuré de forçages locaux, les outils de développement vous invitent à :
    1. Sélectionnez un dossier dans lequel stocker les fichiers de remplacement. Les outils de développement vous invitent à sélectionner un dossier.
    2. Cliquez sur Allow (Autoriser) pour accorder les droits d'accès aux outils de développement. Les outils de développement demandent l'accès.
  3. Si des forçages locaux sont configurés, mais désactivés, les outils de développement les activent automatiquement.

  4. Une fois les forçages locaux configurés et activés, selon ce que vous êtes sur le point de remplacer, les outils de développement vous permettent d'effectuer les opérations suivantes:

    • Le panneau Sources pour vous permettre de modifier le contenu Web
    • L'éditeur sous Réseau > En-têtes > En-têtes de réponse pour vous permettre de modifier les en-têtes de réponse.

Pour désactiver temporairement les remplacements locaux ou supprimer tous les fichiers de remplacement, accédez à Sources > Remplacements et décochez la case Activer les remplacements locaux ou cliquez sur Effacer, respectivement.

Pour supprimer un seul fichier de remplacement ou tous les remplacements d'un dossier, effectuez un clic droit sur le fichier ou le dossier dans Sources > Remplacements, sélectionnez Supprimer, puis cliquez sur OK dans la boîte de dialogue. Cette action est irréversible. Vous devrez recréer manuellement les remplacements supprimés.

Pour afficher rapidement tous les remplacements, effectuez un clic droit sur une demande dans le panneau Réseau, puis sélectionnez Afficher tous les remplacements. Les outils de développement vous permettent d'accéder à Sources > Remplacements.

Ignorer le contenu Web

Pour remplacer le contenu Web:

  1. Configurez des forçages locaux.
  2. Modifiez les fichiers et enregistrez-les dans les outils de développement.

Par exemple, vous pouvez modifier les fichiers dans Sources ou CSS dans Éléments > Styles, sauf si le CSS se trouve dans des fichiers HTML.

Les outils de développement enregistrent les fichiers modifiés, les répertorient dans Sources > Remplacements et affichent l'icône Enregistré. à côté des fichiers remplacés dans les panneaux et volets correspondants: Éléments > Styles, Réseau et Sources > Remplacements.

Les icônes correspondantes en regard des fichiers remplacés dans Sources, Réseau et Éléments, puis Styles

De plus, le panneau Network affiche une icône en forme de point violet avec une info-bulle à côté de l'onglet Response (Réponse) d'une requête dont le contenu Web a été remplacé.

Icône en forme de point violet avec une info-bulle à côté de l'onglet "Response" (Réponse)

Ignorer les requêtes XHR ou fetch pour simuler des ressources distantes

Avec les remplacements locaux, vous n'avez pas besoin d'accéder au backend ni d'attendre qu'il prenne en charge vos modifications. Simulations et tests à la volée:

  1. Configurez des forçages locaux.
  2. Dans Réseau, filtrez les requêtes XHR/fetch, recherchez celle dont vous avez besoin, effectuez un clic droit dessus, puis sélectionnez Remplacer le contenu.
  3. Modifiez les données récupérées et enregistrez le fichier.
  4. Actualisez la page et observez les modifications appliquées.

Pour découvrir ce workflow, regardez la vidéo suivante:

Suivre les modifications locales

Vous pouvez suivre toutes les modifications que vous apportez au contenu Web depuis un seul et même endroit : l'onglet du panneau Modifications.

Remplacer les en-têtes de réponse HTTP

Dans le panneau Réseau, vous pouvez ignorer les en-têtes de réponse HTTP sans accéder au serveur Web.

Avec les remplacements d'en-tête de réponse, vous pouvez prototyper localement des correctifs pour divers en-têtes, y compris, mais sans s'y limiter:

Pour remplacer un en-tête de réponse:

  1. Configurez des forçages locaux et inspectez, par exemple, cette page de démonstration.
  2. Accédez à Réseau, recherchez une requête, effectuez un clic droit dessus, puis sélectionnez Remplacer les en-têtes. Les outils de développement vous permettent d'accéder à l'éditeur Headers > Response Headers.

  3. Passez la souris sur une valeur d'en-tête de réponse et placez un curseur à cet endroit.

    L'éditeur d'en-têtes de réponse.

    Pour activer l'éditeur Response Headers, pointez sur la valeur d'un en-tête de réponse, puis cliquez sur Edit (Modifier).

  4. Modifiez ou ajoutez un en-tête.

    Modifier une valeur d'en-tête existante, en ajouter une nouvelle et supprimer un remplacement.

    • Pour modifier la valeur d'un en-tête, cliquez dessus.
    • Pour ajouter un en-tête, cliquez sur Ajouter un en-tête.
    • Pour supprimer un remplacement d'en-tête, cliquez sur à côté de celui-ci. Cette opération supprime les en-têtes que vous avez ajoutés ou rétablit les valeurs d'origine.

    Le panneau Network (Réseau) met en évidence les en-têtes modifiés en vert et les remplacements supprimés en rouge et barrés. De plus, l'onglet Headers (En-têtes) comporte une icône en forme de point violet ainsi qu'une info-bulle pour vous informer que les en-têtes sont remplacés.

  5. Actualisez la page pour appliquer les modifications.

Modifier tous les remplacements d'en-tête de réponse

Pour modifier tous les remplacements d'en-tête au même endroit:

  1. Cliquez sur Enregistré. .headers à côté de la section En-têtes de réponse.

    L'en-tête remplace le lien situé à côté de la section En-têtes de réponse.

    Les outils de développement vous permettent d'accéder au fichier .headers correspondant dans Sources > Remplacements.

  2. Modifiez le fichier .headers comme suit :

    Modifier le fichier .headers.

    • Pour ajouter une nouvelle règle de remplacement, cliquez sur Ajouter une règle de remplacement. Une règle ici est un ensemble d'en-têtes et de valeurs, ainsi qu'une ou plusieurs requêtes auxquelles les appliquer.

    • Pour ajouter une paire en-tête/valeur à une règle, pointez sur une autre paire et cliquez sur .

    • Pour rétablir une valeur d'en-tête, supprimez un en-tête ou une règle ajoutés, pointez dessus, puis cliquez sur .

  3. Enregistrez le fichier .headers en appuyant sur Commande / Ctrl+S.

  4. Actualisez la page pour appliquer les modifications.