Salva html localmente da Devtools

Uso Emmet Livestyle con l’editor di testo Chrome e Sublime. Sto modificando i miei file localmente e posso aggiornare i miei css e js dagli sviluppatori in modo che tali modifiche vengano riflesse contemporaneamente anche nei miei file locali. Ma come posso aggiornare anche il mio codice html ?

Non possiamo mantenere le modifiche HTML. Perché, beh, non stai modificando HTML. Ecco cosa sta succedendo …

Il server invia Chrome alla pagina (HTML). Viene preso, tokenizzato, quindi viene creato un DOM (Document Object Model). La pagina viene quindi eliminata e solo il DOM viene tenuto in memoria. Questo è ciò che stai vedendo nel pannello Elementi. Quel pannello è il DOM completo così com’è, fatto per assomigliare al markup HTML per facilità d’uso.

Quel codice HTML inviato dal server, può essere generato da PHP, Ruby, C, codificato a mano, qualunque cosa. DevTools non ha modo di saperlo. Quindi, non c’è modo per noi di trasferire automaticamente le modifiche di origine nel DOM. Sia i CSS che i JS possono trarre vantaggio dalle mappe in modo che DevTools sappia dove inviare le cose. Non è al 100%, dal momento che se usi una variabile non stai modificando la variabile ma modificando il valore impostato (almeno nei CSS). Ma è abbastanza buono per la maggior parte degli usi. Con la generazione di HTML da parte dei linguaggi di backend, questi tipi di nodes diventano ancora più complessi, ingestibili e finiscono per non fornire la migliore esperienza agli sviluppatori.

La cosa migliore che puoi fare è impostare gli spazi di lavoro e passare alla modifica dei sorgenti in DevTools. Tuttavia, questo ha il trabocchetto che le estensioni personalizzate non sono supportate in questo momento. Quindi hai un’esperienza di scrittura molto generica su questa rotta.

Browser è un http client ….. il codice html viene fornito dal server …… Se stai sviluppando e possiedi il codice lato server …. Quindi replica le modifiche apportate nel foglio di stile CSS sul lato server.