Modifications: suivez vos modifications HTML, CSS et JavaScript

Sofia Emelianova

GitHub

Dans l'onglet Modifications, suivez les modifications que vous apportez aux éléments suivants:

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

L'onglet Modifications présente les modifications que vous avez effectuées dans les Outils de développement. Si vous actualisez les Outils de développement ou votre page, les modifications disparaîtront.

Pour que les outils de développement appliquent toujours les modifications lors des chargements de page, suivez la procédure décrite dans Forçages locaux.

Pour que les outils de développement modifient l'écriture 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. Accédez aux Outils de développement.

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

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

   

Vous pouvez également cliquer sur Personnaliser et contrôler 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 la fenêtre des outils de développement, dans le panneau.

Afficher et comprendre vos modifications

Pour afficher vos modifications:

1. Accédez aux Outils de développement.

2. Modifiez vos sources:

   • HTML: commencez par activer les remplacements locaux, puis apportez des modifications dans Sources.
   • CSS dans Éléments > Styles ou Sources
   • JavaScript dans Sources

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

4. Observez une sortie diff qui met en évidence les éléments suivants:

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

Copier les modifications CSS

Si vous avez apporté des modifications au code CSS dans la section É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 en bas de l'onglet Modifications.

Annuler toutes les modifications apportées à un fichier

Pour annuler des 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 qui se trouve en bas, cliquez sur Rétablir toutes les modifications apportées au fichier actuel.