Esporta le modifiche CSS dall'ispettore (webkit, firebug, ecc.)

Quando lavoro con CSS, eseguo spesso dei test in un browser, ad esempio Chrome, fai clic con il pulsante destro del mouse su un elemento, fai clic su Ispeziona elemento e modifico il CSS proprio lì. L'uso dei tasti freccia per modificare cose come il margine e il padding rende le cose molto facili.

Non è poi troppo difficile prendere queste modifiche e applicarle al file CSS, ma sarebbe bello se potessi semplicemente fare clic con il pulsante destro del mouse sul selettore nell'inspector e selezionare "esporta" o "copia" e avere i contenuti disponibili nel mio clipboard.

Esiste qualcosa di simile?

Ho trovato la risposta a questa domanda, almeno a partire da Chrome v14.

Nella sezione Elementi, fai clic sul collegamento "nomefile: numero di lino" accanto alle regole CSS. Il file CSS visualizzato conterrà tutte le modifiche.

Questo posto esattamente:

In Chrome, puoi fare clic con il pulsante destro del mouse su un file CSS nella scheda Sorgenti e fare clic su "Modifiche locali"

Questo mostra tutte le modifiche locali. Ogni revisione ha un timestamp ed è possibile eseguire il rollback a qualsiasi revisione precedente.

Vedere la sezione Modifica in tempo reale e cronologia delle revisioni di questo tutorial.

Firediff è un componente aggiuntivo di Firebug che tiene traccia delle modifiche apportate in Firebug. Registra tutto ciò che farai nel riquadro HTML (ottimo) ma anche il tuo breve utilizzo dell'estensione Web Developer Toolbar (non così eccezionale), ad esempio Maiusc-Ctrl-F per ottenere informazioni sulla dimensione del carattere in px.

Ho visto un'estensione Firebug in Chrome ma non l'ho testata, utilizzo Firediff con Firefox.

Ho creato un'estensione di Chrome che fa esattamente questo.

Si chiama StyleURL : accetta tutte le modifiche CSS apportate in Chrome Inspector e restituisce CSS validi come diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

Ecco un esempio in cui ho aggiunto "padding-bottom: 50px" a questa pagina:

È open-source e anche su GitHub: https://github.com/Jarred-Sumner/styleurl-extension

In Chrome c'è anche la scheda Modifiche nel cassetto della console che mostra tutte le modifiche di CSS. Non è un'esportazione, ma almeno è molto comodo per cogliere rapidamente cosa è cambiato.

Ho già suggerito questo prodotto su SO (non sono affiliato con loro in alcun modo).

http://www.skybound.ca/

Prodotto eccellente. Sembra esattamente quello che stai cercando e molto altro ancora.

EDIT: Diverse altre risposte qui hanno menzionato la capacità di Google Chrome di collegarsi ai tuoi file locali (che è molto molto interessante). Dai un'occhiata alle altre risposte!

Se modifichi CSS esterno, puoi trascinare la sua ultima revisione fuori dal pannello Risorse in qualsiasi editor di testo che supporti DnD (vedi http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ , la sezione "Modifiche persistenti" per maggiori dettagli.) Puoi anche ripristinare le modifiche CSS a qualsiasi versione precedente della risorsa del foglio di stile (nel menu a comparsa di scelta rapida di qualsiasi revisione del foglio di stile).

Come accennato da cloudworks, la risposta a questo è cambiata. Questo ora può essere ottenuto piuttosto bene dall'estensione Chrome DevTools Autosave . Questo strumento tiene traccia delle modifiche CSS e JavaScript apportate nella console degli strumenti per sviluppatori di Chrome e le salva nei file locali. Per istruzioni su come installare e configurare l'estensione, fare riferimento alla guida scritta da @addyosmani sul suo blog, qui .

C'è anche un pratico screencast che descrive piuttosto bene l'estensione.

Con Workspaces puoi salvare i tuoi CSS mentre li digiti nel tuo ispettore (in Chrome). Il problema è che ogni modifica viene salvata automaticamente e non c'è modo di disabilitare questa funzione, come indicato in http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ e Disabilita il salvataggio automatico delle modifiche CSS negli Strumenti per sviluppatori di Chrome .

Sia Firefox che Chrome ora supportano questa funzione, ma vale la pena notare che in alcune piattaforme se non in tutte Chrome non la mostra per impostazione predefinita, è necessario abilitare la vista "Modifiche" per vederla (nel mio Kubuntu Linux 20.04 non lo era per impostazione predefinita), ecco come puoi abilitarlo: vai al pulsante "Personalizza e controlla DevTools" nella barra degli strumenti per sviluppatori> "Altri strumenti"> "Modifiche" , quindi la scheda apparirà in corrispondenza del pulsante:

In Firefox non è necessario abilitarlo, ma se vieni dal mondo Chrom * potrebbe essere difficile trovarlo. Basta controllare l'ultima sezione a destra nella scheda "Impostazioni":

Se stai utilizzando gli strumenti di sviluppo stock di Firefox, puoi modificare il css direttamente nella finestra di dialogo degli strumenti: fai clic sul pulsante di visualizzazione CSS (che è il pulsante in alto con il {}simbolo) e modifica direttamente il tuo css. Si aggiornerà in tempo reale nel browser e quando hai finito basta copiarlo e incollarlo direttamente nel tuo file css. Bello!

Per aggiungere una risposta specifica per Safari, è possibile.

Quando modifichi il CSS nella sezione Stili dell'Inspector per un file CSS esistente, puoi premere Cmd-S per salvare nuovamente l'intero file con le modifiche. Tuttavia, se stai usando un meta linguaggio come Sass / preprocessore / che genera il tuo CSS con bundling ecc., Non penso che questo risolva davvero questo problema, sebbene potrebbe essere possibile con le mappe sorgente CSS.

Quando modifichi CSS nella parte superiore della sezione Stili, sotto Style Attributeper aggiungere stili in linea (non legati a un file CSS esistente), non sembra possibile esportare facilmente tutte queste modifiche. Per ora, sto solo copiando e incollando manualmente le sostituzioni per ogni elemento.

I documenti ufficiali di Apple sono un po 'datati ma si trovano qui: Tutorial Web Inspector - Modifica del codice per modificare la pagina Web .

In Chrome, nell'ispettore CSS puoi fare clic e tenere premuto il pulsante +, quindi scegliere di aggiungere le modifiche al foglio di stile dell'ispettore. Non è così conveniente come modificare direttamente nei tuoi selettori css, ma ciò che scrivi sarà tutto in inspector-stylesheet.css

Il mio prodotto in-beta-presto LIVEditor fa esattamente questo.

Per farti capire facilmente, puoi pensare che l'ispettore di Firebug è incorporato nel tuo editor di testo.

In questo modo non è necessario apportare nuovamente le modifiche manualmente nell'editor di codice dopo averlo modificato utilizzando gli strumenti di sviluppo di Firebug o Webkit.