Con las anulaciones locales, puedes desbloquear tu flujo de trabajo creando prototipos y probando cambios y correcciones sin esperar a que el backend, los terceros ni las APIs los admitan.
Usa anulaciones locales para simular recursos remotos, incluso si no tienes acceso a ellos. Puedes simular respuestas a solicitudes y varios archivos, por ejemplo, encabezados de respuesta HTTP y contenido web, incluidas las solicitudes de recuperación y XHR.
Por ejemplo, las anulaciones locales pueden ayudar en los siguientes casos de uso:
- Simula las correcciones de la API y prueba las correcciones antes de que lleguen a producción.
- Crea prototipos de nuevos diseños de IU si ya conoces las estructuras de datos que usará el backend.
- Prueba correcciones de rendimiento, por ejemplo, elimina CLS para asegurarte de que sean significativas.
Las anulaciones locales también te permiten conservar los cambios que realizas en Herramientas para desarrolladores entre las cargas de páginas.
Cómo funciona
- Cuando realizas cambios en Herramientas para desarrolladores, esta herramienta guarda una copia del archivo modificado en la carpeta que especifiques.
- Cuando vuelves a cargar la página, Herramientas para desarrolladores entrega el archivo local modificado, en lugar del recurso de red.
También puedes guardar los cambios directamente en los archivos fuente. Consulta Cómo editar y guardar archivos con espacios de trabajo.
Limitaciones
Las anulaciones locales funcionan para los encabezados de respuesta de red y para la mayoría de los tipos de archivos, incluidas las solicitudes XHR y fetch, con algunas excepciones:
- Se inhabilita la caché cuando están habilitadas las Anulaciones locales.
- Herramientas para desarrolladores no guarda los cambios realizados en el árbol del DOM del panel Elements.
- Si editas CSS en el panel Styles, y la fuente de ese CSS es un archivo HTML, Herramientas para desarrolladores no guardará el cambio.
En su lugar, puedes editar los archivos HTML en el panel Fuentes.
Configura anulaciones locales
Puedes anular el contenido web o los encabezados de respuesta de inmediato en el panel Red:
- Abre Herramientas para desarrolladores, navega al panel Red, haz clic con el botón derecho en una solicitud que quieras anular y elige Anular encabezados o Anular contenido en el menú desplegable.
- Si aún no configuraste anulaciones locales, Herramientas para desarrolladores te solicitará que hagas lo siguiente en la barra de acciones de la parte superior:
- Selecciona una carpeta para almacenar los archivos de anulación.
- Haz clic en Permitir (Allow) para otorgarle derechos de acceso a las Herramientas para desarrolladores.
- Si tienes anulaciones locales configuradas, pero inhabilitadas, Herramientas para desarrolladores las habilitarán automáticamente.
Una vez que se configuran y habilitan las anulaciones locales, según lo que estés a punto de anular, Herramientas para desarrolladores te llevará a hacer lo siguiente:
- El panel Fuentes, que te permite realizar cambios en el contenido web.
- El editor en Red > Encabezados > Encabezados de respuesta para poder realizar cambios en los encabezados de respuesta.
Para inhabilitar temporalmente las anulaciones locales o borrar todos los archivos de anulación, navega a Fuentes > Anulaciones y desmarca la casilla de verificación
Habilitar anulaciones locales o haz clic en Borrar respectivamente.Para borrar un solo archivo de anulación o todas las anulaciones de una carpeta, haz clic con el botón derecho en el archivo o la carpeta en Sources > Overrides, selecciona Delete y, luego, haz clic en OK en el cuadro de diálogo. Esta acción no se puede deshacer y tendrás que volver a crear manualmente las anulaciones que se borraron.
Para ver rápidamente todas las anulaciones, en el panel Red, haz clic con el botón derecho en una solicitud y selecciona Mostrar todas las anulaciones. Las Herramientas para desarrolladores te llevarán a Fuentes > Anulaciones.
Anular contenido web
Para anular el contenido web, haz lo siguiente:
- Configura anulaciones locales.
- Realiza cambios en los archivos y guárdalos en Herramientas para desarrolladores.
Por ejemplo, puedes editar archivos en Fuentes o CSS en Elementos > Estilos, a menos que el CSS se encuentre en archivos HTML.
Herramientas para desarrolladores guarda los archivos modificados, los enumera en Fuentes > Anulaciones y muestra el ícono junto a los archivos anulados en los paneles y paneles relevantes: Elementos > Estilos, Red y Fuentes > Anulaciones.
Además, en el panel Red se muestra un ícono de punto púrpura con información sobre la herramienta junto a la pestaña Respuesta de una solicitud con contenido web anulado.
Anula las solicitudes XHR o de recuperación para simular recursos remotos
Con las anulaciones locales, no necesitas acceso al backend ni tienes que esperar a que sea compatible con tus cambios. Simula y experimenta sobre la marcha:
- Configura anulaciones locales.
- En Red, filtra por solicitudes XHR/fetch, busca la que necesites, haz clic con el botón derecho en ella y selecciona Anular contenido.
- Realiza los cambios en los datos recuperados y guarda el archivo.
- Actualiza la página y observa los cambios aplicados.
Para conocer este flujo de trabajo, mira el siguiente video:
Realiza un seguimiento de los cambios locales
Puedes hacer un seguimiento de todos los cambios que haces en el contenido web desde un solo lugar: la pestaña del panel lateral Cambios.
Además, en Fuentes > Anulaciones, puedes hacer clic con el botón derecho en el archivo guardado y seleccionar Abrir en la carpeta contenedora en el menú contextual. Se abrirá la carpeta que seleccionaste durante la overrides setup. Allí podrás modificar los archivos con tu editor de código favorito.
Anular encabezados de respuesta HTTP
En el panel Red, puedes anular los encabezados de respuesta HTTP sin acceder al servidor web.
Con las anulaciones de encabezados de respuesta, puedes crear prototipos de manera local para varios encabezados, incluidos, sin limitaciones, lo siguiente:
- Encabezados de uso compartido de recursos entre dominios (CORS)
- Encabezados de Permissions-Policy
- Encabezados de aislamiento multiorigen
Sigue estos pasos para anular un encabezado de respuesta:
- Configura anulaciones locales y, luego, inspecciona, por ejemplo, esta página de demostración.
- Ve a Red, busca una solicitud, haz clic con el botón derecho en ella y selecciona Anular encabezados. Herramientas para desarrolladores te llevará al editor Headers > Response Headers.
Coloca el cursor sobre el valor del encabezado de respuesta y coloca el cursor allí.
Como alternativa, para habilitar el editor Encabezados de respuesta, coloca el cursor sobre un valor de encabezado de respuesta y haz clic en Editar Editar.
Modifica o agrega un encabezado nuevo.
- Para editar un valor de encabezado, haz clic en él.
- Para agregar un encabezado nuevo, haz clic en Agregar encabezado.
- Para quitar una anulación de encabezado, haz clic en la junto a ella. Esta acción quita los encabezados que agregaste o revierte los valores modificados a los valores originales.
En el panel Red, se destacan los encabezados modificados en verde y se quitan las anulaciones en rojo y tachadas. Además, en la pestaña Encabezados, se muestra un ícono de punto púrpura con información sobre la herramienta que te indica que se anularon los encabezados.
Actualiza la página para aplicar los cambios.
Editar todas las anulaciones de encabezados de respuesta
Para editar todas las anulaciones de encabezados en un solo lugar, siga estos pasos:
Haz clic en .headers junto a la sección Response Headers.
Herramientas para desarrolladores te llevará al archivo
.headers
correspondiente en Fuentes > Anulaciones.Edita el archivo
.headers
:Para agregar una nueva regla de anulación, haz clic en Agregar regla de anulación. Una regla es un conjunto de encabezados y valores, y una o varias solicitudes para aplicarlos.
Para agregar un par de encabezado-valor a una regla, coloca el cursor sobre otro par y haz clic en
.Para revertir un valor de encabezado, quita un encabezado o una regla agregados, coloca el cursor sobre ellos y haz clic en la
.
Guarda el archivo
.headers
con Comando / Control + S.Actualiza la página para aplicar los cambios.