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).
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:
- Il browser riflette css / js / html / etc ogni volta che si salva, senza ricaricare la pagina
- Può gestire qualsiasi modello / linguaggio / framework (Stilo, Meno, CoffeeScript, Giada, Haml, ecc.)
- È 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.
