Perché non posso salvare le modifiche CSS in Firebug?

Firebug è lo strumento più conveniente che ho trovato per la modifica dei CSS – quindi perché non c’è una semplice opzione “salva” per i CSS?

Mi ritrovo sempre a fare ritocchi 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 utilizza solo il file .css scaricato dal server, conosce con precisione quali linee in cui i file vengono modificati. Non riesco a capire perché non ci sia un’opzione “esporta” o “salva”, che consente di memorizzare il nuovo file .css. (Che potrei quindi sostituire quello remoto con).

Ho provato a cercare in posizioni temporanee e scegliendo File > Salva … e sperimentando le opzioni di output su Firefox, ma non ho ancora trovato il modo.

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

Sono arrivato qui cercando esattamente questa funzione, cioè, potendo salvare le proprietà CSS modificate nel file originale (sul mio computer di sviluppo locale). Sfortunatamente dopo aver cercato molto e non trovando nulla che si adatta 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 cosa … 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 SAVE sul file system locale utilizzando Chrome Developer Tools

inserisci la descrizione dell'immagine qui

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: Google I / O 2011: Chrome Dev Tools Reloaded

Spero che sia d’aiuto se non ti importa cambiare browser durante la modifica dei tuoi file CSS. Ho già apportato la modifica per ora, ma mi piacerebbe molto avere questa funzionalità integrata in Firebug. 🙂


[Aggiornamento 1]

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

[Aggiornamento 2]

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

Web Essentials: integrazione degli strumenti del browser

Stavo chiedendo lo stesso da un po ‘di tempo ormai,
solo straziante quando il tuo in-the-moment-freestyle-css’ing con firebug viene fatto a pezzi da
un ricarico accidentale o altro ….

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

Ti dà una nuova scheda, probabilmente qualche strano riferimento a David Bowie, chiamato “cambiamenti”; che non solo ti permette di vedere / salvare ciò che firebug, cioè tu, hai fatto,
ma, facoltativamente, puoi anche tenere traccia delle modifiche apportate dalla pagina stessa … se sei e / o sei così inclinato.

Quindi, grato di non dover ri-digitare, o ri-immaginare e poi ri-digitare, ogni regola CSS che faccio …

Ecco un link allo sviluppatore (non essere denigrato dalla prima apparizione, potrebbe anche andare direttamente al repository di Mozilla Add-On .

Il componente aggiuntivo Web Developer ti consente di salvare le tue modifiche. Mi piacerebbe combinare la modifica di Firebug con la funzione Salva di Web Developer.

alt text

Usa il pulsante ” Salva ” (fai 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 modifica la scheda per eseguire altre ricerche. Se è ansible, usa solo una scheda per fare la modifica e un’altra finestra di Firefox le relative ricerche, webmail, ecc.

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). Questo ti permetterà di rimanere sincronizzato con il server.

Dopo questo si installa questo plugin. All’avvio chiederà di dirti che installerà un plugin per firefox per fare l’integrazione tra Firebug e l’IDE. Se non riesce a installare il plugin basta usare la tecnica drag-n-drop per installarlo.

Una volta installato, seguirà tutte le tue modifiche da Firebug e sarai in grado di applicarle con un semplice click all’interno di IDE.

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

FireFile

FireFile è un’alternativa che richiede l’aggiunta di un piccolo file php sul lato server per poter caricare il css modificato.

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

In realtà salva i file css “toccati” su richiesta sul tuo server web (tramite comunicazione con uno script php webservice a file singolo).

La documentazione può essere trovata nella mia homepage o nella pagina di aggiunta

Apprezzerei qualsiasi test, segnalazioni di bug, commenti, valutazioni, discussioni su questo, poiché è ancora in fase di beta iniziale, ma dovrebbe già funzionare correttamente.

Puoi colbind firebug a eclipse con fireclipse e quindi salvare il file da eclipse

Penso che la cosa più vicina che otterrai sia andando in modalità Modifica in Firebug e copiando e incollando il contenuto del file CSS.

Abbiamo appena introdotto Backfire, un motore javascript open source che consente di salvare sul server le modifiche CSS apportate in Firebug e Webkit inspector. La libreria include un’implementazione C # di esempio su come salvare le modifiche in entrata 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/

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

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

Propongo una soluzione che prevede una combinazione di Firebug e FireFTP e 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 una macchina remota

In questo caso forniresti i dettagli FTP e la posizione del CSS / HTML / Javascript e Firebug aggiornerebbe questi file quando salvi le modifiche. Potrebbe persino essere in grado di localizzare i file e quindi richiedere di verificare che abbia il file corretto. Se i nomi dei file sono unici, non dovrebbe essere un problema.

Lavorare su un sito Web in esecuzione sul computer locale

In questo caso, è ansible fornire Firebug con la posizione della cartella locale del sito Web e lo stesso comportamento verrà utilizzato per confrontare e verificare i file. L’accesso al file system locale può essere eseguito tramite FireFTP, se necessario.

Lavorare su un sito Web ospitato in remoto senza accesso FTP

In questo caso dovrebbe essere implementato qualcosa come il componente aggiuntivo FireFile.


Una caratteristica aggiuntiva 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é il salvataggio dei dettagli FTP come già fa FireFTP.

Sono l’autore di CSS-X-Fire che anche Sorin Sbarnea ha gentilmente pubblicato in questa discussione. Credo di essere un po ‘in ritardo;)

CSS-X-Fire emette le modifiche alle proprietà CSS da Firebug all’IDE, in cui è ansible applicare o scartare le modifiche.

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 commento di NickFitz nel post originale).

Scenario 1: hai un sito web (progetto) che ha una manciata di temi da cui l’utente può scegliere. Ogni tema ha il proprio file CSS, ma solo uno è noto a Firebug, quello corrente. CSS-X-Fire rileverà tutti i selettori di corrispondenza nel progetto e ti permetterà di decidere quale dovrebbe essere modificato.

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

Sopra sono esempi di scenari in cui eccelle CSS-X-Fire. Poiché funziona con i file di origine e conosce la struttura del linguaggio, aiuta anche a trovare duplicati non noti a Firebug, jump-to-code, eccetera.

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

FireFile

Firebug è stato creato per rilevare un problema di non essere un debugger. ma puoi salvare le modifiche se aggiungi un nuovo strumento che integra firebug con le modifiche di salvataggio. è FireFile, clicca qui http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html .

FireFile fornisce la funzionalità desiderata aggiungendo un piccolo file PHP sul lato server.

Dal momento che Firebug non funziona sul tuo server ma prende il CSS dal sito e lo memorizza localmente e ti mostra il sito con quelle modifiche locali.

Utilizzare l’editor CSS nella barra degli strumenti di Firefox Web Developer:

http://chrispederick.com/work/web-developer/

Ha abbastanza cose da usare in combinazione con Firebug, e ti permette di salvare il tuo CSS in un file di testo.

Usa Backfire.

http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

È una soluzione open source che rimanda le modifiche CSS al server e le salva.

Backfire utilizza un singolo file javascript e il pacchetto codice sorgente ha un esempio di implementazione del server .NET funzionante che può essere facilmente trasferito su altre piattaforms.

Anch’io ho avuto questo problema per sempre, e alla fine ho deciso che non dovevamo modificare le cose in web inspector e costruito 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 modifichiamo il css in web inspector (io uso il webkit, ma FireBug segue le stesse linee) è 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 selettore di id . Pertanto, anche se fosse ansible copiare / incollare il CSS generato da Web Inspector, sarebbe necessario generare un id per l’ambito del css. Qualcosa di simile a:

 #element-127 { background: red; } 

Questo comincerebbe a rendere il tuo css un casino.

È ansible aggirare il .space cambiando solo gli stili per un selettore esistente (il selettore di class .space del controllo .space qui sotto).

Ispettore di Webkit

Tuttavia, il secondo problema. L’interfaccia per quella cosa è piuttosto approssimativa, è difficile apportare grandi cambiamenti – come se si volesse provare a copiare velocemente questo blocco di CSS in questo posto, o qualsiasi altra cosa.

Preferirei limitarmi 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 staresti scrivendo il tuo ultimo css mentre stai facendo i piccoli cambiamenti.

Il livello successivo sarebbe scrivere in un linguaggio CSS dinamico, come Stylus, Less, SCSS, ecc., E avere l’aggiornamento del browser con il CSS generato. In questo modo è ansible iniziare a creare mixin come box-shadow() , che ha sradicato le complessità, che l’ispettore del Web non poteva assolutamente fare.

C’è un po ‘di cose là fuori che in qualche modo lo fanno, ma niente lo snellisce davvero secondo me.

  • LiveReload : spinge il css al browser senza aggiornare quando premi save, ma è un’app mac , quindi sarebbe difficile personalizzarlo.
  • CodeKit : anche un’app mac, ma aggiorna il browser ogni volta che salvi.

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

Ho messo insieme https://github.com/viatropos/design.io appositamente per risolvere questo problema, e renderlo così:

  1. Il browser riflette css / js / html / etc ogni volta che salvi, senza ricaricare la pagina
  2. Può gestire qualsiasi modello / linguaggio / framework (Stylus, Less, CoffeeScript, Jade, Haml, ecc.)
  3. È scritto in JavaScript e puoi combinare le estensioni rapidamente in JavaScript.

In questo modo, quando devi apportare quei piccoli cambiamenti al CSS, puoi dire, impostare il colore di sfondo, premere Salva, vedere no, non abbastanza, regolare la tonalità di 10, salvare, no, regolare di 5, salvare, sembra buono.

Il modo in cui funziona è osservare ogni volta che si salva un file (a livello di sistema operativo), elaborare il file (questo è dove funzionano le estensioni) e spingere i dati nel browser tramite websocket, che vengono poi gestiti (il lato client di l’estensione).

Non colbind o altro, ma ho lottato con questo problema per un lungo momento culo.

Spero possa aiutare.

Firebug funziona sul CSS calcolato (quello che ottieni prendendo il CSS nei file e applicando l’ereditarietà, ecc. Più le modifiche apportate con JavaScript). Ciò significa che probabilmente non potresti utilizzarlo direttamente per includerlo in un file HTML, che è specifico per browser / versione (a meno che non ti interessi solo su Firefox). D’altra parte, tiene traccia di ciò che è originale e di ciò che è 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.

Mi stavo chiedendo perché non potrei maledettamente scegliere e copiare il testo davanti ai miei occhi. Soprattutto quando gli altri dicono che puoi semplicemente “selezionare e copiare”. Si scopre che è ansible , devi solo iniziare il trascinamento all’esterno di qualsiasi testo (ad es. Nella grondaia sopra o alla sinistra del testo) come qualsiasi mousedown – che si tratti di un clic o di un trascinamento – su qualsiasi testo invoca immediatamente la proprietà editore. Puoi anche fare clic su un testo esterno per ottenere un cursore (anche se non è sempre visibile) che puoi quindi spostare con i tasti freccia e selezionare il testo in questo 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 che il tuo programma diff ignori le modifiche negli spazi bianchi quando si confrontano con l’originale.

È ansible scrivere il proprio file script del server che accetta un parametro filename e un parametro content.

Lo script del server troverà il file richiesto e sostituirà il suo contenuto con quello nuovo.

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

Personalmente preferirei chiedere al team di sviluppo di firebug di fornire una funzione, non dovrebbe essere troppo difficile per loro.

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

Citato dalle domande frequenti su Firebug :

Modifica di pagine

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

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

    L’editing in Firebug è un po ‘come estrarre i sottaceti e aggiungere senape al sandwich di un ristorante: puoi goderti il ​​risultato, ma il prossimo cliente al ristorante riceverà comunque sottaceti e senza mostarda.

    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 esportare tutte le modifiche apportate al CSS di un sito all’interno di firebug?

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

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 del pannello 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

Un modo molto semplice per “modificare” la tua pagina è di andare sul sito tramite il tuo browser internet. Salva la pagina come html solo sul tuo 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 sai HTML sarà facile. Dopo aver eseguito tutte le modifiche, salvare il file e riaprire la pagina Web, le modifiche dovrebbero essere lì se eseguite correttamente. È quindi ansible utilizzare la nuova pagina modificata ed esportarla o copiarla nella posizione remota

In realtà Firebug è uno strumento di debug e di analisi: non un editor e ovviamente non lo si considera. L’altra ragione è già stata menzionata: come si desidera modificare il CSS, memorizzato su un server durante il debug di una pagina Web?