Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

¿Cuándo utilizar Network en DevTools?

16/22
Recursos

Aportes 27

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

El panel Network es utilizado para asegurarse de que los recursos se descarguen o carguen como se esperaba.

Los casos de uso más comunes para el panel Network son:

  • Asegurarse de que los recursos se estén cargando o descargando.
  • Inspeccionar las propiedades de un recurso individual, como sus encabezados HTTP, contenido, tamaño, etc.

    By: https://cutt.ly/1tDPeQc

Secciones de Network:

  1. Name: Nombre del archivo
  2. Status: Estatus del http. En este caso 200 significa OK (Todo bien)
  3. Type: Tipo de archivo. Por ejemplo: document (html), stylesheet(css), js, png, etc…
  4. Inialitator: Cuál archivo solicitó a otro archivo. En este caso, el documento html solicitó a todos los demás archivos.
  5. Size: Tamaño del archivo. Se muestra el tamaño no optimizado y optimizado por el navegador.
  6. Time: Tiempo total que tarda en descargarse el archivo.
  7. Waterfall: Tiempo (sección por sección) que le tomó al archivo descargarse.

El panel de network, nos permite evaluar si los archivos fueron descargados o no una vez que se carga una página web, estos pueden ser: HTML, imágenes, CSS, JS, entre otros. Cada uno demora cierto tiempo dependiendo de su peso y la velocidad de conexion de internet.

Secciones de Network:

  • Name: Nombre del archivo.
  • Status: Estatus del http. En este caso 200 significa OK (Todo bien).
  • Type: Tipo de archivo. Por ejemplo: document (html), stylesheet(css), js, png, etc…
  • Inialitator: Cuál archivo solicitó a otro archivo. En este caso, el documento html solicitó a todos los demás archivos.
  • Size: Tamaño del archivo. Se muestra el tamaño no optimizado y optimizado por el navegador.
  • Time: Tiempo total que tarda en descargarse el archivo.
  • Waterfall: Tiempo (sección por sección) que le tomó al archivo descargarse.

NOTA: Los códigos de estado de respuesta HTTP indican si se ha completado satisfactoriamente una solicitud HTTP específica. Las respuestas se agrupan en cinco clases:

  • Respuestas informativas (100–199),
  • Respuestas satisfactorias (200–299),
  • Redirecciones (300–399),
  • Errores de los clientes (400–499),
  • y errores de los servidores (500–599).

Referencias:

De verdad que me sorprende todo lo que tiene las Dev Tools y aunque estoy empezando en el desarrollo web… Me estoy llevando demasiado conocimiento que aplicare para tener mejores practicas y simplemente me encanta aprender algo nuevo en cada clase.
Excelente curso, muchas gracias!

Creo que la pagina esta caida o cambio su url 😦

Muy util esta funcionalidad de DevTools, es necesario saber que recursos tienen nuestra pagina y cuales esta afectando la velocidad de carga de la página.

En lo personal pienso que es apartado de network es uno de los más importantes, sobretodo porque, además del waterfall, te permite ir viendo cuáles son esas tareas asíncronas que las páginas igual suelen lanzar así que puedes ir viendo algunas cargas de assets en paralelo:D

De forma general, el panel Network se usa cuando requieres asegurarte que los recursos de tu proyecto se descargan o cargan adecuadamente. Para abrirlo, desde DevTools presiona Control + Shift + I o Comando + Opción + I (Mac).

A seguir aprendiendo.

Si publicas el link de enlace de la clase te lo borra pues lo considera un link no seguro.

Excelente explicación de Network!

Yo solo he usado esta opción para comprobar el lazy loading o saber si en realidad estoy haciendo un fetch a una API.

http://devtools.glitch.me/network/getstarted.html

A seguir!

http : / / devtools. glitch. me/ network/ getstarted. html
Enlace con espacios para que puedan entrar a é.

No entiendo porque a mí me aparece un solo request con el JSON nada más y con un peso de 276B

excelente clase!

gracias.

No sabía cómo utilizarla cuando comencé el curso profesional de javascript. Es un interesante curso.

Para la parte de status, les dejo la documentacion de los status http
https://developer.mozilla.org/es/docs/Web/HTTP/Status

Aquí algunos códigos de status muy resumidos:

Respuestas informativas (100–199),
Respuestas satisfactorias (200–299),
Redirecciones (300–399),
Errores de los clientes (400–499),
y errores de los servidores (500–599).

Si quieres saber mas visita: https://developer.mozilla.org/es/docs/Web/HTTP/Status

afecta si hago esto en Opera mini, en vez de hacerlo en Chrome¿?

💚

<h3>16. ¿Cuándo utilizar Network en DevTools?</h3>

1:36 Iniciando Network. Para que funcione debemos refrescar la página ya que solo captura la data cuando el network está abierto.

2:34 Descripción:
Name: nombre de los archivos
Status: respuesta del servidor
Type: tipo de archivo
Initiator: archivo que generó se petición y descarga
Size: tamño del archivo (minificado y sin minificar)
Time: tiempo de descarga
Waterfall: cascada de tiempo en forma de gráfico de barras.

Enlaces de la clase:
Inspect Network Activity Demo
Enlaces complementarios:
Tutorial ¿Qué es Minificar archivos?
Inspect Network Activity In Chrome DevTools

<h3>- Les dejo este tutorial que resume todo el contenido del curso con marcadores para acceder rapidamente a los puntos claves que deseamos recordar.</h3>

Cuéntame si parece útil este formato de resumen, y dale 💚 si quieres más de estos para la comunidad 😁🙌

👌