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 puoi usarlo nei tuoi progetti. Workspace ti consente di salvare le modifiche apportate DevTools al codice sorgente archiviato sul tuo computer.

Panoramica

Workspace ti consente di salvare una modifica apportata in DevTools in una copia locale dello stesso file su del tuo computer. Ad esempio, supponiamo che:

  • Il codice sorgente del tuo sito è sul desktop.
  • Sia in esecuzione un server web locale dalla directory del codice sorgente, in modo che il sito sia accessibile alle ore localhost:8080.
  • Hai aperto localhost:8080 in Google Chrome e stai utilizzando DevTools per modificare l'impostazione CSS.

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

Limitazioni

Se utilizzi un framework moderno, probabilmente il codice sorgente viene trasformato da un formato facile da mantenere in un formato ottimizzato per essere eseguito il più rapidamente possibile. L'area di lavoro è di solito è in grado di mappare il codice ottimizzato al codice sorgente originale con l'aiuto del mappe.

La community DevTools si adopera per supportare le funzionalità fornite dalle mappe di origine in una serie di framework e strumenti. Se riscontri problemi mentre utilizzi 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 di DevTools.

Funzione correlata: override locali

Gli Override locali sono un'altra funzionalità di DevTools simile all'area di lavoro. Usa gli override locali per simulare i contenuti web o le intestazioni delle richieste senza attendere modifiche al backend o quando vuoi sperimentare le modifiche apportate a una pagina e devi vederle su tutte le pagine ma non è importante 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 demo in una directory sul tuo computer. Ad esempio, per ~/Desktop.

  2. Avvia un server web locale in ~/Desktop/devtools-workspace-demo. Di seguito è riportato un codice di esempio per l'avvio 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 del tutorial, questa directory verrà chiamata /devtools-workspace-demo.

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

    La pagina demo ospitata localmente aperta in Chrome.

Configura DevTools

  1. Apri DevTools nella pagina demo ospitata localmente.

  2. Vai a Origini > Area 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. Nel prompt 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 punti 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 di h1 è impostato su fuchsia.

    Visualizzazione di style.css in un editor di testo.

  2. Chiudi l'editor di testo.

  3. Torna in DevTools, fai clic sulla scheda Elements.

  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 modifica il colore come preferisci. In questo esempio, il colore è impostato sul 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 su colore preferito.

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

Passaggio 3: salva una modifica HTML su disco

Prova a modificare il codice HTML dal riquadro Elementi

  1. Apri la scheda Elements.

  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. Viene ripristinato il titolo originale della pagina.

(Facoltativo) Perché non funziona

  • La struttura dei nodi che vedi nel riquadro Elements 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 di nodi DOM.
  • Se la pagina contiene codice JavaScript, tale codice potrebbe aggiungere, eliminare o modificare i nodi DOM. Il CSS può modificare anche 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 visualizzata dagli utenti può essere molto diverso dal codice HTML indicato il browser recuperato.
  • Questo rende difficile per DevTools risolvere il punto in cui è stata apportata una modifica nel riquadro Elements. poiché 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, puoi farlo nel 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. Ma a volte è necessario Accedere ad altri riquadri, come il riquadro Elements o il riquadro Elements, mentre apporti modifiche al tuo sito. C'è un modo per aprire il riquadro Origini insieme ad altri.

  1. Apri la scheda Elements.
  2. Premi Comando+Maiusc+P (Mac) o Ctrl+Maiusc+P (Windows, Linux, ChromeOS). Il menu dei comandi si apre.

  3. Digita QS, poi seleziona Mostra fonte rapida. In fondo alla finestra di DevTools c'è ora una scheda Fonte rapida.

    Apro la scheda Origine rapida tramite il menu Comando.

    La scheda mostra i contenuti di index.html, che è l'ultimo il file che hai modificato nel riquadro Origini. La scheda Fonte rapida ti offre l'editor Il riquadro Origini, in modo da poter modificare i file mantenendo aperti 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. Si adatta regolarmente.

  7. Aggiungi il seguente codice in fondo a 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 > Workspace.

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