Je suis un développeur / concepteur Web, et j'ai besoin de mes clients analphabètes de code pour pouvoir vous gâcher facilement avec les couleurs d'éléments particuliers, sauvegarder ces changements CSS et les envoyer à moi. Je vais les guider au téléphone, mais j'en ai encore besoin pour être plus facile que de les attendre à localiser les sélecteurs CSS dans une feuille de thème et écrivez des codes hexagonaux.
J'ai besoin d'un inspecteur en navigateur pouvant permettre à un individu-analphabète de:
Je trouve l'existence de cette énigme très décontractée - pourquoi les vendeurs de navigateur ont-ils la peine de faire une telle suite de modifications de page Web, où on peut manipuler CSS, mais pas inclure une fonctionnalité "Enregistrer des modifications" de base? < / em> je manque quelque chose?
J'ai trouvé, en chrome, que l'on peut manipuler librement le CSS d'un élément avec l'inspecteur, puis cliquez sur la feuille CSS associée à chaque règle (dans le coin supérieur droit de la règle) pour vous amener à la CSS modifiée. Feuille dans l'onglet Sources. C'est ce que je veux enregistrer.
D'accord, je l'ai compris. Lorsque vous enregistrez un fichier dans l'onglet Sources de Chrome, Vous n'éditionnez pas simplement ce fichier - Vous définissez en fait chrome pour constamment automatiquement ce fichier sur chaque changement faire à elle.
Ainsi, après avoir enregistré un fichier CSS, chaque changement que vous apportez sur le CSS d'un élément dans l'inspecteur, sauvera automatiquement dans ce fichier. cela persiste même si Vous redémarrez le navigateur.
confusion est apparu, car lorsque vous avez un fichier marqué pour l'enregistrement automatique, et vous enregistrez ensuite-comme un fichier modifié, chrome weirdly écrit l'original Fichier, pas celui que vous avez cliqué sur le bouton droit de la souris. Dès que vous effectuez une modification ultérieure, lorsque Chrome écrira automatiquement chaque modification actuelle de ce fichier. je considère que cela soit un bogue en chrome.
Leçon sera appris, premier, enregistrer-comme le fichier. seconde, apportez vos modifications.
pour être clair, si vous enregistrez, apportez des modifications, puis enregistrez-la à nouveau - Chrome aura enregistré la source originale , pas votre source modifiée. Cela rend l'ordre des choses importantes.
Je ne connais pas un moyen de voir une liste de fichiers actuellement marqués pour économiser automatiquement ou comment le signaler.
(+) chrome le fait parfaitement. C'est exactement ce que je veux.
(-) l'inspecteur de Firefox's sinon magnifique semble ne pas avoir cette capacité de base.
(?) L'éditeur de style de Firefox facilite la sauvegarde des feuilles de sauvegarde, mais change d'éléments inspectés - étrangement - ne semble pas être appliquée.
(-) chrome peut être en mesure de le faire, au fond du panneau Sources, mais il semble que vous ayez besoin d'être un pirate informatique pour le comprendre, car je suis le code-littéraire, et Je ne l'ai pas encore compris.
Edit 01:
à partir d'ici, on peut cliquer avec le bouton droit de la souris sur ce code source modifié, puis sauvegarder- Edit 02:
C'est en fait une sorte de cool, mais très trompeur.
PRESTO, votre thème CSS modifié vous attend sur votre disque dur.
3 Réponses :
J'utilise Ceci extension chromée Pour enregistrer les fichiers que je modifiez directement dans Chrome DevTools.
Semble difficile de le configurer, mais cela fait son travail. De plus, je pense que c'est un must pour les développeurs Web / designers.
Peut-être que avec un peu de peau vous pouvez faire faire ce que vous essayez de faire.
Je suis assez à l'aise avec mon flux de travail à Notepad ++, et je suis plus à la recherche d'une solution aussi simple-que possible pour mes clients - sans leur demander d'installer des extensions. J'ai posté ma propre réponse sur une solution que j'ai pensée pour chrome sans extensions. Merci de votre contribution de toute façon, Yenn, car je suis sûr qu'un jour, un Googler trouvera ce fil et trouverez votre réponse plus pertinente à leurs besoins. Franchement, tu m'as curieux de faire de devtools pour mon propre flux de travail :)
Eh bien, je traite avec mes clients tous les jours et une extension de 1 clic-n-go est la façon la plus simple que je pense ... de toute façon im confortable avec mon sublimeext2 (ou Dreamweaver pour un grand projet), je ne travaille pas avec l'extension, c'est juste pour un travail rapide. Comme toujours, même objectif, tant de façons de l'atteindre;)
"moyen le plus simple"? Dans votre réponse, "semble difficile à la configurer, mais cela fait son travail. [...] Peut-être que vous pouvez faire de sorte que vous pouvez faire ce que vous essayez de faire." - c'est le Une partie qui me conduit à croire que Chrome DevTools n'est peut-être pas le moyen le plus simple. Je n'ai pas l'intention de faire installer mes clients et de configurer n'importe quoi pour effectuer la tâche que Chrome peut déjà gérer de manière native. Cela ne veut pas dire, je pense que votre réponse est fausse, Mais je ne pense pas que ce soit le plus simple que mes clients dans ma situation donnée.
Même si très utile, de travailler avec DevTools AutoSave Vous devez installer Un mini-serveur (fourni) qui, à tour de rôle, nécessite Node.js, donc absolument une extension de 1-click-n-go.
Quel est le problème avec l'installation d'une extension pour faciliter la tâche de vos clients? Je suis d'accord que les faire configurer des choses va les confondre, mais l'installation d'une extension semble raisonnable.
garder à l'esprit, cependant, que vous doit faire des choses dans cet ordre. Si vous enregistrez la feuille de style, faites que vos modifications CSS, sauvegardez à nouveau, chrome écrira étrangement la source non modifiée originale pour déposer (jusqu'à ce que vous fassiez une modification supplémentaire , qui provoque des modifications de chrome pour enregistrer toutes les modifications apportées au fichier).
Comment utiliser cela avec vos clients et vos amis
C'est une bonne idée de vérifier que les modifications figurent dans le fichier qu'ils vous ont envoyées avant de fermer la fenêtre de leur navigateur: P
viens vraiment? Il y a une extension qui fait exactement les mêmes choses que vous voudriez manuellement et que je l'ai posté comme une réponse comme il y a 1 heure.
@Yenn: Oui. vraiment. Je ne veux pas utiliser une extension pour reproduire la fonctionnalité qui existe déjà de manière natale dans le navigateur.
Une réponse très belle et descriptive, +1 pour cela. De plus, l'extension Autosave est peu compliquée pour configurer si quelqu'un est nouveau à Nodejs.
Ce n'est pas le comportement que j'aurais attendu. Bonne prise.
Question idiote peut-être: Je suppose que lorsque vous économisez aussi, devez-vous trouver la feuille de style d'origine (c'est-à-dire le code source actuel?) Et économisez-en dessus?
Sitemod.io vous permet d'utiliser des outils de développeur chromé pour modifier tout html , CSS ou js sur n'importe quelle page Web en direct ou local. Une fois que vous avez terminé de travailler, vous pouvez enregistrer les modifications et obtenir une URL unique à la version modifiée afin que vous puissiez partager votre mod avec vos clients.
ici est un exemple qui illustre comment ce qui précède peut être fait.
Je suis l'un des développeurs de cet outil, alors n'hésitez pas à me demander n'importe quoi 🤓
Parce que le navigateur n'a pas d'accès en écriture aux fichiers? ;) Sauvegarder-comme pourrait être gentil Tho
Dupliqué possible de Comment enregistrer des modifications CSS des styles panneau des outils de développeurs chromés?
@bookcasey - Je crois que le message est déjà obsolète. Ils indiquent le panneau de ressources et Chrome a depuis déplacé cette fonctionnalité sur le panneau Sources. Après un examen ultérieur, je pense avoir peut-être trouvé la manière officielle de le faire en Chrome. [postera la solution une fois que je le trouve]
@Allendar: Save-comme fonctionnalité est précisément ce que je cherche.
Bien; Vous "pouvez" copier / coller la source ajustée entière dans une Texterea, puis ajax un script serveride pour réécrire le fichier pour vous. A ajouté à cela, vous pouvez ajouter un en-tête Actualiser par la suite, ou une source de source AJAX. Assez d'options :)
EHM a-t-il lu ma réponse? :)
Oui, et qu'attendez-vous? :)
une sorte de retour d'information?
@Allendar, je suis satisfait du client avec moi la feuille de style modifiée de retour à moi. J'ai constaté que, dans le panneau d'inspection CSS de Chrome pour un élément, on peut cliquer sur la feuille de style associée en haut à droite de chaque règle, et il vous amène à la source CSS modifiée. À partir de là, vous pouvez cliquer avec le bouton droit de la souris (n'importe où dans la source) et enregistrer, cependant, dans ce qui me semble sous forme de bogue en chrome, le fichier enregistré est la source d'origine - et non le code source que vous avez droit. -Clicked Save-telle. Quelle frustration.
Donc, il s'avère, lorsque vous enregistrez un fichier source en chrome, vous ne le sauveez pas. Vous définissez Chrome pour économiser constamment à cet emplacement, pour chaque modification. qui est soigné, mais ennuyeux et inutile. Je veux juste économiser une fois. Cette économie constante persiste même si vous redémarrez le navigateur et que je ne trouve aucun moyen de dire ce qu'il est en train de décider de sauvegarder automatiquement le changement. Confusion est apparu, lorsque Chrome enregistre secrètement ce fichier et que vous enregistrez - comme à nouveau pour écraser, il écrit le fichier d'origine, et non ce que vous avez cliqué sur le bouton droit. Une fois sur plus de changement, chrome écrit automatiquement tout changement
@Allendar: a résolu le problème. Réponse posté :)
Bon d'entendre :). Essayez d'utiliser un peu moins audacieux dans vos prochains messages. Il suffit de vérifier vos messages passés et vous l'utilisez vraiment: P Bonne chance avec vous codant :)
@Allendar: J'utilise audacieux de deux manières différentes. Premier, Je l'utilise pour mettre en surbrillance les points clés, qui permet de rapidement SKIM Mes paragraphes pour choisir les éléments importants; Je comprends parfaitement que la plupart des gens ne se soucient pas de la majeure partie de ce que quiconque a à dire et essayons de d'obtenir une gist de la situation. Idéalement, j'aime bien commencer par un résumé audacieux, puis Remplissez-le avec des détails non audacieux pour l'utilisateur intrigué. La deuxième façon que j'utilise audacieux, c'est mettre accent plus fort que de simples italique, pour mieux représenter la façon dont je le dirais. Prenez cela, allendier! : D
C'est bien! Maintenant, comment arrêtez-vous d'enregistrer automatiquement que le fichier CSS? Même si je supprime le fichier sauvegardé, il continue de réapparaître chaque fois que je modifie: /
Sauvegarde via Mappage d'espace de travail est la solution actuelle. Ce que j'aimerais vraiment voir, c'est une liste de différences (ou diff) entre originale et modifiée, pour tous les fichiers. Stackoverflow .Com / Questions / 23642839 / ...