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

Sofia Emelianova

Les remplacements locaux vous permettent de débloquer votre workflow en prototypant et en testant les modifications et les correctifs sans attendre que le backend, les tiers ou les API les prennent en charge.

Utilisez des remplacements locaux pour simuler des ressources distantes, même si vous n'y avez pas accès. Vous pouvez simuler des réponses aux requêtes et à divers fichiers, par exemple les en-têtes de réponse HTTP et le contenu Web, y compris les requêtes XHR et fetch.

Par exemple, les remplacements locaux peuvent être utiles dans les cas d'utilisation suivants :

• Simulez l'API et testez les correctifs d'API avant de les déployer en production.
• Prototyper de nouvelles conceptions d'UI si vous connaissez déjà les structures de données que le backend va utiliser.
• Testez les correctifs de performances, par exemple éliminer le CLS, pour vous assurer à l'avance qu'ils sont importants.

Remarque : Regardez la vidéo ci-dessus pour en savoir plus sur les cas d'utilisation.

Les remplacements locaux vous permettent également de conserver les modifications que vous apportez dans les outils de développement lors du chargement des pages.

Fonctionnement

• Lorsque vous apportez des modifications dans les outils de développement, une copie du fichier modifié est enregistrée dans un dossier que vous spécifiez.
• Lorsque vous actualisez la page, les outils de développement diffusent le fichier local modifié au lieu de la ressource réseau.

Remarque : Les remplacements locaux désactivent automatiquement le cache.

Vous pouvez également enregistrer vos modifications directement dans les fichiers sources. Consultez Modifier et enregistrer des fichiers avec les espaces de travail.

Limites

Les substitutions locales fonctionnent pour les en-têtes de réponse réseau et pour la plupart des types de fichiers, y compris les requêtes XHR et fetch, à quelques exceptions près :

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

Vous pouvez modifier les fichiers HTML dans le panneau Sources.

Configurer les remplacements locaux

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

1. Ouvrez les outils de développement, accédez au panneau Réseau, effectuez un clic droit sur la requête que vous souhaitez remplacer, puis sélectionnez Remplacer les en-têtes ou Remplacer le contenu dans le menu déroulant.
2. Si vous n'avez pas encore configuré de remplacement local, DevTools vous invite à le faire dans la barre d'actions en haut de l'écran :
   1. Sélectionnez un dossier dans lequel stocker les fichiers de remplacement.
   2. Cliquez sur Autoriser pour accorder les droits d'accès aux outils de développement.
3. Si vous avez configuré des remplacements locaux, mais que vous les avez désactivés, les outils de développement les activent automatiquement.

4. Une fois les substitutions locales configurées et activées, les Outils de développement vous redirigent vers :

   • Le panneau Sources vous permet de modifier le contenu Web.
   • L'éditeur se trouve dans Réseau > En-têtes > En-têtes de réponse et vous permet 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, puis 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, dans le panneau Réseau, effectuez un clic droit sur une requête et sélectionnez Afficher tous les remplacements. Les outils de développement vous redirigent vers Sources > Remplacements.

Remplacer le contenu Web

Pour remplacer le contenu Web :

1. Configurer des remplacements locaux
2. Modifiez des fichiers et enregistrez-les dans les outils de développement.

Remarque : Vous ne pouvez pas remplacer les fichiers source-mapped. Si vous effectuez un clic droit sur une requête dans le panneau Réseau et sélectionnez Remplacer le contenu, les outils de développement affichent une boîte de dialogue qui vous redirige vers les fichiers sources d'origine.

Par exemple, vous pouvez modifier des fichiers dans Sources ou du 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 listent dans Sources > Remplacements et affichent l'icône  à côté des fichiers remplacés dans les panneaux et volets concernés : Éléments > Styles, Réseau et Sources > Remplacements.

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

Remplacer 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. Simulez et testez à la volée :

1. Configurer des remplacements 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. Apportez les modifications nécessaires aux données récupérées et enregistrez le fichier.
4. Actualisez la page et vérifiez que vos modifications ont été appliquées.

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

Suivre vos modifications locales

Vous pouvez suivre toutes les modifications que vous apportez au contenu Web au même endroit : l'onglet du tiroir Modifications.

De plus, dans Sources > Remplacements, vous pouvez effectuer un clic droit sur le fichier enregistré et sélectionner Ouvrir dans le dossier parent dans le menu contextuel. Le dossier que vous avez sélectionné lors de la configuration des remplacements s'ouvre. Vous pouvez y modifier les fichiers avec votre éditeur de code préféré.

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

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

Les remplacements d'en-têtes de réponse vous permettent de prototyper localement des correctifs pour différents en-têtes, y compris, mais sans s'y limiter :

• En-têtes CORS (Cross-Origin Resource Sharing)
• En-têtes Permissions-Policy
• En-têtes d'isolation d'origine croisée

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

1. Configurez les substitutions locales et ouvrez la page que vous souhaitez déboguer.
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 redirigent vers l'éditeur En-têtes > En-têtes de réponse.

3. Pointez sur la valeur d'un en-tête de réponse et placez-y un curseur.

   

   Vous pouvez également activer l'éditeur En-têtes de réponse en pointant sur la valeur d'un en-tête de réponse, puis en cliquant sur Modifier Modifier.

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

   Remarque : Cet exemple ajoute l'en-tête Access-Control-Allow-Origin: * pour éliminer une erreur CORS.

   

   • 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. Cela supprime les en-têtes que vous avez ajoutés ou rétablit les valeurs d'origine.

   Le panneau 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 En-têtes affiche une icône en forme de point violet avec une info-bulle pour vous indiquer que les en-têtes sont remplacés.

5.  Actualisez la page pour appliquer les modifications.

Modifier tous les forçages d'en-tête de réponse

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

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

   

   Les outils de développement vous redirigent vers le fichier .headers correspondant dans Sources > Remplacements.

2. Modifiez le fichier .headers comme suit :

   

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

     Remarque : Vous pouvez utiliser des caractères génériques pour spécifier plusieurs requêtes à la fois. Désignez plusieurs caractères avec * et un seul avec ?.

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

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

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

4.  Actualisez la page pour appliquer les modifications.