ALUMNO

DevTools

El inspector del navegador

Reconoce

Pregunta 1 de 5

Situación: Tu botón se ve más pequeño de lo que esperabas.
Quieres ver qué clases de Tailwind le están aplicando
padding y margen.

¿Qué pestaña de DevTools abres?

Este reto es distinto

Para completar las misiones de este laboratorio tienes que abrir las DevTools reales de tu navegador. Pulsa F12 en Windows/Linux o Cmd+Option+I en Mac. Si es la primera vez que las abres, es normal que te intimide un poco. Aguanta. En cinco minutos lo vas a encontrar natural.

1
Diagnostica el error del botón
Pulsa el botón de abajo. Se rompe algo a propósito. Abre la consola de DevTools, lee el error y escríbelo aquí.
Pendiente
Escenario

Tienes una app que debería saludar al usuario al pulsar el botón. Pero al pulsarlo, la app se rompe. Vamos a averiguar por qué como lo harías en tu propio proyecto.

2
Averigua el color exacto
En el recuadro de abajo hay un elemento con un color de fondo concreto. Usa el Inspector de DevTools para averiguar cuál es y escríbelo aquí.
Pendiente
Escenario

Uno de los retos más comunes cuando trabajas con Lovable es averiguar qué color tiene exactamente un elemento para pedir un cambio preciso. Vamos a practicarlo.

·
3
Encuentra la petición fallida
Pulsa el botón de cargar datos. Algo va a fallar. Abre la pestaña Network de DevTools y escribe el código de estado de la petición que falla.
Pendiente
Escenario

Tu app intenta cargar una lista de clientes de un servidor, pero no aparece nada en pantalla. No hay error en la consola, la pantalla simplemente está vacía. ¿Dónde miras?

Aquí aparecerá la lista al cargar

·
Recursos
Documentación y material de apoyo para este reto
Documentación oficial
Chrome DevTools Docs
Cheatsheet visual
Trucos de DevTools
Vídeo de la sesión
Sesión 3.6 del módulo
Estado del reto