Modificare e salvare i file in uno spazio di lavoro

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Questo tutorial offre un'opportunità per fare pratica configurando un'area di lavoro in modo da poterla utilizzare nei tuoi progetti. Workspace ti consente di salvare le modifiche apportate in DevTools al codice sorgente memorizzato sul 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 un'area di lavoro con il framework che preferisci o se la usi 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.

Funzione correlata: override locali

Le sostituzione locali sono un'altra funzionalità di DevTools simile allo spazio di lavoro. Utilizza gli override locali per simulare i contenuti web o le intestazioni delle richieste senza attendere le modifiche al backend o quando vuoi sperimentare le modifiche in una pagina e hai bisogno di vedere le modifiche tra i caricamenti di pagina, ma non ti interessa mappare le modifiche al codice sorgente della pagina.

Passaggio 1: configurazione

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

Configura la demo

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

  2. Avvia un server web locale in ~/Desktop/devtools-workspace-demo. Di seguito è riportato un codice campione per avviare 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 del sito ospitata localmente. Dovresti riuscire ad 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.

Configura 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. La scheda Origini e poi Area 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 Area 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 Area di lavoro ora mostra una mappatura tra i file locali e quelli di rete.

Passaggio 2: salva una modifica CSS su disco

  1. Apri /devtools-workspace-demo/styles.css in un editor di testo. Nota come la proprietà color degli elementi h1 è 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.

    Imposto la proprietà del colore dell&#39;elemento h1 su verde.

    Il punto verde Il puntino verde. accanto a styles.css:1 nel riquadro Stili indica che ogni 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 la salva 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 sul disco

Prova a modificare il codice HTML dal riquadro Elementi

  1. Apri la scheda Elementi.

  2. Fai doppio clic sul contenuto testuale dell'elemento h1, che dice Workspaces Demo, e sostituiscilo 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. La pagina torna al titolo originale.

(Facoltativo) Perché non funziona

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

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

Modificare il codice HTML dal riquadro Risorse

Se vuoi salvare una modifica al codice HTML della pagina, puoi farlo 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 JavaScript su disco

Il riquadro Origini consente anche di apportare modifiche a JavaScript. A volte però devi accedere ad altri riquadri, ad esempio al riquadro Elementi o al riquadro 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). Si apre il menu dei comandi.

  3. Digita QS, poi seleziona Mostra fonte 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, che è l'ultimo file che hai modificato nel riquadro Origini. La scheda Fonti rapide ti offre l'editor dal riquadro Origini, per consentirti di modificare i file mantenendo aperti gli altri riquadri.

  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. Viene stilato 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.