Modificare e salvare i file in uno spazio di lavoro

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Questo tutorial offre la possibilità di fare pratica configurando un'area di lavoro in modo da utilizzarla 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:

  • Il codice sorgente del tuo sito è sul computer.
  • Esegui un server web locale dalla directory del codice sorgente, in modo che il sito sia accessibile dall'indirizzo localhost:8080.
  • Hai aperto localhost:8080 in Google Chrome e utilizzi DevTools per modificare il CSS del sito.

Quando Workspace è attivato, le modifiche CSS apportate in DevTools vengono salvate nel codice sorgente sul desktop.

Limitazioni

Se utilizzi un framework moderno, è probabile che questa trasformi il tuo codice sorgente da un formato facile da gestire a un formato ottimizzato per essere eseguito il più rapidamente possibile. Workspace è in genere in grado di mappare il codice ottimizzato al codice sorgente originale con l'aiuto delle mappe sorgente.

La community di DevTools si impegna a supportare le funzionalità fornite dalle mappe di origine in una serie di framework e strumenti. Se riscontri problemi durante l'utilizzo di un'area di lavoro con il framework che preferisci o lo fai 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 DevTools.

Funzionalità correlata: sostituzioni locali

Gli override locali sono un'altra funzionalità di DevTools simile all'area di lavoro. Utilizza gli override locali per simulare i contenuti web o le intestazioni delle richieste senza attendere le modifiche del backend o quando vuoi sperimentare le modifiche a una pagina e hai bisogno di vedere queste modifiche nei caricamenti di pagina, ma non ti interessa mappare le modifiche al codice sorgente della pagina.

Passaggio 1: configura

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

Configura la demo

  1. Clona questo repository demo in alcune directory sul tuo computer. Ad esempio, ~/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 qualsiasi 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

    Nel resto di questo tutorial, questa directory si chiamerà /devtools-workspace-demo.

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

    La pagina demo ospitata in locale e aperta in Chrome.

Configura DevTools

  1. Apri DevTools nella pagina demo ospitata localmente.

  2. Vai a Origini > Area di lavoro e configura un'area 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 scegli la cartella.
    • Fai clic su Aggiungi. Aggiungi cartella e seleziona la cartella. La scheda Origini, quindi la scheda Area di lavoro.

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

    Il pulsante Consenti nel prompt.

Nella scheda Area di lavoro ora è visualizzato 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 Area di lavoro ora mostra una mappatura tra i file locali e quelli di rete.

Passaggio 2: salva una modifica del CSS sul disco

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

    Visualizzazione di stili.css in un editor di testo.

  2. Chiudi l'editor di testo.

  3. Torna a DevTools, fai clic sulla scheda Elementi.

  4. Modifica il valore della proprietà color dell'elemento <h1> nel 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.

    Impostare la proprietà del colore dell&#39;elemento h1 sul verde.

    Il punto verde Il puntino verde. accanto a styles.css:1 nel riquadro Stili indica che qualsiasi modifica apportata è 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 e DevTools l'hai salvata sul disco. Poi, quando hai ricaricato la pagina, il tuo server locale ha pubblicato la copia modificata del file dal disco.

Passaggio 3: salva una modifica HTML su disco

Prova a modificare l'HTML dal riquadro Elementi

  1. Apri la scheda Elementi.

  2. Fai doppio clic sui contenuti testuali dell'elemento h1, che indica Workspaces Demo, e sostituiscili con I ❤️ Cake.

    Tentativo di modifica del codice HTML dalla struttura 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. Viene ripristinato il titolo originale della pagina.

(Facoltativo) Perché non funziona

  • La struttura ad albero dei nodi che vedi nel riquadro Elementi rappresenta il DOM della pagina.
  • Per visualizzare una pagina, un browser recupera l'HTML sulla rete, analizza il codice HTML e poi lo converte in una struttura di nodi DOM.
  • Se la pagina contiene codice JavaScript, quest'ultimo può aggiungere, eliminare o modificare i nodi DOM. Il CSS può anche modificare il DOM tramite la proprietà content.
  • Il browser utilizza infine il DOM per determinare i contenuti da presentare agli utenti del browser.
  • Di conseguenza, lo stato finale della pagina visualizzata dagli utenti potrebbe essere molto diverso dal codice HTML recuperato dal browser.
  • Ciò rende difficile per DevTools la risoluzione della posizione in cui deve essere salvata una modifica apportata nel riquadro Elementi, perché il DOM è influenzato da HTML, JavaScript e CSS.

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

Modificare l'HTML dal riquadro Origini

Se vuoi salvare una modifica al codice HTML della pagina, utilizza il riquadro Origini.

  1. Vai a Origini > Pagina.
  2. Fai clic su (indice). 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> mostra ancora 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 JavaScript su disco

Il riquadro Origini consente anche di apportare modifiche a JavaScript. Tuttavia, a volte è necessario accedere ad altri riquadri, ad esempio al riquadro Elementi o al riquadro Console, durante la modifica del sito. È possibile aprire il riquadro Origini insieme agli altri riquadri.

  1. Apri la scheda Elementi.
  2. Premi Comando+Maiusc+P (Mac) o Ctrl+Maiusc+P (Windows, Linux, ChromeOS). Si apre il menu Comando.

  3. Digita QS, poi seleziona Mostra origine rapida. Nella parte inferiore della finestra DevTools è ora disponibile la scheda Origine rapida.

    Apertura della scheda Origine rapida dal menu dei comandi.

    La scheda mostra i contenuti di index.html, che è l'ultimo file modificato nel riquadro Origini. La scheda Origine rapida fornisce l'editor del riquadro Origini, così puoi modificare i file mentre altri riquadri sono 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. Osserva il link Edit and save files in a workspace nella demo. Il suo stile è regolare.

  7. Aggiungi il seguente codice in fondo a script.js nella scheda Fonte 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 > Area di lavoro.

Scopri come utilizzare DevTools per modificare il CSS ed eseguire il debug di JavaScript.