Comment activer en temps réel modification de la CSS dans chrome?

Vous faites du mal... le panneau ressources n'est pas là pour le live edit, si vous souhaitez modifier le fichier css associé à un élément HTML, cliquez-droit sur l'élément, puis dans le panneau de droite, vous verrez les styles css associés à l'élément sélectionné. Vous pouvez modifier les règles et vous pourrez voir les changements en temps réel.

Peut-être vous pouvez vérifier quelques vidéos à apprendre quelques notions de base sur les Outils de développement Chrome, et après cela, si vous voulez en savoir plus, vous pouvez cocher cette question:

Outils de développement Chrome: Meilleure ressource pour l'apprentissage des fonctions avancées?

OriginalL'auteur Tom Sarduy

En Chrome, en cliquant sur quelque chose comme "tous les.css:1" dans le Styles volet de la Éléments onglet de DevTools prend une à l' Sources onglet de DevTools. Si vous êtes en train de regarder le code sur le serveur distant, les règles CSS dans cette vue de la source ne sont pas en direct-modifiable (à la différence du vivre-édition Éditeur de Style onglet de Firefox*), sauf si vous êtes:

1. de l'affichage de la "inspecteur-stylesheet" -- temporaire de la feuille de style contenant de nouvelles règles de style que vous avez créé avec le bouton "+" dans le volet Styles de l'onglet Éléments. En cliquant sur un nouvel article "inpector-feuille de style:1" lien vous mènera à la source éditable de la temporaire de règles que vous avez créées.

2. de la visualisation d'un persistante espace de travail local. Cette mise en place ne prend que quelques étapes supplémentaires, décrites ici: "Mettre en Place la Persistance avec DevTools espaces de travail" .
   Fondamentalement, vous faites un dossier local sur votre ordinateur où vous pouvez enregistrer des copies locales que vous dirigez en Chrome pour une utilisation dans en lieu et place de la version sur internet. Voir les instructions du lien. Notez que, comme il est dit-il, "Si vous êtes à la cartographie des fichiers depuis un serveur à distance au lieu d'un serveur local, lorsque vous actualisez la page, Chrome recharge la page à partir du serveur distant. Vos modifications persistent à disque et sont réappliquées si vous continuez le montage dans des espaces de travail." (Il suffit donc de taper un caractère d'espace dans la source locale fichier CSS pour voir vos modifications appliqué à nouveau, si vous avez actualisé ou de naviguer vers une autre page qui utilise la même feuille de style.)

* Dans Firefox, si vous faites un clic droit sur un élément sur une page web, sélectionnez Inspecter l'Élément, puis dans le Règles volet de la Inspecteur onglet, cliquez sur un lien sur la droite, comme par exemple "tous les.css:1", vous êtes redirigé vers un Style "Rédacteur en chef" de l'onglet où vous pouvez immédiatement live-modifier, contrairement à google Chrome, l'obligation de faire vous de la carte dans un fichier local. Cela peut entraîner une certaine confusion, si ils attendent la même chose de comportement à partir de Chrome DevTools.

OriginalL'auteur Jacob C.