Modifiche: monitora le modifiche HTML, CSS e JavaScript

Sofia Emelianova
Sofia Emelianova
GitHub

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

Panoramica

Con il riquadro Modifiche, tieni traccia delle modifiche apportate a:

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

Per apportare in modo permanente a DevTools le modifiche tra un caricamento pagina e l'altro, segui i passaggi descritti in Override locali.

Per fare in modo che DevTools scriva modifiche nelle origini locali, segui i passaggi descritti in Modificare e salvare file con le aree 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 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.

Modifica l'opzione attiva nel menu a discesa Altri strumenti

Per impostazione predefinita, DevTools visualizza il riquadro Modifiche nella parte inferiore della finestra di DevTools, nel Riquadro a scomparsa.

Visualizzare e comprendere le modifiche

Per visualizzare le modifiche:

  1. Apri DevTools.

  2. Apporta modifiche alle fonti:

  3. Apri il riquadro Modifiche e seleziona un file nella parte destra del riquadro.

  4. Osserva un output diff che evidenzi quanto segue:

Differenze evidenziate nel riquadro Modifiche

Il riquadro Modifiche stampa in modo automatico l'output diff, quindi non è necessario scorrere in orizzontale per vedere le modifiche su un'unica riga.

Copia modifiche CSS

Se hai apportato modifiche al CSS in Elementi > Stili, puoi copiarli tutti con un solo pulsante:

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

    Copia.

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

Ripristina 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 ripristinare.
  2. Nella barra delle azioni in basso, fai clic su Annulla Ripristina tutte le modifiche al file corrente.

Pulsante Ripristina