Vous modifiez du CSS sur un site en production, vous changez de page, et toutes vos modifications disparaissent. Frustrant? Absolument. Le panneau Éléments des Outils de développement Chrome est très pratique pour tester rapidement des styles et du balisage, mais jusqu'à récemment, toute expérimentation ne survivait pas au premier F5. Et devoir retourner dans l'éditeur de code, recompiler et redéployer juste pour vérifier une hypothèse est une perte de temps que personne n'apprécie.

Heureusement, Chrome dispose d'un mécanisme intégré qui résout ce problème. Il s'appelle Remplacements locaux et vous permet d'enregistrer les modifications localement afin que le navigateur les applique même après avoir actualisé la page. Cette fonctionnalité est apparue avec Chrome 65, mais elle a gagné en capacités au fil des ans: vous pouvez désormais remplacer non seulement des fichiers, mais aussi les en-têtes de réponse HTTP, et simuler des requêtes API directement depuis le navigateur.

Dans ce guide, de l'activation au suivi des modifications: tout ce dont un développeur a besoin pour travailler efficacement avec les remplacements locaux.

💡 Aperçu rapide:

• Activez les remplacements locaux dans l'onglet Sources et choisissez un dossier pour stocker les fichiers remplacés.
• Modifiez le CSS, le JS ou le HTML dans l'onglet Sources, les changements sont automatiquement sauvegardés localement.
• Actualisez la page ou naviguez vers une autre, Chrome continue d'appliquer vos modifications.
• Suivez les différences dans l'onglet Modifications et gérez les fichiers via l'onglet Remplacements.

Comment activer les remplacements locaux

Ouvrez les Outils de développement (F12 ou Ctrl+Shift+I) et allez dans l'onglet Sources. Dans la partie gauche du panneau, trouvez l'onglet Remplacements. S'il n'est pas visible, cliquez sur l'icône >> pour afficher les onglets masqués.

Cliquez sur le bouton Sélectionner un dossier pour les remplacements. Chrome demandera l'autorisation d'accéder au système de fichiers, choisissez un dossier existant ou créez-en un nouveau. C'est là que tous les fichiers remplacés seront stockés.

Après avoir sélectionné le dossier, la case Activer les remplacements locaux se coche automatiquement. À noter: dans l'onglet Réseau, une icône d'avertissement apparaîtra, signalant que certaines requêtes réseau peuvent être interceptées et remplacées par des versions locales de fichiers. C'est normal et cela signifie que les remplacements sont actifs.

Comment effectuer et sauvegarder des modifications

Passons à la partie intéressante, la modification. Ouvrez n'importe quel fichier via l'onglet Sources: trouvez le CSS ou le JavaScript nécessaire dans l'arborescence de fichiers à gauche et double-cliquez. Faites vos modifications et appuyez sur Ctrl+S, le fichier sera sauvegardé dans votre dossier local, et Chrome commencera à utiliser la version locale au lieu de celle du serveur.

Nuance importante: modifiez le balisage spécifiquement dans l'onglet Sources, pas dans Éléments. Le panneau Éléments est pratique pour le travail visuel sur le DOM, mais les modifications HTML qui y sont faites ne sont pas sauvegardées en tant que remplacements locaux. Passez dans Sources, trouvez le fichier HTML nécessaire et modifiez-le là, un point violet à côté du nom de fichier confirmera que le fichier est remplacé.

Actualisez la page ou naviguez vers une autre, Chrome continuera d'appliquer vos modifications. Vous voulez restaurer l'original? Supprimez le fichier du dossier des remplacements ou décochez Activer les remplacements locaux.

Il convient de mentionner séparément le remplacement des en-têtes HTTP, une capacité ajoutée dans les versions ultérieures de Chrome. Allez dans l'onglet Réseau, faites un clic droit sur une requête et sélectionnez Remplacer les en-têtes. Chrome créera un fichier .headers dans votre dossier local où vous pourrez définir des en-têtes de réponse personnalisés. C'est inestimable pour tester les politiques CORS, Content-Security-Policy et la mise en cache sans modifier le serveur.

Comment suivre les modifications effectuées

Lorsque vous remplacez activement des dizaines de fichiers, il est facile d'oublier ce qui a été changé exactement et où. Pour cela, les Outils de développement disposent de deux outils utiles.

L'onglet Remplacements (dans le panneau Sources) affiche une liste complète des fichiers remplacés, groupés par domaines. De là, vous pouvez ouvrir n'importe quel fichier pour le modifier à nouveau ou supprimer un remplacement inutile, clic droit → Supprimer.

L'onglet Modifications se trouve dans la partie inférieure des Outils de développement, à côté de l'onglet Console. Il montre la différence entre le fichier original et votre version locale, ligne par ligne, comme dans Git. Pratique pour un audit rapide: ce que vous avez exactement changé dans chaque fichier et dans quelle mesure les modifications diffèrent de la source.

Conseil rapide: avant de refactoriser ou d'expérimenter sur un site en production, prenez un instantané des modifications via l'onglet Modifications, c'est votre "commit" local auquel vous pouvez toujours revenir.

Les remplacements comme outil de test de performance

Au-delà du prototypage pratique, les remplacements locaux ouvrent un scénario intéressant pour l'analyse de performance. Vous avez la possibilité de modifier le code d'un site qui n'est pas en local et de mesurer immédiatement l'impact de ces modifications sur la vitesse de chargement et le rendu.

Par exemple, vous soupçonnez qu'un script d'analyse tiers ralentit le rendu du premier écran. Remplacez la requête, substituez le script original par un fichier vide ou une version différée, et lancez Lighthouse. La différence dans les métriques montrera clairement si l'optimisation est justifiée.

Un autre scénario: les polices. Remplacez le fichier CSS, en supprimant @font-face pour une police personnalisée, et voyez de combien le LCP (Largest Contentful Paint) change. Ou expérimentez avec l'ordre de chargement des scripts, déplacez le JS critique du <head> à la fin du <body> et comparez les métriques.

Harry Roberts et Umar Hansa, experts reconnus en performance web, ont publié des screencasts avec des exemples clairs de cette approche. Leurs démonstrations le montrent: les remplacements locaux transforment le navigateur en un bac à sable pour les hypothèses de performance où chaque itération prend des secondes, pas des minutes.

Si vous travaillez avec un serveur de développement local, la valeur des remplacements est moindre, vous contrôlez déjà les sources. Mais lorsque vous devez tester rapidement une idée en production ou sur le site de quelqu'un d'autre sans accès au code source, cet outil est indispensable.

⁉️🤔 Foire aux questions

Les remplacements locaux sont-ils conservés après la fermeture du navigateur?

Oui, tous les fichiers sont stockés dans le dossier que vous avez choisi sur le disque. Après avoir redémarré Chrome, les remplacements sont automatiquement pris en compte, à condition que la case Activer les remplacements locaux soit restée cochée. Les fichiers eux-mêmes ne disparaissent pas, car ce sont des fichiers ordinaires dans votre système de fichiers.

Puis-je remplacer une réponse API (JSON), et pas seulement des fichiers statiques?

Oui, à partir de Chrome 117, cela fonctionne. Dans l'onglet Réseau, faites un clic droit sur une requête et sélectionnez Remplacer le contenu, Chrome créera un fichier local avec le corps de la réponse que vous pouvez modifier. À la prochaine requête, le navigateur retournera votre version locale au lieu de la réponse du serveur.

Pourquoi mes modifications faites dans le panneau Éléments sont-elles réinitialisées après actualisation?

Le panneau Éléments modifie le DOM en mémoire, pas les fichiers sources. Pour que les modifications survivent à un F5, passez dans l'onglet Sources, trouvez le fichier correspondant et modifiez-le là. Sauvegardez via Ctrl+S, et Chrome créera un remplacement local.

Comment partager les remplacements locaux avec un collègue?

Envoyez simplement le contenu du dossier des remplacements. Le collègue place les fichiers dans son dossier, le spécifie dans les Outils de développement via Sélectionner un dossier pour les remplacements, et toutes les modifications s'appliquent sur sa machine. Pour le travail en équipe, il est pratique de conserver le dossier des remplacements dans le dépôt Git du projet.

Puis-je utiliser les remplacements locaux dans Firefox ou d'autres navigateurs?

Firefox n'a pas d'équivalent aux remplacements locaux, la sauvegarde des modifications entre deux rechargements n'est pas prise en charge. Edge, basé sur Chromium, a la même fonctionnalité que Chrome puisqu'il utilise la base de code commune des Outils de développement. Brave et Opera prennent également en charge les remplacements en tant que navigateurs Chromium.

Pourquoi vous avez réellement besoin des remplacements locaux

Les remplacements locaux dans les Outils de développement Chrome ne sont pas seulement une "fonctionnalité pratique". C'est un moyen de transformer le navigateur en un environnement complet de prototypage rapide et de test d'hypothèses sans toucher au code de production. Vous économisez les cycles «modifier → compiler → déployer → vérifier» et obtenez des résultats instantanément.

Essayez dès maintenant: ouvrez n'importe quel site, activez les remplacements et changez la couleur d'un titre. Actualisez la page. Vous voyez que la couleur est restée? C'est tout l'intérêt de cette fonctionnalité.