Partager via


Mettre à jour les fichiers .css à partir de l’onglet Styles (modification css miroir)

L’édition miroir CSS fournit une interaction bidirectionnel afin que vous puissiez modifier le CSS dans les deux sens :

  • Dans l’éditeur de code, modifiez le .css fichier. Vos modifications sont mises en miroir dans l’outil Éléments de l’onglet DevTools Edge .

  • Dans l’outil Éléments de l’onglet DevTools Edge , vos modifications sont mises en miroir dans le .css fichier de l’éditeur de code.

La modification miroir CSS est activée par défaut dans l’extension. Par conséquent, dans l’extension DevTools, sous l’onglet Styles de l’outil Éléments , lorsque vous modifiez des sélecteurs, des règles ou des valeurs CSS, le fichier local .css est automatiquement modifié à mesure que vous modifiez des valeurs.

Par exemple, lorsque vous sélectionnez une valeur de taille de point pour l’élément body, puis appuyez sur Flèche haut ou Flèche bas, si le .css fichier est ouvert, vous pouvez voir la valeur changer automatiquement dans le .css fichier en temps réel pendant que vous modifiez la valeur sous l’onglet Styles :

Modification dynamique du fichier .css lorsque vous modifiez des valeurs dans l’onglet Styles

Sans css miroir modification, l’onglet Styles dans Microsoft Edge DevTools est excellent pour le débogage et l’ajustement de vos sélecteurs CSS et règles CSS. Toutefois, bien que ces modifications soient immédiatement affichées dans le navigateur web, elles ne sont pas reflétées dans votre .css fichier. Cela signifie qu’après avoir modifié css sous l’onglet Styles , vous devez copier et coller vos modifications dans votre .css fichier.

La modification miroir CSS est une fonctionnalité de l’extension Microsoft Edge DevTools qui permet de contourner ce problème. Toute modification apportée sous l’onglet Styles modifie également automatiquement le .css fichier dans votre dossier ouvert dans Visual Studio Code. Vous pouvez modifier n’importe quel sélecteur CSS ou créer des sélecteurs CSS sous l’onglet Styles , et toutes les modifications sont automatiquement mises en miroir dans le fichier correct .css .

La modification miroir CSS fonctionne également pour un .html fichier qui contient un <style> élément, tel que la page Réussite. Cela est illustré dans Prise en main en cliquant sur le bouton Lancer l’instance.

Case à cocher Modification du miroir CSS

Si vous utilisez une URL (au lieu d’un chemin d’accès de fichier), css miroir modification nécessite l’ouverture d’un dossier de fichiers sources de page web dans Visual Studio Code que l’extension peut mapper aux ressources de page web de l’URL entrée dans la barre d’adresses ou un launch.json fichier. Si vous n’avez pas les fichiers sources locaux, mais que vous souhaitez modifier css dans DevTools, décochez la case CSS miroir modification pour empêcher les messages d’erreur sur le mappage et la modification miroir. Consultez Activation de la modification miroir CSS ci-dessous.

Enregistrement des modifications apportées au fichier .css

L’extension n’enregistre pas automatiquement les modifications qu’elle apporte dans l’éditeur. Un cercle blanc s’affiche sous l’onglet .css du fichier dans l’éditeur ; vous devez enregistrer manuellement les modifications si vous souhaitez les conserver.

Si vous fermez Visual Studio, le dossier actif ou le .css fichier, Visual Studio vous invite à enregistrer les modifications.

Exemple de modification de la mise en miroir de l’onglet Styles vers un fichier .css

Dans l’exemple suivant, index.html est ouvert dans Visual Studio Code et l’extension Microsoft Edge DevTools est ouverte. Nous sélectionnons l’icône flexbox dans le .searchbar sélecteur CSS, puis nous modifions le flex-direction en column.

La modification est reflétée dans l’onglet DevTools Edge et dans l’onglet Edge DevTools : Browser :

Sélection de l’icône flexbox sous l’onglet Styles pour créer une modification CSS

Suite à l’édition css miroir, Visual Studio Code accède automatiquement au fichier correct .css et au numéro de ligne approprié, puis insère le flex-direction: column code CSS :

La modification du paramètre CSS a créé une nouvelle ligne de code dans le fichier de .css approprié

Activation de la modification miroir CSS

Si vous disposez de fichiers sources approuvés et accessibles en écriture et que vous souhaitez que vos modifications CSS dans DevTools soient automatiquement modifiées dans les fichiers sources, cochez la case CSS miroir modification. Il est sélectionné par défaut.

Désactivez la zone miroir de modification CSS case activée si vous effectuez des expériences uniquement et qu’il existe une URL plutôt qu’un chemin d’accès au fichier dans la barre d’adresses de l’onglet Edge DevTools : Navigateur, et que vous n’avez pas de fichiers sources localement via la barre> d’activité Explorer> le bouton Ouvrir le dossier et que vous ne souhaitez pas envoyer de messages d’erreur sur le mappage et la modification miroir.

Pour activer ou désactiver la modification miroir CSS :

  1. Sous l’onglet Edge DevTools , sous l’onglet Éléments , accédez à l’onglet Styles .

  2. Cochez ou décochez la case css miroir modification :

    Case à cocher dans le panneau Styles de l’outil Éléments pour activer ou désactiver la mise en miroir CSS

    Ou bien, ouvrez le menu Commandes, commencez à taper le mot miroir, puis sélectionnez Outils Microsoft Edge : basculer miroir modification on|off pour les fichiers CSS dans l’espace de travail :

    Utilisation du menu Commandes pour activer ou désactiver l’édition du miroir CSS et activer ou désactiver l’édition css miroir

Prise en charge du code sourcemap

La mise en miroir CSS prend également en charge les abstractions telles que Sass ou CSS-in-JS lorsque vous avez configuré votre projet pour produire des cartes sources. Nous avons un problème de suivi sur GitHub et nous vous invitons à nous faire part de vos commentaires sur la façon dont cela pourrait être amélioré : Modification miroir CSS avec sourcemaps : Problèmes connus et commentaires.

Voir aussi