Compartir a través de


Realizar un seguimiento de los cambios en los archivos mediante la herramienta Cambios

La herramienta Cambios realiza un seguimiento de los cambios realizados en CSS o JavaScript en DevTools. Muestra los cambios que se realizarán en los archivos de origen reales después de haber usado correctamente DevTools para modificar una copia de los archivos de la página web que se envían desde el servidor:

La herramienta Cambios muestra dos archivos que se han modificado y las modificaciones del archivo seleccionado

Use la herramienta Cambios para mostrar rápidamente todos los cambios con el fin de volver a aplicar esos cambios a los archivos de origen reales en el editor de código fuente.

Abra la herramienta Cambios haciendo clic en el icono Más herramientas

En la barra de actividades o la barra de herramientas vista rápida , haga clic en el botón Más herramientas (icono y, a continuación, seleccione Cambios:

Icono y menú

La herramienta Cambios se abre en la barra de actividad o en la vista rápida, en función de la barra de herramientas que haya usado.

Abra la herramienta Cambios mediante el menú Comando

Para abrir la herramienta Cambios mediante el menú Comando:

  1. Para abrir el menú Comando, presione Ctrl+Mayús+P en Windows/Linux o Comando+Mayús+P en Mac.

  2. Empiece a escribir los cambios. El comando Mostrar cambios está resaltado:

    Comando Mostrar cambios en el menú Comando

  3. Presione Entrar. La herramienta Cambios se abre en el panel Vista rápida :

    La herramienta Cambios en el panel Vista rápida

Vea también:

Interpretación de líneas agregadas, líneas eliminadas y diferencias en una línea

Cada archivo modificado aparece en el panel lateral. Al seleccionar un archivo se muestran las modificaciones como una diff vista. No verá todo el archivo, pero solo las líneas que han cambiado, junto con algunas líneas por encima y por debajo de las líneas modificadas, para el contexto.

En la siguiente vista de diferencias se muestra que hubo dos modificaciones en diferentes partes de un archivo. Un cambio es una inserción y un cambio son varias líneas eliminadas:

Vista de diferencias

Tipo de cambio Indicador
Línea eliminada Cada línea que se quitó del código va precedida de un - color rojo.
Línea agregada Cada nueva línea tiene un + frente y es de color verde.
Línea modificada Un par adyacente de líneas, con una - línea y, a continuación, una + línea.

Los cambios se representan como inserción o eliminación de líneas de código individuales, en las dos columnas de números de línea. La columna izquierda representa números de línea en el archivo antiguo y la columna derecha representa números de líneas en el nuevo archivo.

Abrir un archivo modificado en la herramienta Orígenes

Al hacer clic en una línea modificada en la herramienta Cambios , se abre el archivo en la herramienta Orígenes , desplazado a la línea modificada.

Deshacer todos los cambios

Para deshacer todos los cambios, en la parte inferior de la herramienta Cambios , haga clic en el botón Revertir todos los cambios al archivo actual (icono Revertir todos los cambios al archivo actual):

Revertir cambios

Entradas de desplazamiento horizontal

Cuando haya realizado un cambio en un archivo minificado, la herramienta Cambios le permite desplazarse horizontalmente para mostrar todo el código minificado:

Mostrar una línea larga de código

Para desplazarse horizontalmente, haga clic en la barra de desplazamiento horizontal o presione las teclas de flecha izquierda o derecha.