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

Sofia Emelianova

Con las anulaciones locales, puedes desbloquear tu flujo de trabajo creando prototipos y probando cambios y correcciones sin esperar a que el backend, 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 a varios archivos, por ejemplo, encabezados de respuesta HTTP y contenido web, incluidas las solicitudes de XHR y de recuperación.

Por ejemplo, las anulaciones locales pueden ayudar en los siguientes casos de uso:

• Simular la API y probar las correcciones de la API antes de que se lancen a producción
• Crea prototipos de diseños de IU nuevos si ya conoces las estructuras de datos que usará el backend.
• Prueba las correcciones de rendimiento, por ejemplo, elimina el CLS, para asegurarte de antemano de que sean significativas.

Nota: Mira el video anterior para obtener más información sobre los casos de uso.

Las anulaciones locales también te permiten conservar los cambios que realizas en Herramientas para desarrolladores en las cargas de página.

Cómo funciona

• Cuando realizas cambios en Herramientas para desarrolladores, esta guarda una copia del archivo modificado en una carpeta que especifiques.
• Cuando vuelvas a cargar la página, Herramientas para desarrolladores entregará el archivo local modificado en lugar del recurso de red.

Nota: Las anulaciones locales inhabilitan automáticamente la caché.

También puedes guardar los cambios directamente en los archivos fuente. 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 de XHR y de recuperación, con algunas excepciones:

• La caché se inhabilita cuando se habilitan las anulaciones locales.
• DevTools 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, DevTools no guardará el cambio.

En su lugar, puedes editar archivos HTML en el panel Sources.

Cómo configurar anulaciones locales

Puedes anular el contenido web o los encabezados de respuesta de inmediato en el panel Red:

1. Abre las 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 reemplazos locales, en la barra de acciones de la parte superior, las Herramientas para desarrolladores te solicitarán que hagas lo siguiente:
   1. Selecciona una carpeta para almacenar los archivos de anulación.
   2. Haz clic en Permitir para otorgarle derechos de acceso a DevTools.
3. Si tienes anulaciones locales configuradas, pero inhabilitadas, las 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 lo siguiente:

   • El panel Fuentes para que puedas realizar cambios en el contenido web
   • El editor en Network > Headers > Response Headers para que puedas 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 reemplazo o todos los reemplazos de una carpeta, haz clic con el botón derecho en el archivo o la carpeta en Fuentes > Reemplazos, selecciona Borrar y, luego, haz clic en Aceptar en el diálogo. Esta acción no se puede deshacer y tendrás que 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 llevarán a Fuentes > Invalidaciones.

Anula el contenido web

Para anular el contenido web, haz lo siguiente:

1. Configura anulaciones locales.
2. Realizar cambios en los archivos y guardarlos en Herramientas para desarrolladores

Nota: No puedes anular los archivos mapeados a la fuente. Si haces clic con el botón derecho en una solicitud del panel Network y seleccionas Override content, Herramientas para desarrolladores te 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.

DevTools guarda los archivos modificados, los enumera en Fuentes > Invalidaciones y te muestra el ícono junto a los archivos invalidados en los paneles y paneles relevantes: Elementos > Estilos, Red y Fuentes > Invalidaciones.

Además, el panel Network muestra un ícono de punto morado con una sugerencia junto a la pestaña Response de una solicitud con contenido web anulado.

Anula las solicitudes de XHR o de recuperación para simular recursos remotos

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

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

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

Haz 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 > Invalidaciones, puedes hacer clic con el botón derecho en el archivo guardado y seleccionar Abrir en la carpeta que lo contiene 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 Network, puedes anular los encabezados de respuesta HTTP sin tener acceso al servidor web.

Con las anulaciones de encabezados de respuesta, puedes crear prototipos de correcciones de varios encabezados de forma local, incluidos, sin limitaciones, los siguientes:

• Encabezados de uso compartido de recursos entre dominios (CORS)
• Encabezados de Permissions-Policy
• Encabezados de aislamiento de origen cruzado

Para anular un encabezado de respuesta, haz lo siguiente:

1. Configura anulaciones locales y abre la página que deseas depurar.
2. Ve a Network, busca una solicitud, haz clic con el botón derecho en ella y selecciona Override headers. Las Herramientas para desarrolladores te llevan al editor de Encabezados > Encabezados de respuesta.

3. Coloca el cursor sobre el valor de un 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. Modificar o agregar un encabezado nuevo

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

   

   • Para editar el valor de un 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 junto a ella. Esto quita los encabezados que agregaste o revierte los valores modificados a los valores originales.

   En el panel Network, se destacan los encabezados modificados en verde y los reemplazos quitados en rojo y tachados. Además, la pestaña Encabezados muestra un ícono de punto morado con un cuadro de información para indicarte que se anularon los encabezados.

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

Edita todas las anulaciones del encabezado de respuesta

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

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

   

   Las Herramientas para desarrolladores te llevan al archivo .headers correspondiente en Fuentes > Invalidaciones.

2. Edita el archivo .headers:

   

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

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

   • Para agregar un par encabezado-valor a una regla, coloca el cursor sobre otro par y haz clic en .

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

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

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