Anula de manera local el contenido web y los encabezados de respuesta HTTP

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 o 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 ser útiles en los siguientes casos de uso:

• API de prueba y corrección de la API de prueba antes de que realmente se vayan a producción.
• Crear prototipos de nuevos diseños de IU si ya conoces las estructuras de datos que usará el backend.
• Prueba las correcciones de rendimiento, por ejemplo, eliminar CLS, para asegurarte de antemano de que sean significativas.

Las anulaciones locales también te permiten conservar los cambios que realizas en Herramientas para desarrolladores durante la carga de páginas.

Cómo funciona

• Cuando realizas cambios en DevTools, este guarda una copia del archivo modificado en una 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 de origen. Consulta Cómo editar y guardar archivos con Workspaces.

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 de recuperación, con algunas excepciones:

• La caché se inhabilita cuando las anulaciones locales están habilitadas.
• Las Herramientas para desarrolladores no guardan 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, las Herramientas para desarrolladores no guardarán el cambio.

En su lugar, puedes editar 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:

1. Abre Herramientas para desarrolladores, ve al panel Red, haz clic con el botón derecho en la solicitud que deseas anular y elige Anular encabezados o Anular contenido en el menú desplegable.
2. Si aún no configuraste las anulaciones locales, en la barra de acciones de la parte superior, DevTools te pedirá que hagas lo siguiente:
   1. Selecciona una carpeta en la que se almacenarán los archivos de anulación.
   2. Haz clic en Permitir para que las Herramientas para desarrolladores tengan derechos de acceso sobre ella.
3. Si tienes anulaciones locales configuradas, pero inhabilitadas, DevTools las habilita automáticamente.

4. Una vez que se configuren y habiliten las anulaciones locales, según lo que vayas a anular, DevTools te llevará a lo siguiente:

   • El panel Fuentes te permite realizar cambios en el contenido web.
   • El editor en Network > Headers > Response Headers te permite 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 check_box_outline_blank Habilitar anulaciones locales o haz clic en block 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 Fuentes > Anulaciones, selecciona Borrar y haz clic en Aceptar en el cuadro de diálogo. Esta acción no se puede deshacer y deberás volver a crear manualmente las anulaciones borradas.

Para ver rápidamente todas las anulaciones, en el panel Network, haz clic con el botón derecho en una solicitud y selecciona Show all overrides. Las Herramientas para desarrolladores te dirigirán a Fuentes > Anulaciones

Anular contenido web

Para anular el contenido web, haz lo siguiente:

1. Configura anulaciones locales.
2. Realiza cambios en los archivos y guárdalos en DevTools.

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 y los incluye en una lista en Fuentes > Anulación y muestra el ícono junto a los archivos anulados en los paneles y paneles relevantes: Elementos > Estilos, Red y Fuentes > Anulaciones

Además, el panel Red 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 solicitudes de recuperación o XHR para simular recursos remotos

Con las anulaciones locales, no necesitas acceso al backend ni tienes que esperar a que admita tus cambios. Simula y experimenta sobre la marcha:

1. Configura anulaciones locales.
2. En Red, filtra las solicitudes XHR/fetch, busca la que necesitas, haz clic con el botón derecho en ella y selecciona Anular contenido.
3. Realiza los cambios en los datos recuperados y guarda el archivo.
4. refresh Actualiza la página y observa los cambios aplicados.

Para conocer este flujo de trabajo, mira el siguiente video:

Realiza un seguimiento de tus cambios locales

Puedes hacer un seguimiento de todos los cambios que realices en el contenido web en un solo lugar: la pestaña del panel 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 configuración de anulaciones. Allí, puedes modificar los archivos con tu editor de código favorito.

Anula los 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 correcciones locales para varios encabezados, incluidos, sin limitaciones, los siguientes:

• Encabezados de uso compartido de recursos entre dominios (CORS)
• Encabezados de la política de permisos
• Encabezados de aislamiento de origen cruzado

Para anular un encabezado de respuesta, sigue estos pasos:

1. Configura anulaciones locales y, luego, inspecciona, por ejemplo, esta página de demostración.
2. Ve a Red, busca una solicitud, haz clic con el botón derecho en ella y selecciona Anular encabezados. Herramientas para desarrolladores te lleva a Encabezados > Editor de Response Headers

3. Coloca el cursor sobre un valor del encabezado de respuesta.

   

   Como alternativa, para habilitar el editor de Encabezados de respuesta, coloca el cursor sobre un valor de encabezado de respuesta y haz clic en Editar Editar.

4. Modifica o agrega un encabezado nuevo.

   

   • Para editar un valor de encabezado, haz clic en él.
   • Para agregar un encabezado nuevo, haz clic en add Agregar encabezado.
   • Para quitar una anulación de encabezado, haz clic en delete junto a ella. Esto elimina los encabezados que agregaste o revierte los valores modificados a los valores originales.

   El panel Red destaca los encabezados modificados en verde y quita las anulaciones en rojo y tachadas. Además, la pestaña Encabezados muestra un ícono de punto púrpura con un cuadro de información para informarte que se anularon los encabezados.

5. refresh Actualiza la página para aplicar los cambios.

Cómo editar todas las anulaciones de encabezados de respuesta

Para editar todas las anulaciones de encabezados en un solo lugar, sigue estos pasos:

1. Haz clic en .headers junto a la sección Response Headers.

   

   DevTools te dirige al archivo .headers correspondiente en Sources > Overrides.

2. Edita el archivo .headers:

   

   • Para agregar una nueva regla de anulación, haz clic en Agregar regla de anulación. Una regla aquí es un conjunto de encabezados y valores, y una o varias solicitudes a las que se aplican.

   • Para agregar un par de encabezado-valor a una regla, coloque el cursor sobre otro par y haga clic en add.

   • Para revertir un valor de encabezado, quita un encabezado o una regla agregados, coloca el cursor sobre ellos y haz clic en delete.

3. Guarda el archivo .headers con Comando o Control + S.

4. refresh Actualiza la página para aplicar los cambios.