Solicitudes de red: Prueba tu sitio bloqueando o limitando las solicitudes de red

Ewa Gasperowicz

Usa el panel Condiciones de la solicitud para probar cómo se comporta tu página si se impide la carga de ciertos recursos, como imágenes u hojas de estilo, o si los recursos se cargan más lento.

Descripción general

El panel Condiciones de la solicitud te permite bloquear varios recursos o "patrones" al mismo tiempo y activarlos o desactivarlos desde una lista. También puedes bloquear dominios o URLs de solicitudes de red desde el panel Red, y los patrones correspondientes aparecerán en el panel desplegable Condiciones de la solicitud.

El panel lateral Condiciones de la solicitud te permite hacer lo siguiente:

  • Agregar o quitar patrones
  • Editar patrones
  • Quita todos los patrones.
  • Habilita o inhabilita el bloqueo o la limitación de solicitudes de red. Una vez habilitada, puedes activar o desactivar el bloqueo o la limitación para un patrón individual.

Si cierras Herramientas para desarrolladores, se inhabilitarán el bloqueo y la limitación de solicitudes de red. Debes abrir el panel y volver a habilitar el bloqueo. Sin embargo, las Herramientas para desarrolladores guardan los patrones incluso después de que se cierra el navegador.

Cómo bloquear o limitar una solicitud de red

Puedes bloquear las solicitudes de red desde el panel Red en las Herramientas para desarrolladores.

  1. En el panel Network, en la sección Name, haz clic con el botón derecho en una solicitud y selecciona Block request o Throttle request. imagen
  2. El panel Condiciones de la solicitud se abre automáticamente y muestra el patrón pertinente como bloqueado o limitado. Esto también habilita automáticamente la casilla de verificación Habilitar el bloqueo y la limitación.

Comprende qué solicitudes se limitan o bloquean

Para distinguir entre las solicitudes lentas y las que se limitan con las Herramientas para desarrolladores, puedes consultar los paneles de red y de rendimiento.

En el panel de red, haz lo siguiente:

  • Solicitudes bloqueadas: Consulta la columna Estado. Las solicitudes bloqueadas se mostrarán de forma explícita (blocked:devtools) y serán de color rojo.
  • Solicitudes limitadas: Aparecerá un ícono dorado o marrón junto a la URL de la solicitud. También puedes consultar la columna Hora. El ícono aparecerá junto al horario.
    • Coloca el cursor sobre el ícono para ver exactamente qué condición de red se aplicó.
    • Haz clic en el ícono para abrir de inmediato el panel Condiciones de la solicitud y destacar la regla responsable de la limitación.

El panel de red en Herramientas para desarrolladores muestra indicadores de solicitudes bloqueadas y limitadas.

En el panel Rendimiento, también puedes buscar condiciones de red cuando grabes un perfil de rendimiento. Para ello, sigue estos pasos:

  1. Ve al panel Rendimiento y captura una grabación.
  2. Ubica la solicitud en el segmento de red.
  3. Coloca el cursor sobre la solicitud para ver una información sobre la herramienta que detalla las condiciones de red aplicadas.

Abre el panel lateral de condiciones de la solicitud

Para abrir el panel lateral Condiciones de la solicitud, haz lo siguiente:

  1. Abre las Herramientas para desarrolladores.
  2. Abre el menú de comandos presionando lo siguiente:
    • macOS: Comando + Mayúsculas + P
    • Windows, Linux y ChromeOS: Ctrl + Mayúsculas + P Menú de comandos con
  3. Comienza a escribir Request conditions, selecciona Show Request conditions y presiona Intro. Las Herramientas para desarrolladores muestran el panel Condiciones de la solicitud en la parte inferior de la ventana de Herramientas para desarrolladores.

Como alternativa, en la esquina superior derecha, selecciona Más herramientas > Condiciones de solicitud.

Cómo modificar un parámetro de configuración de limitación

Para personalizar un parámetro de configuración de limitación, haz lo siguiente:

  1. Abre el panel Condiciones de la solicitud y ve a la solicitud específica.
  2. En la columna Throttling, selecciona un parámetro de configuración predeterminado (por ejemplo, 3G lenta o 3G rápida) en el menú desplegable. También puedes agregar un perfil de red personalizado.

Cómo modificar un patrón de solicitud

Para modificar un patrón, en el panel Condiciones de la solicitud, haz clic en el botón Editar junto al patrón, edítalo y haz clic en Guardar. También puedes hacer clic en el botón Agregar condición para crear una nueva. Cuando ingresas un patrón de URL, puedes usar comodines (*) para que coincidan las partes dinámicas de la URL. Por ejemplo, *://example.com coincidirá con todas las solicitudes a la API para ese dominio. Puedes usar comodines para aplicar condiciones a varios recursos a la vez con la API de URL Pattern.

Activar o desactivar el bloqueo de solicitudes de red

La casilla de verificación Habilitar el bloqueo y la limitación te permite habilitar e inhabilitar el bloqueo de solicitudes de red para todos los patrones a la vez.

Cómo reordenar los patrones de coincidencia de URL

Si una solicitud coincide con varios patrones, DevTools aplica la primera regla que encuentra. Para controlar esta precedencia, haz clic en los botones de flecha junto a la regla específica en el panel Condiciones de la solicitud para mover las reglas de alta prioridad a la parte superior de la lista.

Quitar un patrón de bloqueo de solicitudes de red

Para quitar un patrón de bloqueo de solicitudes de red específico de la lista, sigue estos pasos:

  • En el panel Condiciones de la solicitud, haz clic en el botón Borrar.

Para quitar todos los patrones de bloqueo de solicitudes de red, haz clic en el botón Quitar todos los patrones de bloqueo de red en la barra de actividades.