Conocer las herramientas para desarrolladores que trae Google Chrome es uno de los primeros pasos para cualquier persona que quiera construir sitios web. Desde inspeccionar elementos hasta medir el rendimiento de una página con Lighthouse, estas utilidades serán compañeras constantes en tu día a día como desarrolladora o desarrollador web.
¿Por qué Google Chrome es el navegador recomendado para desarrollo?
Existen muchos navegadores disponibles: Brave, Edge, Safari, Firefox, Opera, entre otros [0:10]. Sin embargo, para desarrollo web Google Chrome se ha convertido en un estándar de la industria. Varios navegadores, como Edge de Microsoft, utilizan el mismo motor interno que Chrome [0:44]. Ese motor es de código abierto y Google permite que otros lo integren en sus propios proyectos, lo que refuerza su posición dominante.
Esto no significa que debas abandonar tu navegador favorito para el uso cotidiano, pero sí que las Dev Tools de Chrome ofrecen la experiencia más completa y documentada para quienes están aprendiendo.
¿Qué son las extensiones y cómo instalarlas desde la Chrome Web Store?
Una parte importante de Chrome son las extensiones [2:08]. Desde la Chrome Web Store puedes instalar herramientas que amplían las capacidades del navegador.
- ColorPick Eyedropper: permite seleccionar cualquier color visible en una página y conocer su código exacto [2:22].
- Adblock: bloqueador de publicidad, su uso queda a criterio personal [2:38].
- JavaScript toggle: enciende y apaga el JavaScript de una página para probar comportamientos [3:04].
Para acceder a herramientas especializadas, busca developer tools o dev tools directamente en la tienda [3:25]. Un truco útil: haz clic en el ícono de extensiones y selecciona fijar para que la extensión quede siempre visible en la barra superior [4:42].
¿Qué es Lighthouse y cómo mide la calidad de un sitio?
Google Lighthouse es una extensión que analiza automáticamente la calidad de cualquier página web [3:38]. Al generar un reporte obtienes calificaciones en varias categorías:
- Rendimiento: mide tiempos de carga como el First Contentful Paint y el Speed Index [5:16].
- Accesibilidad: evalúa qué tan usable es el sitio para personas con diferentes capacidades [5:36].
- Mejores prácticas: revisa si el sitio sigue las recomendaciones actuales de desarrollo.
- SEO (Search Engine Optimization): indica qué tan bien posicionado puede estar el sitio en motores de búsqueda como Google [6:04]. Mientras más alto sea este puntaje, mayor probabilidad de aparecer en los resultados.
Lighthouse carga una vista mobile por defecto, ya que la web actual prioriza el enfoque mobile first [5:08]. El reporte también incluye puntos de mejora concretos que puedes implementar.
¿Cómo abrir y usar las herramientas para desarrolladores?
Para abrir las Dev Tools ve a los tres puntos de Chrome, selecciona Más herramientas y luego Herramientas para desarrolladores [6:50]. El atajo de teclado es Ctrl + Mayús + I, memorízalo porque lo usarás constantemente.
¿Qué puedes encontrar en el inspector de elementos?
Cuando un profesor menciona "abrir el inspector de elementos", se refiere exactamente a esta herramienta [7:45]. Dentro encontrarás varias pestañas fundamentales:
- Elementos: muestra la estructura HTML de la página, incluyendo el head (encabezado) y el body (cuerpo) donde se carga todo el contenido visible [7:10]. Puedes inspeccionar cada sección y ver márgenes, estilos y propiedades.
- Consola: permite escribir y ejecutar líneas de código JavaScript directamente [8:02]. Es una herramienta que usarás intensivamente en cursos de JavaScript.
- Fuentes: indica de dónde proviene la información que carga el sitio [8:12].
- Red: muestra las conexiones y peticiones que realiza la página [8:18]. Resulta especialmente útil cuando algo no carga o se queda trabado.
Incluso puedes hacer modificaciones temporales desde el inspector para experimentar con el diseño, aunque los cambios no se guardan en el sitio real [7:53].
Estas Dev Tools serán tu herramienta principal para encontrar errores mientras desarrollas tus páginas web. Comparte en los comentarios una captura de Lighthouse aplicada a tu sitio favorito: recuerda que con Windows + Shift + S puedes tomar capturas rápidamente [6:28].
