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

Sofia Emelianova

Con las anulaciones locales, puedes anular los encabezados de respuesta HTTP y el contenido web, incluidas las solicitudes de recuperación y XHR, para simular recursos remotos incluso si no tienes acceso a ellos. Esto te permite crear un prototipo de los cambios sin esperar a que el backend los admita. 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.

Punto clave: También puedes guardar los cambios directamente en los archivos fuente. Consulta Edita y guarda archivos con los 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:

1. 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.
2. 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:
   1. Selecciona una carpeta para almacenar los archivos de anulación.
   2. Haz clic en Permitir (Allow) para otorgarle derechos de acceso a las Herramientas para desarrolladores.
3. Si tienes anulaciones locales configuradas, pero inhabilitadas, Herramientas para desarrolladores las habilitarán automáticamente.

4. 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:

1. Configura anulaciones locales.
2. Realiza cambios en los archivos y guárdalos en Herramientas para desarrolladores.

Nota: No puedes anular los archivos asignados de origen. Si haces clic con el botón derecho en una solicitud del panel Red y seleccionas Anular contenido, Herramientas para desarrolladores mostrará un diálogo que te llevará a los archivos fuente originales.

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:

1. Configura anulaciones locales.
2. En Red, filtra por solicitudes XHR/fetch, busca la que necesites, 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. 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.

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:

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 llevará al editor Headers > Response Headers.

3. Coloca el cursor sobre el valor del encabezado de respuesta y coloca el cursor allí.

   

   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.

4. Modifica o agrega un encabezado nuevo.

   Nota: En este ejemplo, se agrega el encabezado Access-Control-Allow-Origin: * para eliminar un error de CORS.

   

   • 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.

5. 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:

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

   

   Herramientas para desarrolladores te llevará al archivo .headers correspondiente en Fuentes > Anulaciones.

2. 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.

     Nota: Puedes usar comodines para especificar varias solicitudes a la vez. Designa varios caracteres con * y uno solo con ?.

   • 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 .

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

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