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

Sofia Emelianova
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, 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. Selección de anular contenido en el menú que aparece cuando se hace clic con el botón derecho de una solicitud.
  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. Herramientas para desarrolladores te solicitará que selecciones una carpeta.
    2. Haz clic en Permitir para que las Herramientas para desarrolladores tengan derechos de acceso sobre ella. Herramientas para desarrolladores solicita acceso.
  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:

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 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 Se guardó la configuración. junto a los archivos anulados en los paneles y paneles relevantes: Elementos > Estilos, Red y Fuentes > Anulaciones

Los íconos correspondientes junto a los archivos anulados en Fuentes, Red y Elementos, luego Estilos

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.

El ícono de punto púrpura con una información sobre herramientas junto a la pestaña Respuesta.

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

El botón Abrir en la carpeta contenedora de 12 a 1 con la nueva opción de compresión.

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:

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.

    El editor de encabezados 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.

  4. Modifica o agrega un encabezado nuevo.

    Modifica un valor de encabezado existente, agrega uno nuevo y quita una anulación.

    • 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 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. 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 Se guardó la configuración. .headers junto a la sección Response Headers.

    El vínculo Anulaciones de encabezados junto a la sección Encabezados de respuesta.

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

  2. Edita el archivo .headers:

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

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

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

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