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 les 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 de récupération.

Par exemple, les forçages 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.
• Créez des prototypes de nouvelles conceptions d'interface utilisateur si vous connaissez déjà les structures de données que le backend utilisera.
• Testez les corrections de performances, par exemple éliminer le CLS, pour vous assurer à l'avance qu'elles sont significatives.

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 DevTools, 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é 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 forçages 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 fetch, à quelques exceptions près:

• Le cache est désactivé lorsque les remplacements locaux sont activés.
• DevTools n'enregistre 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, DevTools n'enregistrera pas la modification.

Vous pouvez plutôt modifier les fichiers HTML dans le panneau Sources.

Configurer des remplacements 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, puis sélectionnez Override headers (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 un dossier dans lequel stocker les fichiers de remplacement.
   2. Cliquez sur Allow (Autoriser) pour accorder à DevTools les droits d'accès.
3. Si vous avez configuré des forçages locaux, mais que vous les avez désactivés, DevTools les active 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 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, et vous devrez recréer manuellement les remplacements supprimés.

Pour afficher rapidement tous les forçages, dans le panneau Network (Réseau), effectuez un clic droit sur une requête, puis sélectionnez Show all overrides (Afficher tous les forçages). Les outils de développement vous accéderont à Sources > Remplacements.

Remplacer le contenu Web

Pour remplacer le contenu Web:

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

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

DevTools enregistre les fichiers modifiés, les liste dans Sources > Forcements et affiche l'icône  à côté des fichiers ignorés dans les panneaux et les volets concernés: Éléments > Styles, Réseau et Sources > Forcements.

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

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. Simulation et expérimentation à la volée:

1. Configurez des remplacements 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 les modifications appliquées.

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

Effectuer le suivi des modifications locales

Vous pouvez suivre toutes les modifications que vous apportez au contenu Web au 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 parent dans le menu contextuel. Le dossier que vous avez sélectionné lors de la configuration des forçages 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 de partage des ressources entre origines multiples (CORS)
• 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 inspectez, par exemple, cette page de démonstration.
2. Accédez à Network (Réseau), recherchez une requête, effectuez un clic droit dessus, puis sélectionnez Override headers (Ignorer les en-têtes). Les outils de développement vous permettent d'accéder à 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 une valeur d'en-tête de réponse, puis en cliquant sur Modifier 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 forçage d'en-tête, cliquez sur delete à côté de celui-ci. Les en-têtes que vous avez ajoutés sont supprimés ou les valeurs modifiées sont rétablies à leur valeur d'origine.

   Le panneau Network (Réseau) met en évidence 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 avec une info-bulle pour vous indiquer 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 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 redirigent vers le fichier .headers correspondant sous Sources > Remplacements.

2. Modifiez le fichier .headers comme suit :

   

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

   • Pour ajouter une paire d'en-tête-valeur à une règle, pointez sur une autre paire, puis 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 avec Cmd / Ctrl + S.

4. refresh Actualisez la page pour appliquer les modifications.