Inspeccionar la actividad de red en Microsoft Edge DevTools

Este es un tutorial práctica de algunas de las características de DevTools más usadas relacionadas con la inspección de la actividad de red de una página.

Si desea examinar las características, vaya a Referencia de red.

Cuándo usar el panel Red

En general, use el panel Red cuando necesite asegurarse de que los recursos se descargan o cargan según lo esperado. Los casos de uso más comunes para el panel Red son:

• Asegurarse de que los recursos se cargan o descargan realmente.
• Inspeccionar las propiedades de un recurso individual, como los encabezados HTTP, el contenido, el tamaño, y así sucesivamente.

Si está buscando formas de mejorar el rendimiento de carga de página, no empiece con la herramienta Red. Hay muchos tipos de problemas de rendimiento de carga que no están relacionados con la actividad de red. Comience con el panel Auditorías porque le ofrece sugerencias dirigidas sobre cómo mejorar la página. Vaya a Optimizar velocidad del sitio web.

Abrir el panel Red

Para sacar el máximo partido a este tutorial, abra la demostración y pruebe las características de la página de demostración.

1. Abra la Introducción demo.

   

   La demostración

2. Para abrir DevTools, seleccione Control + Shift + J (Windows, Linux) o Command + Option + J (macOS). Se abre la herramienta Consola.

   

   La consola

   Es posible que prefiera acoplar DevTools a la parte inferior de la ventana.

   

   DevTools acoplada a la parte inferior de la ventana

3. Abra la herramienta Red.

   

   Herramienta de consola en DevTools acoplada a la parte inferior de la ventana

En este momento, la herramienta Red está vacía. DevTools solo registra la actividad de red después de abrirlo y no se ha producido ninguna actividad de red desde que abrió DevTools.

Registrar actividad de red

Para ver la actividad de red que provoca una página:

1. Actualice la página web. El panel Red registra toda la actividad de red en el registro de red.

   

   El registro de red

   Cada fila del registro de red representa un recurso. De forma predeterminada, los recursos se enumeran cronológicamente. El recurso superior suele ser el documento HTML principal. El recurso inferior es lo que se solicitó por última vez.

   Cada columna representa información sobre un recurso. En la figura anterior se muestran las columnas predeterminadas.

   • Estado. El código de estado HTTP para la respuesta.
   • Tipo. Tipo de recurso.
   • Iniciador. La causa de la solicitud de recurso. CHoosing a link in the Initiator column takes you to the source code that caused the request.
   • Hora. Duración de la solicitud.
   • Cascada. Representación gráfica de las distintas fases de la solicitud. Para mostrar un desglose, mantenga el mouse en una cascada.

   Nota

   El gráfico que se encuentra encima del registro de red se denomina Información general. No usará el gráfico Información general en este tutorial, por lo que puede ocultarlo. Vaya a Ocultar el panel Información general.

2. Después de abrir DevTools, registra la actividad de red en el registro de red. Para demostrar esto, primero mire la parte inferior del registro de red y tome nota mental de la última actividad.

3. Ahora, seleccione el botón Obtener datos en la demostración.

4. Vuelva a mirar la parte inferior del registro de red. Se muestra un nuevo getstarted.json recurso denominado.

   

   Un nuevo recurso en el registro de red

Mostrar más información

Las columnas del registro de red se pueden configurar. Puede ocultar las columnas que no está usando. También hay muchas columnas que están ocultas de forma predeterminada que puede resultar útil.

1. Mantenga el mouse en el encabezado de la tabla Registro de red, abra el menú contextual (haga clic con el botón secundario) y seleccione Dominio. Ahora se muestra el dominio de cada recurso.

   

   Habilitar la columna Dominio

   Sugerencia

   Para revisar la dirección URL completa de un recurso, mantenga el mouse en la celda de la columna Nombre.

Simular una conexión de red más lenta

La conexión de red del equipo que usa para crear sitios es probablemente más rápida que las conexiones de red de los dispositivos móviles de los usuarios. Al limitación de la página, obtienes una mejor idea del tiempo que tarda una página en cargarse en un dispositivo móvil.

1. Seleccione la lista desplegable Limitación, que está establecida en Sin limitación de forma predeterminada.

2. Seleccione Lento 3G.

   

   Seleccione Lento 3G

3. Presione durante mucho tiempo Volver a cargar ( Volver a cargar ) y seleccione Caché vacía y Recarga dura.

   

   Caché vacía y recarga dura

   En las visitas repetidas, el explorador normalmente sirve algunos archivos de la memoria caché,lo que acelera la carga de la página. La caché vacía y la recarga dura fuerzan al explorador a ir a la red para todos los recursos. Úselo para mostrar cómo un visitante por primera vez experimenta una carga de página.

   Nota

   El flujo de trabajo Caché vacía y Recarga dura solo está disponible cuando DevTools está abierto.

Capturar capturas de pantalla

Las capturas de pantalla muestran cómo se ve una página web con el tiempo mientras se carga.

1. Selecciona ( de pantalla.

   

   Seleccionar capturas de pantalla de captura

2. Actualice la página de nuevo con el flujo de trabajo Caché vacía y Recarga dura. Navegue hasta Simular una conexión más lenta si necesita un aviso sobre cómo hacerlo. El panel Capturas de pantalla proporciona miniaturas del aspecto de la página en varios puntos durante el proceso de carga.

   

   Capturas de pantalla de la carga de página

3. Seleccione la primera miniatura. DevTools muestra qué actividad de red se estaba produciendo en ese momento.

   

   La actividad de red que se estaba produciendo durante la primera captura de pantalla

4. Vuelva a seleccionar ( Configuración de red ) y desactive la casilla Capturar capturas de pantalla pantalla. ****

5. Actualice la página de nuevo.

Inspeccionar los detalles del recurso

Seleccione un recurso para obtener más información sobre él.

1. Seleccione getstarted.html. Se muestra el panel Encabezados. Use este panel para inspeccionar los encabezados HTTP.

   

   Panel Encabezados

2. Seleccione el panel Vista previa. Se muestra una representación básica del HTML.

   

   El panel Vista previa

   El panel es útil cuando una API devuelve un código de error en HTML. Es posible que le resulte más fácil leer el HTML representado que el código fuente HTML, o al inspeccionar imágenes.

3. Seleccione el panel Respuesta. Se muestra el código fuente HTML.

   

   El panel Respuesta

   Sugerencia

   Cuando se minifica un archivo, seleccione el botón Formato ( Formato ) en la parte inferior del panel Respuesta para volver a aplicar formato al contenido del archivo para que sea legible. ****

4. Seleccione **** el panel Temporización. Se muestra un desglose de la actividad de red del recurso.

   

   El panel Temporización

5. Seleccione Cerrar ( red.

   

   El botón Cerrar

Buscar respuestas y encabezados de red

Use el panel Búsqueda cuando necesite buscar en los encabezados HTTP y las respuestas de todos los recursos una determinada cadena o expresión regular.

Por ejemplo, supongamos que desea comprobar que los recursos usan directivas de caché razonables.

1. Seleccione Buscar ( ). El panel Búsqueda se abre a la izquierda del registro de red.

   

   Panel de búsqueda

2. Escriba no-cache y seleccione Enter . El panel Búsqueda enumera todas las instancias que encuentra no-cache en los encabezados de recursos o el contenido.

   

   Resultados de búsqueda de no-cache

3. Elija un resultado para ver el recurso en el que se encontró el resultado. Si está viendo los detalles del recurso, seleccione un resultado para ir directamente a él. Por ejemplo, si la consulta se encontró en un encabezado, se abrirá el panel Encabezados. Si la consulta se encontró en el contenido, se abrirá el panel Respuesta.

   

   Un resultado de búsqueda resaltado en el panel Encabezados

4. Cierre el panel Búsqueda y el panel Encabezados.

Filtrar recursos

DevTools proporciona numerosos flujos de trabajo para filtrar recursos que no son relevantes para la tarea en cuestión.

La barra de herramientas Filtros debe estar activada de forma predeterminada. Si no es así:

1. Seleccione Filtrar ( mostrarlo.

Filtrar por cadena, expresión regular o propiedad

El cuadro de texto Filtrar admite muchos tipos diferentes de filtrado.

1. Escriba png en el cuadro de texto Filtrar. Solo se muestran los archivos que contienen png el texto. En este caso, los únicos archivos que coinciden con el filtro son las imágenes PNG.

   

   Un filtro de cadena

2. Escriba /.*\.[cj]s+$/. DevTools filtra cualquier recurso con un nombre de archivo que no termine con un o un seguido j c de 1 o más s caracteres.

   

   Filtro de expresiones regulares

3. Escriba -main.css. DevTools filtra main.css . Si algún archivo coincide con el patrón, tit también se filtra.

   

   Un filtro negativo

4. Escriba domain:cdn.glitch.com en el cuadro de texto Filtrar. DevTools filtra cualquier recurso con una dirección URL que no coincida con este dominio.

   

   Filtro de propiedades

   Para obtener la lista completa de propiedades filtrables, vaya a Filtrar solicitudes por propiedades.

5. Desactive el cuadro de texto Filtrar de cualquier texto.

Filtrar por tipo de recurso

Para centrarse en un determinado tipo de archivo, como hojas de estilos:

1. Seleccione CSS. El resto de tipos de archivo se filtran.

   

   Mostrar solo archivos CSS

2. Para mostrar también scripts, seleccione y mantenga presionado Control (Windows, Linux) o (macOS) y, a Command continuación, seleccione JS.

   

   Mostrar solo archivos CSS y JS

3. Para quitar los filtros y volver a mostrar todos los recursos, seleccione Todo.

Para otros flujos de trabajo de filtrado, vaya a Filtrar solicitudes.

Bloquear solicitudes

¿Cómo se ve y se comporta una página cuando algunos de los recursos de página no están disponibles? ¿Falla completamente o todavía es algo funcional? Bloquear solicitudes para averiguar:

1. Seleccione Control + Shift + P (Windows, Linux) o Command + Shift + P (macOS) para abrir el menú de comandos.

   

   Menú comando

2. Escriba block , seleccione Mostrar bloqueo de solicitudesy seleccione Enter .

   

   Mostrar bloqueo de solicitudes

3. Seleccione Agregar patrón ( Agregar patrón ).

4. Escriba main.css.

   

   Bloqueo main.css

5. Seleccione Agregar.

6. Actualiza la página. Como se esperaba, el estilo de la página está ligeramente desordenado porque la hoja de estilos principal se ha bloqueado.

   Nota

   Fila main.css del registro de red. El texto rojo significa que el recurso se bloqueó.

   

   main.css se ha bloqueado

7. Anule la selección de la casilla Habilitar bloqueo de solicitudes.

Conclusión

Enhorabuena, ha completado el tutorial. Ahora ya sabe cómo usar la herramienta Red en el Microsoft Edge DevTools.

Vaya a la Referencia de red para descubrir más características de DevTools relacionadas con la inspección de la actividad de red.

Este trabajo se publica bajo una licencia de Atribución 4.0 Internacional de Creative Commons.