Utilisez le panneau Modifications pour suivre les modifications de code effectuées dans les outils de développement.
Présentation
Le panneau Modifications vous permet de suivre les modifications que vous apportez aux éléments suivants:
- Code HTML dans Sources avec forcement local activé
- CSS dans Éléments > Styles ou Sources
- JavaScript dans Sources
Le panneau Modifications n'affiche que les modifications que vous apportez dans les outils de développement. Si vous actualisez DevTools ou votre page, les modifications disparaissent.
Pour que DevTools conserve les modifications entre les chargements de pages, suivez la procédure décrite dans la section Forcer des valeurs.
Pour que DevTools écrive les modifications dans vos sources locales, suivez la procédure décrite dans Modifier et enregistrer des fichiers avec Workspaces.
Ouvrir le panneau "Modifications"
Pour ouvrir le panneau Modifications:
Appuyez sur Commande+Maj+P (Mac) ou Contrôle+Maj+P (Windows, Linux, ChromeOS) pour ouvrir le menu de commande.
Commencez à saisir
changes, sélectionnez Afficher les modifications, puis appuyez sur Entrée.
Vous pouvez également cliquer sur 
Personnaliser et contrôler les outils de développement > Plus d'outils > Modifications en haut à droite.
Par défaut, DevTools affiche le panneau Modifications en bas de la fenêtre DevTools, dans le volet.
Afficher et comprendre vos modifications
Pour afficher vos modifications:
- Accédez aux outils de développement.
Modifiez vos sources:
- HTML: activez d'abord Forcer localement, puis effectuez les modifications dans Sources.
- CSS dans Éléments > Styles ou Sources
- JavaScript dans Sources
Ouvrez le panneau Modifications, puis sélectionnez un fichier sur le côté droit du panneau.
Examinez une sortie
diffqui met en évidence les éléments suivants:
Le panneau Modifications affiche automatiquement la sortie diff sous forme mise en forme. Vous n'avez donc pas besoin de faire défiler l'écran 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:
Ouvrez le panneau Modifications et, sur la droite, sélectionnez le fichier CSS que vous avez modifié.
Cliquez sur le bouton
Copier en bas du panneau "Modifications".
Rétablir toutes les modifications apportées à un fichier
Pour annuler les modifications apportées à un fichier:
- Sur la gauche du panneau Modifications, sélectionnez un fichier contenant des modifications à annuler.
- Dans la barre d'action en bas, cliquez sur
Rétablir toutes les modifications du fichier actuel.
