Modifications: suivez vos modifications HTML, CSS et JavaScript

Sofia Emelianova

Utilisez le panneau Changes (Modifications) pour suivre les modifications de code apportées dans les outils de développement.

Présentation

Le panneau Modifications vous permet de suivre 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

Le panneau Changes (Modifications) n'affiche que les modifications que vous apportez 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 le panneau "Modifications"

Pour ouvrir le panneau 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 (Personnaliser et contrôler les outils de développement) en haut à droite > Plus d'outils > Modifications.

Par défaut, les outils de développement affichent le panneau Modifications en bas de la fenêtre "Outils de développement", 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 le panneau Modifications, puis sélectionnez un fichier dans la partie droite du panneau.

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

Le panneau Changes (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 le panneau Modifications, puis sélectionnez le fichier CSS que vous avez modifié dans la partie droite du panneau.

   

2. Cliquez sur le bouton Copier en bas du panneau des modifications.

Annuler toutes les modifications apportées à un fichier

Pour annuler les modifications apportées à un fichier:

1. Sur la gauche du panneau 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.