¿Cuándo utilizar Network en DevTools?

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:

• Códigos de estado de respuesta HTTP | MDN.
• Inspect Network Activity In Chrome DevTools.

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!

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

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.

A la fecha de hoy se cargan mas archivos que los que se muestra en el curso, uno de ellos esta roto 96.png

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

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

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.

Ajunto link(: https://devtools.glitch.me/network/getstarted.html

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

Actualmente, la mayor parte de los archivos dan estado: 304 y uno que es el png en 404.

Es interesante aprender de la cantidad de componentes que tiene la pagina web en network. Tambien es increible que te muestra el resultado de como llega la pagina web ya sea en buenos o malos terminos.

La url del demo da error

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

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

Link de la clase: https://devtools.glitch.me/network/getstarted.html

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¿?

💚

👌