Configurare gli spazi di lavoro per salvare le modifiche ai file di origine

Kayce Basques

Sofia Emelianova

Salva le modifiche apportate in DevTools nei file di origine sul computer configurando un'area di lavoro. Puoi connettere automaticamente una cartella dell'area di lavoro a DevTools pubblicando un file di configurazione oppure puoi aggiungere manualmente una posizione dell'area di lavoro nel riquadro Origini.

Panoramica

Una connessione automatica (o manuale) a una cartella dell'area di lavoro ti consente di salvare una modifica apportata in DevTools in una copia locale dello stesso file sul computer. Ad esempio, supponiamo che:

• Il codice sorgente del tuo sito è sul tuo computer.
• Stai eseguendo un server web locale dalla directory del codice sorgente, in modo che il sito sia accessibile all'indirizzo localhost:PORT e che fornisca anche un semplice file JSON con i metadati (descritti di seguito).
• Hai aperto localhost:PORT in Google Chrome e stai utilizzando DevTools per modificare il CSS del sito.

Con una cartella dell'area di lavoro connessa, le modifiche apportate ai file CSS, HTML e JavaScript nel riquadro Origini vengono salvate nel codice sorgente sul computer. Tuttavia, DevTools non salva le modifiche al DOM apportate nel riquadro Elementi.

Inoltre, DevTools è solitamente in grado di mappare il codice ottimizzato al codice sorgente originale con l'aiuto delle mappe di origine.

Genera metadati per una connessione

Per consentire a DevTools di rilevare automaticamente la cartella dell'area di lavoro, genera un UUID versione 4 casuale e inseriscilo nel seguente file JSON:

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

Quindi inserisci il file JSON in path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json.

Infine, esegui il server HTTP locale e assicurati di pubblicare anche il file JSON.

In alternativa, puoi saltare questo passaggio e configurare manualmente una connessione alla cartella.

Connetti una cartella dello spazio di lavoro

Nota: questo passaggio e i successivi utilizzano la demo delle cartelle automatiche di Workspace per mostrare la funzionalità.

Per connettere una cartella:

1. In Chrome, vai alla pagina ospitata localmente (in questo esempio, all'indirizzo localhost:8000) e apri DevTools.

2. In Origini > Workspace, fai clic su Connetti accanto alla cartella.

   

3. Quando richiesto, fai clic su Modifica file per consentire a DevTools di accedere alla tua cartella.

   

4. Una volta stabilita la connessione, puoi aprire la cartella nella scheda Aree di lavoro.

   

La scheda Area di lavoro mostra un punto verde accanto ai file HTML, CSS e JavaScript. Questi punti verdi indicano che DevTools ha stabilito una mappatura tra le risorse di rete della pagina e i file nella cartella.

Salva una modifica nella cartella di origine

Puoi salvare le modifiche apportate ai file CSS, HTML e JavaScript nella cartella dell'area di lavoro connessa.

Salva le modifiche al CSS

Suggerimento: con una cartella dell'area di lavoro connessa, il riquadro Assistenza AI può salvare automaticamente le modifiche CSS nelle origini.

Per salvare le modifiche al CSS:

1. Apri un file CSS dalla cartella dell'area di lavoro connessa in Origini > Aree di lavoro.

2. Apporta una modifica al CSS.

   Nota: una modifica si applica alla pagina pubblicata, ma non ancora all'origine.

3. Salva la modifica, ad esempio premendo Ctrl/Cmd + S, e visualizza la modifica applicata nel file di origine. Il riquadro Origini mostra un punto verde accanto al nome file.

   Nota: non è necessario ricaricare la pagina per applicare e salvare le modifiche CSS.

Per scoprire il flusso di lavoro, guarda il video:

Salva le modifiche all'HTML

Per salvare le modifiche in HTML:

1. Apri un file HTML dalla cartella dell'area di lavoro connessa in Origini > Aree di lavoro.

2. Apporta una modifica al codice HTML.

   Nota: una modifica non viene ancora applicata alla pagina pubblicata né alla fonte.

3. Salva la modifica, ad esempio premendo Ctrl/Cmd + S, e visualizza la modifica applicata nel file di origine. Il riquadro Origini mostra un punto verde accanto al nome file.

4. Ricarica la pagina per visualizzare la modifica.

Per scoprire il flusso di lavoro, guarda il video:

Nota: puoi applicare e salvare una modifica HTML dal riquadro Origini, ma non dal riquadro Elementi.

Perché non puoi modificare il codice HTML dal riquadro Elementi?

• L'albero dei nodi che vedi nel riquadro Elementi rappresenta il DOM della pagina.
• Per visualizzare una pagina, un browser recupera l'HTML dalla rete, lo analizza e poi lo converte in un albero di nodi DOM.
• Se la pagina contiene JavaScript, questo potrebbe aggiungere, eliminare o modificare i nodi DOM. Anche il CSS può modificare il DOM con la proprietà content.
• Il browser utilizza infine il DOM per determinare quali contenuti presentare agli utenti del browser.
• Pertanto, lo stato finale della pagina visualizzata dagli utenti potrebbe essere molto diverso dal codice HTML recuperato dal browser.
• Ciò rende difficile per DevTools stabilire dove salvare una modifica apportata nel riquadro Elementi, perché il DOM è influenzato da HTML, JavaScript e CSS.

In breve, l'albero DOM !== HTML.

Salva le modifiche a JavaScript

Per salvare le modifiche apportate a JavaScript:

1. Apri un file JavaScript dalla cartella dell'area di lavoro connessa in Origini > Aree di lavoro.

2. Apporta una modifica al codice JavaScript.

   Nota: una modifica non viene ancora applicata alla pagina pubblicata né alla fonte.

3. Salva la modifica, ad esempio premendo Ctrl/Cmd + S, e visualizza la modifica applicata nel file di origine. Il riquadro Origini mostra un punto verde accanto al nome file.

4. Se il tuo server HTTP locale rileva le modifiche ai file di origine in tempo reale e ricarica automaticamente la pagina, vedrai le modifiche applicate una volta salvate in DevTools. In caso contrario, esegui nuovamente il deployment del server locale.

Per scoprire il flusso di lavoro, guarda il video:

Suggerimento: quando modifichi JavaScript, a volte devi accedere ad altri riquadri, come Elementi o Console. Per farlo, puoi utilizzare il riquadro a scomparsa e i riquadri di riordinamento.

Rimuovi una connessione alla cartella di un workspace

Per rimuovere una connessione a una cartella dell'area di lavoro, in Origini > Area di lavoro, fai clic con il tasto destro del mouse sulla cartella, seleziona Rimuovi dall'area di lavoro dal menu a discesa e fai clic su Rimuovi.

Nota: anche la modifica o l'eliminazione dell'UUID della cartella nel file JSON dei metadati scollega la cartella.

Connetti manualmente una cartella dello spazio di lavoro

1. Apri DevTools nella pagina ospitata localmente.

2. In Origini > Workspace, fai clic su Aggiungi cartella manualmente. Poi seleziona una cartella con i file di origine.

   

   Nota: puoi anche trascinare la cartella nel riquadro Origini.

3. Quindi segui i passaggi 3 e 4 in Connetti una cartella di Workspace.

Limitazioni

Se utilizzi un framework moderno, probabilmente questo trasforma il codice sorgente da un formato facile da gestire a un formato ottimizzato per l'esecuzione nel minor tempo possibile. Una connessione alla cartella dell'area di lavoro è solitamente in grado di mappare il codice ottimizzato al codice sorgente originale con l'aiuto delle mappe di origine.

La community di DevTools si impegna a supportare le funzionalità fornite dalle mappe di origine in una varietà di framework e strumenti. Se riscontri problemi durante l'utilizzo di un workspace con il framework che hai scelto o se riesci a farlo funzionare dopo una configurazione personalizzata, avvia un thread nella mailing list o fai una domanda su Stack Overflow per condividere le tue conoscenze con il resto della community di DevTools.

Passaggi successivi

Puoi gestire tutte le cartelle già configurate in Impostazioni > Workspace.

Successivamente, scopri come utilizzare DevTools per modificare il CSS ed eseguire il debug di JavaScript.

Vedi anche

Le sostituzioni locali sono un'altra funzionalità di DevTools, in qualche modo simile, che consente di simulare i contenuti web o le intestazioni delle richieste. In questo modo, puoi sperimentare liberamente le modifiche a una pagina senza attendere che il backend si aggiorni. Con le sostituzioni locali, le modifiche vengono mantenute tra i caricamenti della pagina, ma non vengono mappate al codice sorgente della pagina.