Suivre les modifications apportées aux fichiers à l’aide de l’outil Modifications
L’outil Modifications effectue le suivi des modifications que vous avez apportées à CSS ou JavaScript dans DevTools. Il vous indique les modifications à apporter à vos fichiers sources réels une fois que vous avez correctement utilisé DevTools pour modifier une copie des fichiers de votre page web envoyés à partir du serveur :
Utilisez l’outil Modifications pour afficher rapidement toutes vos modifications afin de réappliquer ces modifications aux fichiers sources réels dans votre éditeur de code source.
Ouvrez l’outil Modifications en cliquant sur l’icône Autres outils
Dans la barre d’outils Barre d’activités ou Affichage rapide , cliquez sur le bouton Plus d’outils (
») puis sélectionnez Modifications :
L’outil Modifications s’ouvre dans la barre d’activité ou dans l’affichage rapide, selon la barre d’outils que vous avez utilisée.
Ouvrez l’outil Modifications à l’aide du menu Commandes
Pour ouvrir l’outil Modifications à l’aide du menu Commandes :
Pour ouvrir le menu Commandes, appuyez sur Ctrl+Maj+P sur Windows/Linux ou Sur Cmd+Maj+P sur Mac.
Commencez à taper les modifications. La commande Afficher les modifications est mise en surbrillance :
Appuyez sur Entrée. L’outil Modifications s’ouvre dans le panneau Affichage rapide :
Voir aussi :
Interpréter les lignes ajoutées, les lignes supprimées et les différences dans une ligne
Chaque fichier modifié est répertorié dans le volet latéral. La sélection d’un fichier affiche les modifications sous forme d’affichage diff . Vous ne verrez pas le fichier entier, mais uniquement les lignes qui ont changé, ainsi que quelques lignes au-dessus et en dessous des lignes modifiées, pour le contexte.
L’affichage diff suivant montre qu’il y a eu deux modifications dans différentes parties d’un fichier. Une modification est une insertion, et une modification est plusieurs lignes supprimées :
| Type de modification | Indicateur |
|---|---|
| Ligne supprimée | Chaque ligne supprimée du code est précédée d’un - et est de couleur rouge. |
| Ligne ajoutée | Chaque nouvelle ligne a un + devant elle et est de couleur verte. |
| Ligne modifiée | Paire adjacente de lignes, avec une - ligne, puis une + ligne. |
Les modifications sont représentées sous forme d’insertion ou de suppression de lignes de code individuelles, dans les deux colonnes de numéros de ligne. La colonne de gauche représente les numéros de ligne dans l’ancien fichier, et la colonne de droite représente les numéros de lignes dans le nouveau fichier.
Ouvrir un fichier modifié dans l’outil Sources
Le fait de cliquer sur une ligne modifiée dans l’outil Modifications ouvre le fichier dans l’outil Sources , puis fait défiler jusqu’à la ligne modifiée.
Annuler toutes les modifications
Pour annuler toutes les modifications, en bas de l’outil Modifications , cliquez sur le bouton Rétablir toutes les modifications apportées au fichier actif (
) :
Faire défiler horizontalement les entrées
Lorsque vous avez apporté une modification à un fichier minifié, l’outil Modifications vous permet de faire défiler horizontalement pour afficher tout votre code minifié :
Pour faire défiler horizontalement, cliquez sur la barre de défilement horizontale ou appuyez sur les touches de direction gauche ou droite.