CursosEmpresasBlogLiveConfPrecios

Cómo usar Network para depurar peticiones HTTP

Clase 17 de 22 • Curso de Debugging con Chrome DevTools

Clase anteriorSiguiente clase

Contenido del curso

Introducción

  • 1
    Debugging con Dev Tools: curso intermedio

    Debugging con Dev Tools: curso intermedio

    04:58 min
  • 2
    Qué son las Chrome Dev Tools y cómo abrirlas

    Qué son las Chrome Dev Tools y cómo abrirlas

    03:50 min

Elementos y Estilos

  • 3
    Manipular HTML con DevTools Elements

    Manipular HTML con DevTools Elements

    06:15 min
  • 4
    Chrome DevTools: editar CSS en tiempo real

    Chrome DevTools: editar CSS en tiempo real

    07:27 min
  • 5
    Selector de colores DevTools en Chrome

    Selector de colores DevTools en Chrome

    05:45 min
  • 6
    Generar sombras CSS con Chrome DevTools

    Generar sombras CSS con Chrome DevTools

    04:36 min
  • 7
    Animaciones CSS con Dev Tools: timing y velocidad

    Animaciones CSS con Dev Tools: timing y velocidad

    06:36 min
  • 8
    Midiendo código no utilizado con DevTools Coverage

    Midiendo código no utilizado con DevTools Coverage

    06:05 min
  • 9
    JavaScript con DOM en Dev Tools

    JavaScript con DOM en Dev Tools

    04:09 min
  • 10
    Cómo guardar cambios de DevTools en archivos locales

    Cómo guardar cambios de DevTools en archivos locales

    08:23 min

Mobile Simulation

  • 11
    DevTools para proyectos responsive

    DevTools para proyectos responsive

    15:07 min
  • 12
    DevTools simula red lenta y CPU débil para probar

    DevTools simula red lenta y CPU débil para probar

    08:53 min

JavaScript

  • 13
    Cómo debuguear JavaScript con DevTools

    Cómo debuguear JavaScript con DevTools

    08:56 min
  • 14
    Debuggear concatenación con DevTools

    Debuggear concatenación con DevTools

    07:11 min

Network

  • 15

    Proyecto de Clase Disponible en Platzi

    00:06 min
  • 16
    Network en DevTools: qué se descarga y pesa

    Network en DevTools: qué se descarga y pesa

    07:12 min
  • 17
    Cómo usar Network para depurar peticiones HTTP

    Cómo usar Network para depurar peticiones HTTP

    Viendo ahora

Performance

  • 18
    Optimización de animaciones con Performance DevTools

    Optimización de animaciones con Performance DevTools

    12:54 min

Audits

  • 19
    Auditorías móviles con Dev Tools

    Auditorías móviles con Dev Tools

    08:45 min
  • 20
    DevTools: auditoría desktop vs mobile

    DevTools: auditoría desktop vs mobile

    05:33 min

Cierre

  • 21
    Examen y siguientes cursos tras Dev Tools

    Examen y siguientes cursos tras Dev Tools

    02:23 min
  • 22
    Qué es una Progressive Web App

    Qué es una Progressive Web App

    05:02 min
Tomar examen
    Emerson Cedeño

    Emerson Cedeño

    student•
    hace 6 años

    del Curso de Expresiones Regulares me quedó el que se catalogaran estas como la navaja suiza de todo programador, y sin lugar a dudas, dominar el manejo de las DevTools la considero como la navaja suiza de todo desarrollador web … vaya herramienta!!

      Reinaldo Mendoza

      Reinaldo Mendoza

      student•
      hace 5 años

      Si, he visto que cuando las entiendes bien, ayudan muchisimo

      Juan Christopher

      Juan Christopher

      student•
      hace 5 años

      Gracias, por la recomendacion del curso.

    Christian David Sánchez

    Christian David Sánchez

    student•
    hace 6 años

    Los códigos de estado de HTTP: https://cutt.ly/UtDAbem

      Luis Fernando Pedroza Taborda

      Luis Fernando Pedroza Taborda

      student•
      hace 6 años

      Genial aporte Christian, gracias.

      Christian David Sánchez

      Christian David Sánchez

      student•
      hace 6 años

      Me alegro te haya sido útil :D

    Jhoana España Urresty

    Jhoana España Urresty

    student•
    hace 4 años
    1.png
    2.png
    Jorge Méndez Ortega

    Jorge Méndez Ortega

    student•
    hace 6 años

    por fin entiendo todo el poder de esto

      Reinaldo Mendoza

      Reinaldo Mendoza

      student•
      hace 5 años

      Si, aporta un gran valor al desarrollo

      Juan Christopher

      Juan Christopher

      student•
      hace 5 años

      Me alegra escuchar eso.

    Oscar Lara

    Oscar Lara

    student•
    hace 5 años

    Me encanta esta clase jajjaja! El creador de la web me parece un crack!

      Juan Christopher

      Juan Christopher

      student•
      hace 5 años

      JAJA toda la razon.

    Efraín Hernández García

    Efraín Hernández García

    student•
    hace 6 años

    Aprendí mucho viendo memes de gatitios! 😁

      Reinaldo Mendoza

      Reinaldo Mendoza

      student•
      hace 5 años

      De bastante ayuda

      Juan Christopher

      Juan Christopher

      student•
      hace 5 años

      Shi son muy molones xD

    FELIX EVR

    FELIX EVR

    student•
    hace 5 años

    17. Revisando detalles con Network

    2:33 Mostrando más propiedades: Domain. Para mostrar el dominio de donde proviene el archivo.

    5:03 Simulando conexiones de red: Online (Normal) Fast 3G Slow 3G Offline Custom

    6:40 Filtrando o bloqueando archivos para que no se descarguen en el navegador. Ctrl+Shift+P > Show Request blocking > + > Archivo.ext

    Enlaces de la clase: HTTP Cats Enlaces complementarios: Los códigos de estado de HTTP Códigos de estado de respuesta HTTP | MDN

    Carlos Eduardo Gomez García

    Carlos Eduardo Gomez García

    teacher•
    hace 5 años

    Existe un shortcut para recargar la página recargando caché: . En Windows: ctrl + f5 . En macOS: cmd + shift + R

    Luis Fernando Pedroza Taborda

    Luis Fernando Pedroza Taborda

    student•
    hace 6 años

    Ahora entiendo mas profundamente la funcionalidad de Network y lo poderoso que puede llegar a ser esta herramienta

      Reinaldo Mendoza

      Reinaldo Mendoza

      student•
      hace 5 años

      Es una herramienta tremenda

      Juan Christopher

      Juan Christopher

      student•
      hace 5 años

      Es una herramienta muy poderosa.

    Carlos Rodríguez

    Carlos Rodríguez

    student•
    hace 4 años

    Esto de vaciar el caché es lo máximo, cuando pruebas proyectos grandes con un framework o librería donde a veces no se cargan bien los css o js cuando editas y usas un servidor en apache por ejemplo, entonces vaciando el caché todo se soluciona!

    Ana Rotela Cabrera

    Ana Rotela Cabrera

    student•
    hace 2 años

    Resumen de la clase

    Juan David Niño Rodriguez

    Juan David Niño Rodriguez

    student•
    hace 5 años

    cuanto es un tiempo optimo de carga final de una página web?

      Erik Elyager

      Erik Elyager

      student•
      hace 5 años

      Una página súper optimizada no debería tardar más de 3 segundos en cargar. Mira está referencia:

      Screen Shot 2020-10-22 at 20.53.41.png
      Jose Barboza

      Jose Barboza

      student•
      hace 5 años

      amazing

    Diana Gonzalez Yescas

    Diana Gonzalez Yescas

    student•
    hace 5 años

    ¿Con que teclas sacan el buscador?

      Giovanni Aranda

      Giovanni Aranda

      student•
      hace 5 años

      En Mac con CMD + P

      Giovanni Aranda

      Giovanni Aranda

      student•
      hace 5 años

      Para complementar mi comentario puedes ver los shortcuts que tiene el DevTools de Chrome y es dando click en la parte superior derecha en Configuración > Shortcuts

    Joel Dominguez Merino

    Joel Dominguez Merino

    student•
    hace 5 años

    Ahora entiendo las clases donde hablaban de no linkear tantos archivos, hacer tantas peticiones en el html a estilos por ejemplo o a servicios externos.

    PD: Muchas gracias por la pagina de los diferentes códigos de errores con fotos de Gatitos :D

    Hector Fabian Rodriguez Acosta

    Hector Fabian Rodriguez Acosta

    student•
    hace 6 años

    por fin puedo usar un meme de gatos para explicar un error jajajaj Gracias

    Jose Orlando Parra Soto

    Jose Orlando Parra Soto

    student•
    hace 5 años

    🤣de verdad está muy buena la pagina de los gatos

      Victor Andres Castillo Zambrano

      Victor Andres Castillo Zambrano

      student•
      hace 5 años

      jejeje a mi me causo mucha risa

    Leonardo de los angeles Espinoza Hernandez

    Leonardo de los angeles Espinoza Hernandez

    student•
    hace 6 años

    ¿Entonces así podremos replicar errores?

      Efraín Hernández García

      Efraín Hernández García

      student•
      hace 6 años

      Si, y es muy demasiado útil simular así los errores

      Jesus Federico David Herrera

      Jesus Federico David Herrera

      student•
      hace 5 años

      Es util para saber tambien si tiene muchas dependencias y carga lento.

    DAVID EDUARDO BAEZ SANCHEZ

    DAVID EDUARDO BAEZ SANCHEZ

    student•
    hace 4 años

    A seguir aprendiendo.

    Johan Sebastian

    Johan Sebastian

    student•
    hace 5 meses

    !Processing

    Edgar Oswaldo Vargas Jara

    Edgar Oswaldo Vargas Jara

    student•
    hace 5 años

    Hay forma de detectar qué tipo de conexion tiene el usuario? por ejemplo los servicios de streaming que dependiendo la conexion reproducen el video en alta o baja calidad. Asi mismo podria yo hacer con una pagina web??

      Joel alexander

      Joel alexander

      student•
      hace 5 años

      Netflix por ejemplo utiliza una librerias ReactiveX, para cambiar la velocidad de conexion,

      Edgar Oswaldo Vargas Jara

      Edgar Oswaldo Vargas Jara

      student•
      hace 5 años

      interesante, gracias

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads