Perché non riesco a salvare le modifiche CSS in Firebug? [chiuso]


143

Firebug è lo strumento più conveniente che ho trovato per modificare i CSS - quindi perché non esiste una semplice opzione "salva" per i CSS?

Mi ritrovo sempre a fare modifiche in Firebug, quindi tornare al mio file .css originale e replicare le modifiche.

Qualcuno ha trovato una soluzione migliore?

EDIT: sono consapevole che il codice è memorizzato su un server (nella maggior parte dei casi non è mio), ma lo uso quando costruisco i miei siti web.

Firebug sta solo usando il file .css che Firefox ha scaricato dal server, sa esattamente quali linee in quali file sta modificando. Non riesco a capire perché non esiste un'opzione "esporta" o "salva", che consente di memorizzare il nuovo file .css. (Che potrei quindi sostituire il telecomando con).

Ho provato a cercare in posizioni temporanee, a scegliere File > Salva ... e a sperimentare le opzioni di output su Firefox, ma non ho ancora trovato un modo.

EDIT 2: Il gruppo di discussione ufficiale ha molte domande , ma nessuna risposta.


Ecco un post che ho fatto un po 'di tempo fa al gruppo: groups.google.com/group/firebug/browse_thread/thread/…
NickFitz,

Hai provato cssUpdater.com ? Con esso modificato in FireBug, premi il pulsante "Sincronizza ora" per trasferire tutte le modifiche ai file CSS originali.
Jhonte,

2
Firebug ha un modo specifico per farlo. Dopo aver apportato alcune modifiche ai CSS aggiungendo regole nella vista CSS a destra, fai clic sull'indirizzo per l'elemento di stile di riferimento all'estrema destra, quindi scegli Modifica dal menu a discesa (NON MODIFICA SORGENTE), fai clic su su Live Modifica e copia / incolla nel contenuto del tuo cuore.
Chris Like

Ricarica automatica nel browser al cambio di file locale. In questo modo posso rimanere nel mio editor. Ma funziona solo localmente.
Nils Lindemann,

Risposte:


27

Sono arrivato qui alla ricerca esattamente di questa funzionalità, ovvero la possibilità di salvare le CSSproprietà modificate nel file originale (sulla mia macchina di sviluppo locale). Sfortunatamente dopo aver cercato molto e non aver trovato nulla adatto alle mie esigenze (OK, c'è CSS Updater ma devi registrarti ed è un'estensione a pagamento ...) Ho rinunciato a Firefox + Firebug e ho cercato qualcosa di simile per Google Chrome. Indovina un po '... Ho appena trovato questo fantastico post che mostra un buon modo per farlo funzionare (integrato in Chrome: non sono necessarie estensioni aggiuntive):

Cambia CSS e SALVA sul file system locale utilizzando Chrome Developer Tools

inserisci qui la descrizione dell'immagine

L'ho provato ora e funziona benissimo evidenziando le linee modificate. Basta fare clic su Salva e il gioco è fatto! :)

Ecco un video che spiega questo e molto altro: I / O Google 2011: Chrome Dev Tools Reloaded

Spero che ti aiuti se non ti importa cambiare browser mentre modifichi i tuoi file CSS. Ho già apportato la modifica per ora, ma mi piacerebbe davvero avere questa funzionalità integrata in Firebug. :)


[Aggiornamento 1]

Oggi ho appena visto questo video: Firefox CSS live edit in Sublimetext (lavori in corso) Sembra davvero promettente.

[Aggiornamento 2]

Se utilizzi Visual Studio 2013 con Web Essentials , sarai in grado di sincronizzare automaticamente i CSS come mostrato in questo video:

Web Essentials: integrazione degli strumenti del browser


1
Esiste un'altra opzione, con Chrome Canary è possibile abilitare una mappatura diretta dei file js e css, consultare questo articolo per istruzioni su come abilitare l'esperimento dell'area di
Matteo Conta,

Molto bello @contam. Le cose stanno davvero evolvendo! Grazie per l'aggiornamento. :)
Leniel Maccaferri,

@LenielMacaferi [Aggiornamento 2]: Non sono mai riuscito a ottenere gli elementi essenziali per il Web per aggiornare i CSS attuali, c'è qualche configurazione da impostare?
Arvand,

104

Mi chiedo lo stesso da un po 'di tempo ormai,
sto solo sconvolgendo il momento in cui il tuo freestyle-css in-the-moment con firebug viene fatto a pezzi da
una ricarica accidentale o quant'altro ....

Per i miei intenti e scopi, ho finalmente trovato lo strumento ....: FireDiff .

Ti dà una nuova scheda, probabilmente uno strano riferimento a David Bowie, chiamato "modifiche"; che non solo ti consente di vedere / salvare ciò che Firebug, ovvero te, ha fatto,
ma anche di tenere traccia delle modifiche apportate dalla pagina stessa .... se è e / o sei così incline.

Così grato di non dover re-digitare, o ri-immaginare e poi ri-digitare nuovamente, ogni regola CSS che faccio ...

Ecco un link allo sviluppatore (non essere denigrato dalla prima apparizione, ma puoi anche andare direttamente al repository del componente aggiuntivo di Mozilla .


Uno strumento così piccolo, tante ore di lavoro risparmiate, oggi siamo tutti vincitori ;-) Saluti all'autore di FireDiff, sembra che non attraversi le acque di SO. Impegno: autore della posta, gratitudine espressa
Morten Bergfall,

L'autore è Kevin Decker. Potrebbe essere questo utente: stackoverflow.com/users/238459/kevin-decker
Jonathan Parker

Sì, è questo utente in quanto il link al suo sito è lo stesso.
Jonathan Parker,

1
dolce madre di Dio. Questo e spettacolare.
Jason,

3
OMG - Ho fatto esplodere così totalmente geek!
Glicerina

15

Il componente aggiuntivo Web Developer consente di salvare le modifiche. Vorrei combinare la modifica di Firebug con la funzione Salva di Web Developer.

testo alternativo

Utilizzare il pulsante " Salva " (fare clic sul menu CSS -> Modifica CSS) per salvare il CSS modificato su disco.

Raccomandazione : utilizzare il pulsante " Stick " per evitare di perdere le modifiche quando si cambia la scheda per fare altre ricerche. Se è possibile, utilizzare solo una scheda per eseguire la modifica e l'altra finestra di Firefox le ricerche correlate, la webmail, ecc.


1
Uso il plug-in per sviluppatori web. Ma ho appena provato a cercare l'opzione e non sono riuscito a trovarla. Come posso salvare i nuovi fogli di stile?
Decano Piuttosto

Quando modifico il CSS in Firebug le modifiche non vengono sincronizzate con la barra degli strumenti WebDeveloper "Modifica CSS". Come li sincronizzi?
Gerold Meisinger,

13

Ho appena rilasciato un addon firebug nella sandbox addon mozilla che potrebbe fare quello che vuoi: https://addons.mozilla.org/en/firefox/addon/52365/

In realtà salva i file css "toccati" su richiesta sul tuo server web (comunicando con uno script php webservice a un file).

La documentazione è disponibile nella mia homepage o nella pagina dei componenti aggiuntivi

Gradirei qualsiasi test, segnalazione di bug, commenti, valutazioni, discussioni su questo, dato che è ancora all'inizio della beta, ma dovrebbe già funzionare bene.


13

CSS-X-Fire

Sono sorpreso che non sia ancora elencato a questa domanda, ma probabilmente perché è nuovo e l'autore non ha ancora avuto il tempo di promuoverlo.

Si chiama CSS-X-Fire ed è un plugin per la serie di IDE JetBrains: IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine .

Come funziona: si installa uno di questi IDE e si configura la distribuzione (supporta FTP e SCP). Ciò ti consentirà di rimanere sincronizzato con il server.

Dopo questo installi questo plugin. All'avvio ti verrà chiesto di dirti che installerà un plugin per Firefox, al fine di fare l'integrazione tra Firebug e l'IDE. Se l'installazione del plug-in non riesce, basta usare la tecnica drag-n-drop per installarlo.

Una volta installato, traccerà tutte le modifiche da Firebug e sarai in grado di applicarle con un semplice clic all'interno di IDE.

Finestra CSS-X-Fire all'interno dell'IDE.

FireFile

FireFile è un'alternativa che richiede di aggiungere un piccolo file php sul lato server per poter caricare i CSS modificati.


Bella scoperta! Ma mi chiedo se ci sia un condotto simile tra Firebug e altri IDE o editor per Mac di quelli di IntelliJ.
Henrik,

@hced Il tuo desiderio è stato soddisfatto, controlla FireFile.
sorin,

10

È possibile collegare firebug per eclissi con fireclipse e quindi salvare il file da eclipse


1
Puoi collegare FireBug a Eclipse? Sorprendente! FireBug ed Eclipse sono gli strumenti principali che utilizzo nello sviluppo. Lo esaminerò. Grazie!
Decano piuttosto

9

Penso che il più vicino che otterrai sarà andando in modalità Modifica in Firebug e copiando e incollando il contenuto del file CSS.


Era la soluzione che cercavo ... Adoro le risposte ovvie che non avevo mai notato prima. Cthulu maledice StackOverflow in tutte le sue forme, per la follia che previene.
OhkaBaka,

2
BAH ... non funziona ... questa è la fonte originale ... e ha cancellato tutte le mie modifiche.
OhkaBaka,

7

Abbiamo appena introdotto Backfire, un motore javascript open source che ti consente di salvare sul server le modifiche CSS apportate all'ispettore Firebug e Webkit. La libreria include un'implementazione C # di esempio di come salvare le modifiche in arrivo nel tuo CSS.

Ecco un post sul blog su come funziona: http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Ed ecco il codice ospitato su Google Code: http://code.google.com/p/backfire/


Sembra stupendo. E anche per WebKit Web Inspector? Sìì!
jocap,

3

So che questo non risponde alla tua domanda, ma sorprendentemente, la "barra degli strumenti" del clone di Firebug di Internet Explorer 8 (accessibile tramite F12) offre l'opzione per "salvare html". Questa funzione salva il DOM corrente in un file locale, il che significa che se si modifica il DOM in qualche modo, ad esempio aggiungendo un attributo di stile da qualche parte, anche questo verrà salvato.

Non particolarmente utile se stai usando Firebug per scherzare con i CSS come fanno tutti, ma fai un passo nella giusta direzione.


3

Propongo una soluzione che coinvolge una combinazione di Firebug e FireFTP e un codice che accede direttamente al file system locale quando si esegue un sito Web localmente.

Ecco gli scenari:

Lavorare su un sito Web ospitato su un computer remoto

In questo caso, forniresti i dettagli FTP e la posizione di CSS / HTML / Javascript e Firebug aggiornerà quindi questi file quando salvi le modifiche. Potrebbe anche essere in grado di individuare i file stessi e quindi richiedere di verificare che abbia il file corretto. Se i nomi dei file sono univoci, non dovrebbe essere un problema.

Lavorare su un sito Web in esecuzione sul tuo computer locale

In questo caso è possibile fornire a Firebug la posizione della cartella locale del sito Web e lo stesso comportamento verrebbe utilizzato per abbinare e verificare i file. L'accesso al file system locale potrebbe essere eseguito tramite FireFTP, se necessario.

Lavorare su un sito Web ospitato in remoto senza accesso FTP

In questo caso dovrebbe essere implementato qualcosa di simile al componente aggiuntivo FireFile.


Un'ulteriore funzionalità sarebbe la possibilità di salvare e aprire i file di progetto che memorizzano i mapping tra i file locali e gli URL a cui sono associati, nonché di salvare i dettagli FTP come già fa FireFTP.


Sembra fantastico, lo proverò!
Decano Piuttosto il

3

Sono l'autore di CSS-X-Fire di cui Sorin Sbarnea ha gentilmente postato in questa discussione. Immagino di essere un po 'in ritardo;)

CSS-X-Fire emette modifiche alle proprietà CSS da Firebug all'IDE in cui le modifiche possono essere applicate o scartate.

Ci sono un paio di vantaggi con questa soluzione rispetto alla maggior parte degli altri strumenti esistenti che conoscono solo i nomi dei file e il contenuto scaricato dal browser (vedi il commento di NickFitz nel post originale).

Scenario 1: hai un sito Web (progetto) che ha una manciata di temi tra cui l'utente può selezionare. Ogni tema ha il suo file CSS, ma solo uno è noto a Firebug, quello attuale. CSS-X-Fire rileverà tutti i selettori corrispondenti nel progetto e ti consentirà di decidere quali devono essere modificati.

Scenario 2: il progetto Web ha fogli di stile creati durante la compilazione o durante la distribuzione. Potrebbero essere uniti da più file e i nomi dei file potrebbero cambiare. CSS-X-Fire non si occupa dei nomi dei file, si occupa solo dei nomi dei selettori CSS e delle loro proprietà.

Sopra sono esempi di scenari in cui CSS-X-Fire eccelle. Poiché funziona con i file di origine e conosce la struttura della lingua, aiuta anche a trovare duplicati non noti a Firebug, saltare al codice, eccetera.

CSS-X-Fire è open source con licenza Apache 2. Home del progetto: http://code.google.com/p/css-x-fire/



2

Poiché Firebug non funziona sul tuo server, ma preleva il CSS dal sito e lo memorizza localmente e ti mostra il sito con quelle modifiche locali.




2

Ho avuto questo problema anche per sempre, e alla fine ho deciso che non avremmo dovuto modificare le cose nell'ispettore web e ho creato qualcosa per esso ( https://github.com/viatropos/design.io ).

Una soluzione migliore:

Il browser riflette automaticamente le modifiche CSS senza ricaricare quando si preme Salva nell'editor di testo .

Il motivo principale per cui stiamo modificando i CSS nella finestra di ispezione web (utilizzo webkit, ma FireBug è sulla stessa linea) è perché dobbiamo fare piccoli aggiustamenti e ci vuole troppo tempo per ricaricare la pagina.

Ci sono 2 problemi principali con questo approccio. Innanzitutto, puoi modificare un singolo elemento che potrebbe non avere un idselettore. Quindi, anche se tu fossi in grado di copiare / incollare il CSS generato dal web inspector, dovrebbe generare un idambito per il CSS. Qualcosa di simile a:

#element-127 {
  background: red;
}

Ciò inizierebbe a rendere il tuo css un casino.

Puoi aggirarlo modificando gli stili solo per un selettore esistente (il .spaceselettore di classe nell'immagine dell'ispettore webkit di seguito).

Ispettore Webkit

Tuttavia, il secondo problema. L'interfaccia per quella cosa è piuttosto approssimativa, è difficile apportare grandi cambiamenti - come se volessi provare a copiare molto velocemente questo blocco di CSS in questo posto, o altro.

Preferirei semplicemente attenermi a TextMate.

L'ideale sarebbe semplicemente scrivere il CSS nel tuo editor di testo e fare in modo che il browser rifletta le modifiche senza ricaricare la pagina . In questo modo dovresti scrivere il tuo css finale mentre apporti le piccole modifiche.

Il livello successivo sarebbe scrivere in un linguaggio CSS dinamico, come Stilo, Meno, SCSS, ecc., E fare in modo che il browser aggiorni con il CSS generato. In questo modo potresti iniziare a creare mixin simili box-shadow(), che hanno sottratto le complessità, cosa che l'ispettore web sicuramente non poteva fare.

Ci sono alcune cose là fuori che fanno questo, ma nulla secondo me è davvero snellente.

  • LiveReload : invia css al browser senza aggiornamento quando si preme save, ma è un'app per mac , quindi sarebbe difficile da personalizzare.
  • CodeKit : anche un'app per mac, ma aggiorna il browser ogni volta che salvi.

Non avere la possibilità di personalizzare facilmente il modo in cui funzionano è il motivo principale per cui non li ho usati.

Ho messo insieme https://github.com/viatropos/design.io specificamente per risolvere questo problema e renderlo tale:

  1. Il browser riflette css / js / html / etc ogni volta che si salva, senza ricaricare la pagina
  2. Può gestire qualsiasi modello / linguaggio / framework (Stilo, Meno, CoffeeScript, Giada, Haml, ecc.)
  3. È scritto in JavaScript e puoi montare rapidamente estensioni in JavaScript.

In questo modo, quando è necessario apportare quelle piccole modifiche al CSS, si può dire, impostare il colore di sfondo, premere Salva, vedere no, non del tutto, regolare la tonalità di 10, salvare, no, regolare di 5, salvare, sembra buono.

Il modo in cui funziona è guardando ogni volta che salvi un file (a livello di sistema operativo), elaborando il file (è qui che funzionano le estensioni) e spingendo i dati nel browser attraverso i websocket, che vengono quindi gestiti (il lato client di l'estensione).

Non collegare o altro, ma ho lottato con questo problema per molto tempo.

Spero che aiuti.


1

Firebug funziona sul CSS calcolato (quello che si ottiene prendendo il CSS nei file e applicando l'ereditarietà, ecc. Oltre alle modifiche apportate con JavaScript). Ciò significa che probabilmente non potresti usarlo direttamente per includerlo in un file HTML, che è specifico del browser / versione (a meno che non ti interessi solo di Firefox). D'altra parte, tiene traccia di ciò che è originale e ciò che viene calcolato ... Penso che non dovrebbe essere molto difficile aggiungere un po 'di JS a Firebug per poter esportare quel CSS in un file di testo.


1
Questo non è del tutto vero. Firebug ti mostra tutti gli stili che si applicano a un elemento, incluso da dove provengono, e li colpisce solo se sono stati sostituiti da una regola più specifica / successiva / importante. Ti consente di modificare / aggiungere regole a qualsiasi livello. Hai anche la possibilità di visualizzare solo gli stili calcolati, ma la vista predefinita è mostrare tutti gli stili.
SpoonMeiser,

1

Mi chiedevo perché non riuscissi a selezionare e copiare maledettamente il testo davanti ai miei occhi. Soprattutto quando gli altri dicono che puoi semplicemente "selezionare e copiare". Si scopre che puoi , devi solo iniziare il trascinamento al di fuori di qualsiasi testo (ad esempio nella grondaia sopra o a sinistra del testo) come qualsiasi trappola per topi, sia che si tratti di un clic o di un trascinamento, su qualsiasi testo invoca immediatamente la proprietà editore. Puoi anche fare clic sul testo esterno per ottenere un cursore (anche se non è sempre visibile) che puoi quindi spostare con i tasti freccia e selezionare il testo in quel modo.
Il testo copiato negli appunti è privo di qualsiasi rientro, sfortunatamente, ma almeno ti salva dalla trascrizione manuale dell'intero contenuto del file CSS. Basta fare in modo che il programma diff ignori le modifiche negli spazi bianchi quando si confronta con l'originale.


1

È possibile scrivere il proprio file di script del server che accetta un parametro nome file e un parametro contenuto.

Lo script del server trova il file richiesto e ne sostituisce il contenuto con quello nuovo.

Scrivere il Javascript che attinge alle informazioni di Firebug e recupera i dati utili sarebbe la parte difficile.

Personalmente preferirei che il team di sviluppo di Firebug fornisse una funzione, non dovrebbe essere troppo difficile per loro.

Infine, Ajax invia la coppia nome file / contenuto al file php che hai creato.


1

Citato dalle FAQ di Firebug :

Modifica delle pagine

  • Posso salvare alla fonte le modifiche che ho apportato alla pagina Web che vedo?

    In questo momento non puoi. Come ha scritto John J. Barton sul newsgroup:

    Modificare in Firebug è un po 'come togliere i sottaceti e aggiungere senape a un panino al ristorante: puoi goderti il ​​risultato, ma il prossimo cliente al ristorante riceverà comunque sottaceti e niente senape.

    Questa è una funzionalità richiesta da molto tempo, quindi un giorno sarà disponibile direttamente da Firebug. Nel frattempo, puoi provare Firediff , un'estensione per firebug di Kevin Decker.

  • Come posso generare tutte le modifiche che sono state apportate al CSS di un sito all'interno di Firebug?

    Questa è una funzionalità implementata in Firediff di Kevin Decker .


0

Ecco una soluzione parziale. Dopo aver apportato le modifiche, fare clic su uno dei collegamenti al file pertinente. Questo è il file originale, quindi dovrai aggiornare il file, che si trova sotto il pulsante del menu delle opzioni in alto a destra nel riquadro Firebug. Ora hai la pagina CSS modificata, che puoi copiare e incollare. Ovviamente, dovrai farlo per ogni file CSS.

Modifica: sembra che Mark Biek abbia una versione più veloce


Che ne dici di combinare: usa la soluzione di Mark Biek per copiare e incollare, ma usa la soluzione di Eduardo Molteni e incollala negli strumenti di sviluppo e risparmia. Questo è quello che ho intenzione di fare per ora. Sarebbe bello se questo fosse aggiunto a FB!
Rob,

0

Un modo molto semplice per "modificare" la tua pagina è di accedere al sito tramite il tuo browser Internet. Salvare la pagina come HTML solo sul desktop. Vai sul desktop e fai clic con il pulsante destro del mouse sul nuovo file della pagina Web e seleziona Apri con, scegli Blocco note e modifica la pagina da lì, se conosci HTML sarà facile. Dopo aver completato tutte le modifiche, salva il file e riapri la tua pagina web, le modifiche dovrebbero essere presenti se eseguite correttamente. È quindi possibile utilizzare la nuova pagina modificata ed esportarla o copiarla nella posizione remota


1
È vero, ma penso che la domanda sia come salvare i file CSS con le modifiche apportate in Firebug ad essi applicate.
Henrik,

-4

In realtà Firebug è uno strumento di debug e analisi: non un editor e ovviamente non considerato uno. L'altro motivo è già stato menzionato: come si desidera modificare i CSS, memorizzati su un server durante il debug di una pagina Web?


Non sono sicuro del motivo per cui sei stato sottoposto a downgrade, ma +1 da parte mia: uno dei motivi principali per cui le persone continuano a chiedere questa caratteristica quasi impossibile è che non apprezzano la differenza tra un debugger e un editor.
NickFitz,

4
Firebug è stato creato per risolvere un problema di non essere un debugger. Se c'è un altro problema che deve essere risolto, perché non può essere aggiunto a Firebug?
Jonathan Parker,

3
Certo, Firebug è un debugger, ma perché ti permette di modificare CSS ad esempio? Chi dice che un debugger non dovrebbe essere in grado di salvare il risultato di un output alterato? La mia impressione è che Firebug sia così tante cose per così tante persone. Per alcuni, l'uso del debugger e l'attivazione e la disattivazione delle funzioni, ecc. È la cosa principale - tuttavia, per altri, la sua capacità di alterare i CSS con l'aggiornamento in tempo reale è l'affare principale.
Henrik,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.