Modifiche: monitora le modifiche HTML, CSS e JavaScript

Sofia Emelianova
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:

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.

    Esegui il comando Mostra modifiche

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

L'opzione Modifiche è attiva nel menu a discesa Altri strumenti

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:

  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:

Differenza evidenziata nel riquadro Modifiche

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.

    Copia.

  2. Fai clic sul pulsante Copia. 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 Annulla Ripristina tutte le modifiche al file corrente.

Pulsante Ripristina