Come salvare le modifiche CSS del pannello Stili degli strumenti per sviluppatori di Chrome?

Come salvare le modifiche CSS del pannello Stili degli strumenti per sviluppatori di Google Chrome ?

Sul sito Web dello strumento è menzionato che possiamo vedere tutte le modifiche nel pannello delle risorse

Ma sto lavorando localmente su un file CSS ma le modifiche non vengono visualizzate nel pannello Risorse per me

A proposito Conosci eventuali componenti aggiuntivi, strumenti per salvare le modifiche CSS degli strumenti per sviluppatori di Chrome? So che per Firebug ci sono molti https://stackoverflow.com/search?q=firebug+CSS+changes+save

Puoi salvare le modifiche CSS dallo stesso Chrome Dev Tools. Chrome ora ti consente di aggiungere cartelle locali al tuo spazio di lavoro. Dopo aver consentito a Chrome l'accesso alla cartella e aver aggiunto la cartella allo spazio di lavoro locale, è possibile mappare una risorsa Web su una risorsa locale.

• Passa al pannello Sorgenti degli Strumenti per sviluppatori, fai clic con il pulsante destro del mouse sul pannello di sinistra (in cui sono elencati i file) e seleziona Aggiungi cartella allo spazio di lavoro . Puoi accedere rapidamente a un foglio di stile nel pannello Sorgenti facendo clic sul foglio di stile in alto a destra di ciascuna regola CSS per un elemento selezionato nel pannello Elementi.

• Dopo aver aggiunto la cartella, dovrai dare a Chrome l'accesso alla cartella.

• Successivamente, è necessario mappare la risorsa di rete sulla risorsa locale.

• Dopo aver ricaricato la pagina, Chrome ora carica le risorse locali per i file mappati. Per semplificare le cose, Chrome ti mostra solo le risorse locali (in modo da non confonderti sul fatto che stai modificando la risorsa locale o di rete). Per salvare le modifiche, premere CTRL + Sdurante la modifica del file.

ps

Potrebbe essere necessario aprire i file mappati e avviare la modifica per consentire a Chrome di applicare la versione locale (data 201604.12).

Scrittore e sviluppatore tecnico DevTools qui.

A partire da Chrome 65, Local Overrides è un nuovo modo leggero per farlo. Questa è una funzionalità diversa rispetto a Workspaces.

Imposta sostituzioni

1. Vai al pannello Sorgenti .
2. Vai alla scheda Sostituzioni .
3. Fai clic su Seleziona cartella per sostituzioni .
4. Seleziona la directory in cui desideri salvare le modifiche.
5. Nella parte superiore della finestra, fare clic su Consenti per dare a DevTools l'accesso in lettura e scrittura alla directory.
6. Apporta le tue modifiche. Nella GIF in basso, puoi vedere che la background:rosybrownmodifica persiste durante il caricamento della pagina.

Come funzionano le sostituzioni

Quando si effettua una modifica in DevTools, DevTools salva la modifica in una copia modificata del file sul computer. Quando si ricarica la pagina, DevTools serve il file modificato, anziché la risorsa di rete.

La differenza tra sostituzioni e aree di lavoro

Le aree di lavoro sono progettate per consentire l'utilizzo di DevTools come IDE. Associa il codice del repository al codice di rete, utilizzando le mappe di origine. Il vero vantaggio è se stai minimizzando il tuo codice o stai usando il codice che deve essere traspilato, come SCSS, quindi le modifiche apportate in DevTools (di solito) vengono ricondotte al tuo codice sorgente originale. Le sostituzioni, d'altra parte, ti consentono di modificare e salvare qualsiasi file sul web. È una buona soluzione se si desidera solo sperimentare rapidamente le modifiche e salvarle tra i carichi di pagina.

Le nuove versioni di Chrome hanno una funzione chiamata workspace che risolve questo problema. Puoi definire quali percorsi sul tuo server web corrispondono a quali percorsi sul tuo sistema, quindi modificare e salvare con solo ctrl-s.

Vedi: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

So che è un vecchio post, ma lo salvo in questo modo:

1. Vai al riquadro Sorgenti.
2. Fai clic su Mostra navigatore (per mostrare il riquadro di navigazione a sinistra).
3. Fai clic sul file CSS che desideri. (Si aprirà nell'editor, con tutte le modifiche apportate)
4. Fare clic con il tasto destro sull'editor e salvare le modifiche.

Puoi anche vedere le modifiche locali per vedere le tue revisioni, caratteristica molto interessante. Funziona anche con gli script.

Stai cercando nella sezione sbagliata di "Risorse".

Non è in "Archiviazione locale", è in "Cornici":

Lo screenshot sopra mostra una differenza tra gli stili originali e le nuove modifiche apportate negli sviluppatori. È possibile fare clic con il pulsante destro del mouse sull'elemento nel riquadro sinistro e salvarlo di nuovo sul disco.

L'estensione di Tincr Chrome è più facile da installare (non è necessario eseguire il server dei nodi) E viene fornita con LiveReload come funzionalità pronta all'uso! Parliamo di editing bidirezionale! :)

Sito Web Tin.cr

Link al Chrome Web Store

Articolo del blog di Andy

Ora che Chrome 18 è stato rilasciato la settimana scorsa con le API richieste, ho pubblicato la mia estensione Chrome nel Chrome Web Store. L'estensione salva automaticamente le modifiche in CSS o JS negli strumenti di sviluppo sul disco locale. Vai a dare un'occhiata.

Cordiali saluti, Se si utilizzano stili incorporati o si modifica direttamente il DOM (ad esempio aggiungendo un elemento), le aree di lavoro non risolvono questo problema. Questo perché il DOM vive in memoria e non esiste un file effettivo associato allo stato attivo del DOM.

Per questo, mi piace fare una "prima" e "dopo" un'istantanea del dom dalla console: copy(document.getElementsByTagName('html')[0].outerHTML)

Quindi lo inserisco in uno strumento diff per vedere le mie modifiche.

Articolo completo: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

Per rispondere all'ultima parte della domanda su eventuali estensioni che possono salvare le modifiche, è disponibile l' aggiornamento rapido

Ti consente di salvare le modifiche da Chrome Dev Tools direttamente su GitHub. Da lì puoi impostare un hook post-ricezione su GitHub per aggiornare automaticamente il tuo sito web.

Finché non hai inserito il CSS element.style:

1. Vai a uno stile che hai aggiunto. Dovrebbe esserci un link che dice ispector-stylesheet:

2. Cliccaci sopra e si apriranno tutti i CSS che hai aggiunto nel pannello delle fonti

3. Copia e incolla - yay!

Se sei stato con element.style:

Puoi semplicemente fare clic con il pulsante destro del mouse sull'elemento HTML, fare clic su Modifica come HTML, quindi copiare e incollare l'HTML con gli stili incorporati.

AGGIORNAMENTO 2019: Poiché le altre risposte sono un po 'obsolete, aggiungerò una aggiornata qui. Nell'ultima versione non è necessario mappare la cartella Chrome sul filesystem.

Supponiamo quindi di avere una cartella Web contenente file HTML, CSS, JS sul desktop che desidero essere aggiornata quando apporto modifiche in Chrome: =

1) Avresti bisogno di un server locale in esecuzione come il nodo ecc., In alternativa questa estensione vscode crea il server per te: estensione VSCode del server live , installala, esegui il server.

2) caricare la pagina HTML in Chrome dall'esecuzione del server locale.

3) Apri devTools-> Sorgenti-> File system-> Aggiungi cartella allo spazio di lavoro

4) Aggiungi la cartella che viene utilizzata nell'esecuzione del server locale. Non è richiesta alcuna mappatura aggiuntiva nell'ultimo Chrome! Ta-da!

Altro su di esso Modifica file con aree di lavoro

Si noti che le modifiche apportate nella scheda degli stili NON si rifletteranno sui file del file system. Invece devi andare su devtools-> source-> your_folder e quindi apportare le modifiche lì e ricaricare la pagina per vedere l'effetto.