Modifications: suivez vos modifications HTML, CSS et JavaScript

Sofia Emelianova

Dans l'onglet Modifications, suivez les modifications apportées aux éléments suivants:

• Code HTML dans les sources avec les remplacements locaux activés
• CSS dans Éléments > Styles ou Sources
• JavaScript dans les sources

L'onglet Modifications affiche les modifications que vous avez apportées dans les outils de développement. Si vous actualisez les outils de développement ou votre page, les modifications disparaissent.

Pour que les modifications apportées aux outils de développement soient conservées lors des chargements de page, suivez la procédure décrite dans la section Remplacements locaux.

Pour que les outils de développement écrivent des modifications dans vos sources locales, suivez la procédure décrite dans Modifier et enregistrer des fichiers avec des espaces de travail.

Ouvrir l'onglet "Modifications"

Pour ouvrir l'onglet Modifications:

1. Ouvrez les outils de développement.

2. Appuyez sur Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux, ChromeOS) pour ouvrir le menu Commande.

3. Commencez à saisir changes, sélectionnez Show Changes (Afficher les modifications), puis appuyez sur Entrée.

   

Vous pouvez également cliquer sur Customize and control DevTools > More tools > Changes (Personnaliser et contrôler les Outils de développement > Plus d'outils > Modifications) en haut à droite.

Changes" width="800" height="460">

Par défaut, les outils de développement affichent l'onglet Modifications en bas de leur fenêtre, dans le panneau.

Afficher et comprendre vos modifications

Pour afficher vos modifications:

1. Ouvrez les outils de développement.

2. Apportez des modifications à vos sources:

   • HTML: commencez par activer les Remplacements locaux, puis effectuez les modifications dans Sources
   • CSS dans Éléments > Styles ou Sources
   • JavaScript dans les sources

3. Ouvrez l'onglet Modifications, puis sélectionnez un fichier à droite de l'onglet.

4. Observez un résultat diff qui met en évidence les éléments suivants:

L'onglet Modifications affiche automatiquement la sortie diff. Vous n'avez donc pas besoin de faire défiler la page horizontalement pour voir les modifications sur une seule ligne.

Copier les modifications CSS

Si vous avez modifié le code CSS dans Éléments > Styles, vous pouvez tous les copier à l'aide d'un seul bouton:

1. Ouvrez l'onglet Modifications, puis sélectionnez le fichier CSS que vous avez modifié dans la partie droite de l'onglet.

   

2. Cliquez sur le bouton Copier au bas de l'onglet Modifications.

Annuler toutes les modifications apportées à un fichier

Pour annuler les modifications apportées à un fichier:

1. Sur la gauche de l'onglet Modifications, sélectionnez un fichier contenant les modifications à annuler.
2. Dans la barre d'action située au bas de l'écran, cliquez sur Annuler toutes les modifications apportées au fichier actuel.