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

Avec les forçages locaux, vous pouvez débloquer votre workflow en prototypant et en testant les modifications et les correctifs sans attendre que le backend, des tiers ou des API les prennent en charge.

Utilisez des forçages locaux pour simuler des ressources distantes, même si vous n'y avez pas accès. Vous pouvez simuler des réponses à des 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 de récupération).

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

• API fictives et test des corrections de l'API avant leur mise en production.
• Créez des prototypes d'interface utilisateur si vous connaissez déjà les structures de données que le backend utilisera.
• Testez les correctifs de performances (par exemple, éliminez le CLS) pour vous assurer à l'avance qu'ils sont significatifs.

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.

Comment ça marche ?

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

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

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.
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.
   2. Cliquez sur Allow (Autoriser) pour accorder les droits d'accès aux outils de développement.
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 check_box_outline_blank Activer les remplacements locaux ou cliquez sur block 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 à côté des fichiers remplacés dans les panneaux et volets correspondants: Éléments > Styles, Réseau et Sources > Remplacements.

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

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

De plus, dans Sources > Remplacements, vous pouvez effectuer un clic droit sur le fichier enregistré, puis sélectionner Ouvrir dans le dossier conteneur dans le menu contextuel. Le dossier que vous avez sélectionné lors des overrides setup s'ouvre alors. Vous pouvez alors 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 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:

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

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.

   

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

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

   

   • Pour modifier la valeur d'un en-tête, cliquez dessus.
   • Pour ajouter un en-tête, cliquez sur add Ajouter un en-tête.
   • Pour supprimer un remplacement d'en-tête, cliquez sur delete à 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. refresh 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 .headers à 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 :

   

   • 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 add.

   • 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 delete.

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

4. refresh Actualisez la page pour appliquer les modifications.