Cambios: Realice un seguimiento de los cambios que realizó en HTML, CSS y JavaScript

Sofia Emelianova

Usa el panel Cambios para hacer un seguimiento de los cambios de código realizados en DevTools.

Descripción general

Con el panel Cambios, puedes hacer un seguimiento de los cambios que realices en los siguientes elementos:

• HTML en Fuentes con Anulaciones locales habilitadas
• CSS en Elementos > Estilos o Fuentes
• JavaScript en Fuentes

En el panel Cambios, solo se muestran los cambios que realizas en DevTools. Si vuelves a cargar DevTools o la página, los cambios desaparecerán.

Para que DevTools conserve los cambios en las cargas de página, sigue los pasos que se indican en Anulaciones locales.

Para que DevTools escriba cambios en tus fuentes locales, sigue los pasos que se indican en Edita y guarda archivos con Workspaces.

Abre el panel Cambios

Para abrir el panel Cambios, haz lo siguiente:

1. Abre las Herramientas para desarrolladores.

2. Presiona Comando+Mayúsculas+P (Mac) o Control+Mayúsculas+P (Windows, Linux y ChromeOS) para abrir el menú de comandos.

3. Comienza a escribir changes, selecciona Mostrar cambios y presiona Intro.

   

Como alternativa, en la esquina superior derecha, haz clic en Personalizar y controlar DevTools > Más herramientas > Cambios.

De forma predeterminada, DevTools muestra el panel Cambios en la parte inferior de la ventana de DevTools, en el panel lateral.

Cómo ver y comprender tus cambios

Para ver los cambios, sigue estos pasos:

1. Abre las Herramientas para desarrolladores.

2. Realiza cambios en tus fuentes:

   • HTML: Primero, habilita Anulaciones locales y, luego, realiza cambios en Fuentes.
   • CSS en Elementos > Estilos o Fuentes
   • JavaScript en Fuentes

3. Abre el panel Cambios y selecciona un archivo en el lado derecho del panel.

4. Observa un resultado de diff que destaca lo siguiente:

El panel Cambios imprime de forma elegante el resultado de diff automáticamente, por lo que no tienes que desplazarte horizontalmente para ver los cambios en una sola línea.

Cómo copiar cambios de CSS

Si hiciste cambios en el CSS en Elementos > Estilos, puedes copiarlos todos con un solo botón:

1. Abre el panel Cambios y, en el lado derecho del panel, selecciona el archivo CSS en el que hiciste cambios.

   

2. Haz clic en el botón Copiar en la parte inferior del panel de cambios.

Cómo revertir todos los cambios realizados en un archivo

Para revertir los cambios realizados en un archivo, haz lo siguiente:

1. En el lado izquierdo del panel Cambios, selecciona un archivo con los cambios que deseas revertir.
2. En la barra de acciones de la parte inferior, haz clic en Revertir todos los cambios al archivo actual.