Las Devtools, tu mejor amigo para solucionar Bugs

Las DevTools o herramientas de desarrollo del navegador son tu forma de ver, en vivo, el HTML y CSS que compone cualquier página web. Este recurso es para quien está empezando en programación y quiere dejar de sentir la web como un lugar donde pasan cosas que no entiende. La idea central: cualquier sitio que uses por debajo es exactamente lo mismo que tú ya sabes hacer.

Cuando inspeccionas la página de Blue Bottle o el sitio de Okini, ves etiquetas, colores y anidaciones idénticas al código que has estado escribiendo en clases anteriores. Ahí está el clic mental: la web deja de ser un misterio y se vuelve un lugar donde pasan cosas que sí entiendes.

¿Cómo abrir las DevTools y qué muestra la pestaña Elements?

Abres las herramientas con clic derecho en cualquier parte de la página y luego Inspeccionar [00:07]. La pestaña activa por defecto es Elements, y eso es el árbol del DOM en vivo [01:31].

Es lo mismo que viste en la clase del DOM, pero desde el otro lado: no como algo que JavaScript manipula, sino como algo que tú inspeccionas directamente. Aquí tienes tres formas de conectar código con visual:

• Pasa el cursor sobre una etiqueta y el elemento se ilumina en la página, como una visión de rayos X [02:05].
• Usa el botón al lado de la pestaña Elements para ir a la inversa: pasas el cursor por la visual y llegas al código correspondiente [02:34].
• Da doble clic a un texto para editarlo en vivo, por ejemplo cambiar un titular por "El mejor café del mundo" [03:02].

Ese recorrido te entrena el ojo para leer cualquier página como si fuera tuya.

¿Los cambios que hago en las DevTools se guardan? No. Los cambios viven solo en tu navegador durante esa sesión. Si recargas la página, todo vuelve a lo original y tu archivo HTML en VS Code sigue intacto.

¿Por qué las DevTools son tu zona de pruebas?

Como lo que editas no toca tu código real, puedes experimentar sin miedo. Ese es su mayor valor cuando estás aprendiendo.

Aquí puedes cambiar un color, mover un margen o achicar la tipografía usando todo lo que ya sabes de HTML y CSS, y ver si te gusta antes de comprometerte a escribirlo de verdad [03:41]. Es prueba y error sin consecuencias.

Hay una pestaña que no vas a tocar a fondo todavía pero que conviene conocer: Network [04:12]. Muestra todas las peticiones que la página hace al servidor y tendrá sentido en el siguiente módulo, cuando entiendas qué es cliente y servidor. Por ahora, déjala ahí.

¿Para qué sirve la pestaña Network en las DevTools? Muestra todas las peticiones que la página hace al servidor. Cobra sentido cuando aprendes la diferencia entre cliente y servidor, así que por ahora solo debes saber que existe.

¿Cómo usar las DevTools antes de recurrir a la inteligencia artificial?

Aquí viene lo interesante y lo que de verdad separa a quien aprende rápido de quien se frustra. Cuando un botón está mal alineado o un texto se sale de su caja, el reflejo correcto es abrir DevTools antes de abrir una herramienta de inteligencia artificial [04:37].

En 30 segundos puedes ver qué pasa: el padding está en cero, el botón no tiene la clase que creías, hay un margen que no esperabas. Con esa información, tu pregunta a la IA cambia por completo.

Compara estas dos formas de pedir ayuda:

• Vago: "Mi botón no funciona, ayuda".
• Preciso: "El botón de reservas tiene padding en cero, aunque le asigné padding 16. Creo que hay otra regla CSS sobrescribiéndolo" [05:21].

Esa es la diferencia entre una respuesta útil y 20 minutos de ida y vuelta. Las DevTools te dan el vocabulario para preguntar y te ayudan a reducir la ambigüedad al máximo.

¿Por qué revisar las DevTools mejora mis respuestas de la IA? Porque te dan datos concretos sobre el problema. Sin ese paso, le pides a la inteligencia artificial que adivine; con él, describes el error exacto y obtienes una solución directa.

¿Qué ejercicio puedes hacer para practicar la inspección?

Abre tú la página de Blue Bottle, cuyo link está en los recursos, y dedícale dos minutos a inspeccionarla [05:57].

Encuentra una etiqueta o un atributo que no hayamos visto y déjalo en los comentarios. Revisa también lo que otros hayan comentado: si sabes cómo funciona esa etiqueta, responde y ayuda a otro programador o programadora en potencia.

Hoy aprendiste a diagnosticar, a ver qué pasa en una página sea tuya o ajena. En la siguiente clase vas a aprender a corregir: meteremos un bug intencional en el código de Okini y lo perseguiremos hasta atraparlo [06:54]. ¿Qué etiqueta nueva encontraste al inspeccionar? Cuéntanos en los comentarios.