In qualità di sviluppatori Web, dedichiamo molto tempo alla creazione del nostro codice in un ambiente di modifica. Passiamo quindi al browser per utilizzare gli strumenti di sviluppo integrati per eseguire il debug e modificare l’interfaccia utente del prodotto. Il problema è che i risultati del tweaking e del debug non si riflettono nel codice sorgente. In Microsoft Edge, stiamo attualmente lavorando su un paio di soluzioni aperte alla discussione e ci piacerebbe il tuo feedback su di loro
Se preferisci guardare un video invece di leggere, ecco un’introduzione di tre minuti:
Il problema attuale con modifiche e modifiche negli Strumenti per sviluppatori h2>
Oggi, i browser DevTools forniscono strumenti visivi altamente sofisticati che ti insegnano, ad esempio, la sintassi CSS mentre li usi. Questi strumenti cambiano le cose in modo visivo. Ad esempio, puoi fare clic sull’icona”Flexbox”accanto a qualsiasi proprietà CSS flexbox e viene visualizzato un popup che ti offre un’anteprima del risultato di tale modifica di stile.
Questa è un’esperienza di debug eccellente e ti impedisce di dover cercare continuamente la sintassi CSS. Tuttavia, c’è una disconnessione, poiché il codice visualizzato in questi flussi di lavoro di debug non è quello che hai scritto nel tuo editor di codice.
L’editor di stili funziona mostrando solo una vista parziale del codice per l’attuale elemento selezionato nel browser. Non sai dove e come si inserisce quel codice nel resto del tuo CSS sulla tua pagina web. Mentre puoi scorrere per visualizzare il resto del codice, non sarebbe meglio vedere anche l’originale File CSS?
Puoi accedervi facendo clic sui collegamenti al file CSS stesso, che ti porta allo strumento Sorgenti e lontano dall’editor degli stili.
Questo è un editor incorporato negli strumenti di sviluppo del browser che era ingegnoso quando sono usciti ma non brilla in confronto a ciò che ci aspettiamo da un editor di questi tempi. A meno che tu non sganci gli strumenti e li utilizzi in una finestra, non hai spazio sufficiente per lo schermo per un’esperienza di editing conveniente.
Se usi gli strumenti visivi per modificare il tuo CSS, o l’editor dei sorgenti, rimane un problema: una volta che hai cambiato molto di cose e sei arrivato al risultato desiderato, come recuperi queste modifiche nel tuo codice sorgente?
Sapevi che esiste uno strumento per le modifiche?
Gli strumenti per sviluppatori del browser hanno una funzionalità che aiuta con questo chiamata Modifiche che non viene molto utilizzata ed è in gran parte sconosciuta. Puoi accedervi dal menu dei comandi o dal menu contestuale e ti mostra una vista differenziale di tutti i file che hai modificato in questa sessione. Puoi utilizzare questo strumento per copiare e incollare nuovamente le modifiche nei file di origine.
Firefox utilizza un approccio leggermente diverso di uno strumento per le modifiche che si aggiorna in tempo reale con le modifiche apportate. Crea anche un file CSS da copiare e incollare con commenti che spiegano in quali file incollare nuovamente queste modifiche e cosa è stato rimosso o aggiunto.
Sebbene questo sia un buon passo nella giusta direzione, richiede un passaggio aggiuntivo per copiare e incollare il codice nel tuo editor.
Un flusso di lavoro migliorato che include Visual Studio CodeLe aree di lavoro in Chromium Developer Tools sono in circolazione da molto tempo ma non sono molto utili. Ecco perché volevamo rendere più ovvio che puoi avere la sincronizzazione in tempo reale delle modifiche tra il browser DevTools e un editor di codice. Ci siamo anche resi conto che l’editor nello strumento Sorgenti non è quello che le persone vogliono usare.
E se potessi avere la comodità dell’editor che già utilizzi e i vantaggi delle modifiche in tempo reale ai file di Workspaces?
A partire dalla versione 96 di Microsoft Edge, puoi trovare un nuovo esperimento in DevTools chiamato “File open source in Visual Studio Code“.
Una volta attivato questo e riavviato gli strumenti di sviluppo, navigando su un file sul disco rigido o sull’indirizzo di un server locale come localhost o 127.0.0.1 ti darà una richiesta che ti chiede di identificare la cartella principale di questo file. Puoi anche rinunciare a una sessione o non vedere mai questa opzione a guadagno.
Una volta scegli una cartella, il browser ti chiede l’autorizzazione per accedere a quella cartella, proprio come dovevi quando utilizzavi gli spazi di lavoro nello strumento Sorgenti.
Quando ora apporti modifiche nel riquadro Stili, il file cambia sul disco. La differenza è che quando hai Visual Studio Code come editor nel computer, facendo clic sui collegamenti ai file li aprirai in questo editor anziché in quello nello strumento Sorgenti. Rimani nell’ambiente a cui sei abituato con tutte le personalizzazioni e le estensioni che hai aggiunto.
Questo è fantastico perché le modifiche CSS ora sono permanenti. Il problema è però che potrebbero essere troppo invadenti. Qualsiasi modifica nello strumento Stili, come la modifica di una dimensione di un’unità, comporterà la modifica del file sul disco rigido. Se utilizzi una soluzione server di ricarica in tempo reale o anche script che controllano una cartella e attivano un processo di compilazione, questo può diventare disordinato rapidamente.
Modifica del mirror CSS
Nell’ultima versione di Edge DevTools for Visual Studio Code extension abbiamo introdotto un modo diverso per chiudere il ciclo di authoring/debugging chiamato”CSS Mirror Editing”. Se vuoi, puoi guardare questo 40 secondi di video introduttivo.
Se abiliti questa funzionalità, le modifiche apportate nello strumento Stili influiscono anche sul codice sorgente, ma il file rimane invariato finché non lo salvi in Visual Studio Code. Ottieni il vantaggio di non perdere le modifiche e di mantenere il pieno controllo sui file sul disco rigido.
Se utilizzi il controllo della versione, puoi vedere tutte le modifiche apportate come una vista differenziale dopo aver salvato il file. Questo ti offre tutta la comodità del flusso di lavoro di Workspaces con meno modifiche ai file.
Cosa dovremmo fare per migliorare questa esperienza?
Sembra che abbiamo tutti i componenti giusti in luogo in cui offrire agli sviluppatori e all’esperienza di creazione e debug end-to-end. Ci piacerebbe sapere cosa ne pensi di questi approcci e quale preferisci.
Se hai commenti, contatta il team di Edge DevTools su Twitter all’indirizzo @EdgeDevTools, commenta questo numero su GitHub sulla modifica CSS Mirror a> o utilizza lo strumento Feedback integrato in DevTools nel browser.
– Chris Heilmann, Principal Program Manager, Microsoft Edge
