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

Grâce aux forçages locaux, vous pouvez débloquer votre workflow en prototypant et en testant les modifications et les corrections sans attendre que le backend, les tiers ou les 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 aux requêtes et divers fichiers (par exemple, des en-têtes de réponse HTTP et du contenu Web, y compris des requêtes XHR et Takeout).

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

• Simulez l'API et testez les corrections de l'API avant qu'elles ne soient déployées en production.
• Prototypez de nouvelles conceptions d'interface utilisateur si vous connaissez déjà les structures de données que le backend va utiliser.
• Testez les corrections de performances, par exemple éliminer le CLS, pour vous assurer à l'avance qu'elles sont significatives.

Les remplacements 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, ils enregistrent une copie du fichier modifié dans le 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 Workspaces.

Limites

Les remplacements locaux 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 d'extraction, à 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 dans 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, DevTools n'enregistrera pas la modification.

Vous pouvez plutôt 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 (Réseau) :

1. Ouvrez les outils de développement, accédez au panneau Network (Réseau), effectuez un clic droit sur la requête que vous souhaitez remplacer, sélectionnez Override header (Remplacer les en-têtes) ou Override content (Remplacer le contenu) dans le menu déroulant.
2. Si vous n'avez pas encore configuré de forçages locaux, DevTools vous invite à :
   1. Sélectionnez le dossier dans lequel stocker les fichiers de remplacement.
   2. Cliquez sur Allow (Autoriser) pour accorder à DevTools les droits d'accès.
3. Si des remplacements 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'accéder aux éléments suivants:

   • Le panneau Sources vous permet de modifier le contenu Web.
   • L'éditeur dans Network > Headers > Response Headers (Réseau > En-têtes > En-têtes de réponse) vous permet de modifier les en-têtes de réponse.

Pour désactiver temporairement les forçages locaux ou supprimer tous les fichiers de forçage, accédez à Sources > Forceages, puis décochez la case check_box_outline_blank Activer les forçages locaux ou cliquez sur block Effacer.

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

Pour afficher rapidement tous les remplacements, dans le panneau Réseau, effectuez un clic droit sur une requête, puis sélectionnez Afficher tous les remplacements. Les outils de développement vous redirigent vers Sources > Forcements.

Remplacer le contenu Web

Pour remplacer le contenu Web :

1. Configurez des forçages locaux.
2. Apportez des modifications aux fichiers et enregistrez-les dans DevTools.

Par exemple, vous pouvez modifier les fichiers dans les sources ou les fichiers 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 et les répertorient dans Sources > Remplace, et affiche 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 (Réseau) 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 avec un contenu Web écrasé.

Remplacement des requêtes XHR ou récupération 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. Créez des prototypes et effectuez des tests à la volée :

1. Configurez des forçages locaux.
2. Dans Network (Réseau), filtrez les requêtes XHR/fetch, recherchez celle dont vous avez besoin, effectuez un clic droit dessus, puis sélectionnez Override content (Forcer le contenu).
3. Apportez les modifications nécessaires aux données extraites, puis enregistrez le fichier.
4. refresh Actualisez la page et observez l'application de vos modifications.

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 panneau Modifications.

En outre, dans Sources > Forcements, vous pouvez effectuer un clic droit sur le fichier enregistré, puis sélectionner Ouvrir dans le dossier contenant dans le menu contextuel. Le dossier que vous avez sélectionné lors de l'étape Ignorer la configuration s'ouvre. 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 Network (Réseau), vous pouvez remplacer les en-têtes de réponse HTTP sans avoir accès au serveur Web.

Avec les forçages 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 d'origine croisée

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

1. Configurez des forçages locaux et examinez, 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. DevTools vous redirige vers l'éditeur Headers > Response Headers (En-têtes > En-têtes de réponse).

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

   

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

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

   

   • 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 forçage 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 des valeurs modifiées.

   Le panneau Réseau met en surbrillance les en-têtes modifiés en vert et les forçages supprimés en rouge et barrés. De plus, l'onglet En-têtes affiche 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 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 sous 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 la valeur d'un en-tête, supprimez un en-tête ajouté ou une règle, pointez dessus et cliquez sur delete.

3. Enregistrez le fichier .headers à l'aide de la commande Commande / Ctrl+S.

4. refresh Actualisez la page pour appliquer les modifications.