Modificare e salvare i file in uno spazio di lavoro

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Questo tutorial ti offre la possibilità di fare pratica configurando uno spazio di lavoro in modo da poterlo utilizzare nei tuoi progetti. Workspace ti consente di salvare le modifiche apportate in DevTools nel codice sorgente archiviato sul tuo computer.

Panoramica

Workspace ti consente di salvare una modifica apportata in DevTools in una copia locale dello stesso file sul tuo 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:8080.
  • Hai aperto localhost:8080 in Google Chrome e stai utilizzando DevTools per modificare il CSS del sito.

Con l'area di lavoro abilitata, le modifiche CSS apportate in DevTools vengono salvate nel codice sorgente sul computer.

Limitazioni

Se utilizzi un framework moderno, probabilmente trasforma il codice sorgente da un formato facile da gestire in un formato ottimizzato per l'esecuzione il più rapidamente possibile. Workspace è 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 uno spazio di lavoro con il tuo framework preferito o se riesci a farlo funzionare dopo alcune configurazioni personalizzate, 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.

Funzionalità correlata: sostituzioni locali

Le sostituzione locali sono un'altra funzionalità di DevTools simile allo spazio di lavoro. Utilizza le sostituzioni locali per simulare i contenuti web o le intestazioni di richiesta senza attendere le modifiche del backend o quando vuoi fare esperimenti con le modifiche a una pagina e devi visualizzarle durante i caricamenti della pagina, ma non ti interessa mappare le modifiche al codice sorgente della pagina.

Passaggio 1: configurazione

Completa questo tutorial per fare esperienza pratica con uno spazio di lavoro.

Configura la demo

  1. Clona questo repository di demo in una directory sul computer. Ad esempio, a ~/Desktop.

  2. Avvia un server web locale in ~/Desktop/devtools-workspace-demo. Di seguito è riportato un codice di esempio per l'avvio di SimpleHTTPServer, ma puoi utilizzare il server che preferisci.

    cd ~/Desktop/devtools-workspace-demo
# If your Python version is 3.X
# On Windows, try "python -m http.server" or "py -3 -m http.server"
python3 -m http.server
# If your Python version is 2.X
python -m SimpleHTTPServer

    Per il resto di questo tutorial, questa directory verrà indicata come /devtools-workspace-demo.

  3. Apri una scheda in Google Chrome e vai alla versione ospitata localmente del sito. Dovresti essere in grado di accedervi tramite un URL come localhost:8000. Il numero di porta esatto potrebbe essere diverso.

    La pagina di demo ospitata localmente si è aperta in Chrome.

Configurare DevTools

  1. Apri DevTools nella pagina di demo ospitata localmente.

  2. Vai a Origini > Spazio di lavoro e configura uno spazio di lavoro nella cartella devtools-workspace-demo che hai clonato. Puoi farlo in diversi modi:

    • Trascina la cartella nell'editor in Origini.
    • Fai clic sul link Seleziona cartella e seleziona la cartella.
    • Fai clic su Aggiungi. Aggiungi cartella e seleziona la cartella. Origini e poi alla scheda Spazio di lavoro.

  3. Nella richiesta in alto, fai clic su Consenti per concedere a DevTools l'autorizzazione di lettura e scrittura nella directory.

    Il pulsante Consenti nella richiesta.

Nella scheda Spazio di lavoro, ora è presente un punto verde accanto a index.html, script.js e styles.css. Questi puntini verdi indicano che DevTools ha stabilito una mappatura tra le risorse di rete della pagina e i file in devtools-workspace-demo.

La scheda Spazio di lavoro ora mostra una mappatura tra i file locali e quelli di rete.

Passaggio 2: salva una modifica CSS sul disco

  1. Apri /devtools-workspace-demo/styles.css in un editor di testo. Nota come la proprietà color degli elementi h1 sia impostata su fuchsia.

    Visualizzazione di styles.css in un editor di testo.

  2. Chiudi l'editor di testo.

  3. Torna in DevTools e fai clic sulla scheda Elementi.

  4. Modifica il valore della proprietà color dell'elemento <h1> con il tuo colore preferito. Per farlo:

    1. Fai clic sull'elemento <h1> nell'albero DOM.
    2. Nel riquadro Stili, individua la regola CSS h1 { color: fuchsia } e imposta il colore che preferisci. In questo esempio, il colore è impostato su verde.

    Impostazione della proprietà color dell&#39;elemento h1 su verde.

    Il punto verde Il punto verde. accanto a styles.css:1 nel riquadro Stili indica che qualsiasi modifica apportata viene mappata a /devtools-workspace-demo/styles.css.

  5. Apri di nuovo /devtools-workspace-demo/styles.css in un editor di testo. La proprietà color è ora impostata sul tuo colore preferito.

  6. Ricarica. Ricarica la pagina. Il colore dell'elemento <h1> è ancora impostato sul tuo colore preferito. Questo funziona perché quando hai apportato la modifica, DevTools l'ha salvata sul disco. Quando hai ricaricato la pagina, il server locale ha servito la copia modificata del file dal disco.

Passaggio 3: salva una modifica HTML sul disco

Prova a modificare il codice HTML dal riquadro Elementi

  1. Apri la scheda Elementi.

  2. Fai doppio clic sul contenuto di testo dell'elemento h1, che indica Workspaces Demo, e sostituiscilo con I ❤️ Cake.

    Tentativo di modificare il codice HTML dall&#39;albero DOM del riquadro Elementi.

  3. Apri /devtools-workspace-demo/index.html in un editor di testo. La modifica che hai appena apportato non è presente.

  4. Ricarica. Ricarica la pagina. La pagina torna al titolo originale.

(Facoltativo) Perché non funziona

  • L'albero di nodi visualizzato nel riquadro Elementi rappresenta il DOM della pagina.
  • Per visualizzare una pagina, un browser recupera il codice HTML dalla rete, lo analizza e lo converte in un albero di nodi DOM.
  • Se la pagina contiene JavaScript, questo può aggiungere, eliminare o modificare i nodi DOM. Anche il CSS può cambiare il DOM tramite la proprietà content.
  • Il browser utilizza il DOM per determinare quali contenuti mostrare agli utenti.
  • Pertanto, lo stato finale della pagina visualizzato dagli utenti potrebbe essere molto diverso dall'HTML recuperato dal browser.
  • Questo rende difficile per gli Strumenti per sviluppatori stabilire dove deve essere salvata una modifica apportata nel riquadro Elementi, perché il DOM è interessato da HTML, JavaScript e CSS.

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

Modificare il codice HTML dal riquadro Origini

Se vuoi salvare una modifica al codice HTML della pagina, eseguila nel riquadro Origini.

  1. Vai a Origini > Pagina.
  2. Fai clic su (index). Si apre il codice HTML della pagina.
  3. Sostituisci <h1>Workspaces Demo</h1> con <h1>I ❤️ Cake</h1>.
  4. Premi Comando+S (Mac) o Ctrl+S (Windows, Linux, ChromeOS) per salvare la modifica.

  5. Ricarica. Ricarica la pagina. L'elemento <h1> continua a mostrare il nuovo testo.

    Modifica del codice HTML dal riquadro Origini.

  6. Apri /devtools-workspace-demo/index.html. L'elemento <h1> contiene il nuovo testo.

Passaggio 4: salva una modifica di JavaScript sul disco

Il riquadro Origini è anche il luogo in cui apportare modifiche a JavaScript. Tuttavia, a volte è necessario accedere ad altri riquadri, ad esempio Elementi o Console, mentre apporti modifiche al sito. Esiste un modo per aprire il riquadro Origini insieme ad altri riquadri.

  1. Apri la scheda Elementi.
  2. Premi Comando+Maiusc+P (Mac) o Ctrl+Maiusc+P (Windows, Linux, ChromeOS). Viene visualizzato il menu dei comandi.

  3. Digita QS, quindi seleziona Mostra Origine rapida. Nella parte inferiore della finestra DevTools ora è presente la scheda Origine rapida.

    Apertura della scheda Origine rapida tramite il menu di comando.

    La scheda mostra i contenuti di index.html, ovvero l'ultimo file modificato nel riquadro Origini. La scheda Origine rapida ti consente di accedere all'editor dal riquadro Origini, in modo da poter modificare i file con altri riquadri aperti.

  4. Premi Comando+P (Mac) o Ctrl+P (Windows, Linux, ChromeOS) per aprire la finestra di dialogo Apri file.

  5. Digita script, quindi seleziona devtools-workspace-demo/script.js.

    Apertura dello script tramite la finestra di dialogo Apri file.

  6. Nota il link Edit and save files in a workspace nella demo. Viene stilizzato regolarmente.

  7. Aggiungi il seguente codice alla fine di script.js nella scheda Origine rapida.

    document.querySelector('a').style = 'font-style:italic';

  8. Premi Comando+S (Mac) o Ctrl+S (Windows, Linux, ChromeOS) per salvare la modifica.

  9. Ricarica. Ricarica la pagina. Il link nella pagina è ora in corsivo.

Il link nella pagina è ora in corsivo.

Passaggi successivi

Puoi configurare più cartelle in uno spazio di lavoro. Tutte queste cartelle sono elencate in Impostazioni > Spazio di lavoro.

A questo punto, scopri come utilizzare DevTools per modificare il CSS e eseguire il debug di JavaScript.