Modifiche: monitora le modifiche HTML, CSS e JavaScript

Sofia Emelianova

Utilizza il riquadro Modifiche per monitorare le modifiche al codice apportate in DevTools.

Panoramica

Con il riquadro Modifiche, puoi monitorare le modifiche apportate a:

• HTML in Origini con le sostituzione locali attivate
• CSS in Elementi > Stili o Origini
• JavaScript in Origini

Il riquadro Modifiche mostra solo le modifiche apportate in DevTools. Se ricarichi DevTools o la pagina, le modifiche scompaiono.

Per fare in modo che DevTools mantenga le modifiche nei vari caricamenti di pagina, segui la procedura descritta in Sostituzioni locali.

Per consentire a DevTools di scrivere modifiche alle origini locali, segui la procedura descritta in Modificare e salvare i file con gli spazi di lavoro.

Apri il riquadro Modifiche

Per aprire il riquadro Modifiche:

1. Apri DevTools.

2. Premi Comando+Maiusc+P (Mac) o Ctrl+Maiusc+P (Windows, Linux, ChromeOS) per aprire il menu di comando.

3. Inizia a digitare changes, seleziona Mostra modifiche e premi Invio.

   

In alternativa, nell'angolo in alto a destra, fai clic su Personalizza e controlla DevTools > Altri strumenti > Modifiche.

Per impostazione predefinita, DevTools mostra il riquadro Modifiche nella parte inferiore della finestra di DevTools, nel riquadro laterale.

Visualizzare e comprendere le modifiche

Per visualizzare le modifiche:

1. Apri DevTools.

2. Apporta modifiche alle origini:

   • HTML: innanzitutto, attiva Override locali, poi apporta le modifiche in Origini
   • CSS in Elementi > Stili o Origini
   • JavaScript in Origini

3. Apri il riquadro Modifiche e seleziona un file sul lato destro del riquadro.

4. Osserva un output diff che mette in evidenza quanto segue:

Il riquadro Modifiche stampa in un formato leggibile l'output di diff automaticamente, quindi non devi scorrere orizzontalmente per visualizzare le modifiche in una singola riga.

Copia modifiche CSS

Se hai apportato modifiche al codice CSS in Elementi > Stili, puoi copiarle tutte con un solo pulsante:

1. Apri il riquadro Modifiche e, sul lato destro del riquadro, seleziona il file CSS a cui hai apportato modifiche.

   

2. Fai clic sul pulsante Copia nella parte inferiore del riquadro Modifiche.

Ripristinare tutte le modifiche apportate a un file

Per annullare le modifiche apportate a un file:

1. Sul lato sinistro del riquadro Modifiche, seleziona un file con le modifiche da annullare.
2. Nella barra delle azioni in basso, fai clic su Ripristina tutte le modifiche al file corrente.