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

Entiende con claridad qué son las herramientas de desarrollo y cómo aprovechar las pestañas y elementos de Chrome Dev Tools para iterar más rápido con HTML, CSS y JavaScript. Aquí verás qué puedes encontrar, cómo abrirlas sin miedo y de qué forma empezar a manipular estilos y depurar como una persona desarrolladora profesional.

¿Qué son las Chrome Dev Tools y por qué importan?

Las Dev Tools son herramientas de desarrollo integradas en los navegadores. Existen en Chrome, Safari, Firefox y Edge. Cada una ofrece funciones similares, pero con diferencias. Para este curso se trabaja con las Dev Tools de Chrome. Si ya las usas a diario, puedes avanzar a la siguiente sesión donde se profundiza en cada pestaña.

¿Qué navegadores incluyen herramientas de desarrollo?

• Chrome, Safari, Firefox y Edge incluyen Dev Tools.
• No todas traen lo mismo. Algunas funciones son específicas por navegador.
• En este contenido el foco es Chrome Dev Tools.

¿Cómo abrirlas en Chrome y qué verás primero?

Para abrirlas en Chrome: haz clic derecho en cualquier página y elige “inspeccionar”. Si nunca entraste, puede parecer mucha información, pero es normal: estás dentro de Chrome Dev Tools.

¿Qué muestra la vista inicial de elementos y consola?

• Panel de elementos: el código del proyecto en HTML. Incluso si estás en incógnito, verás el HTML de esa pantalla.
• Consola abajo: la consola para trabajar con JavaScript y ver salidas de console log, errores y mensajes.
• Panel de estilos: los estilos activos del proyecto en styles.

¿Cómo editar elementos y estilos al vuelo?

• Selecciona un elemento y ajusta sus propiedades en estilos.
• Ejemplo: cambiar de “1 rem” a “10 rem” y ver el cambio al instante.
• Si recargas, los cambios se pierden. Solo afectan al estado actual del navegador.
• Estos cambios no se guardan en tu código local ni se van a producción. Funcionan para probar en tiempo real tras cargar la página.

¿Qué pestañas clave te ayudarán a debuggear más rápido?

Más allá de elementos y consola, existen pestañas para acelerar el desarrollo y diagnóstico. Se usarán en distintos proyectos para debuggear y trabajar mejor.

¿Para qué sirven Source, Network, Performance y aplicaciones?

• Source: muestra los archivos que se descargan al navegador cuando el proyecto carga.
• Network: ayuda a revisar recursos y solicitudes durante la carga.
• Performance: útil para medir el rendimiento del sitio.
• Aplicaciones: herramientas para tareas muy específicas relacionadas con el proyecto.

¿Cómo convertirlas en un editor para avanzar más ágil?

• Se pueden cargar archivos HTML y CSS y usar Chrome Dev Tools como editor de texto.
• Los cambios hechos aquí se reflejan en el archivo real y viceversa, para un flujo de trabajo más ágil.
• Próximamente se profundiza en la sección de elementos y estilos para exprimir su potencial en desarrollo.

Habilidades, conceptos y keywords que practicarás: - Abrir e identificar Dev Tools en Chrome. - Leer y manipular elementos y estilos con HTML, CSS e IDs. - Usar la consola para mensajes de JavaScript con console log. - Entender la naturaleza temporal de los cambios en el navegador. - Explorar pestañas como Source, Network y Performance para debuggear. - Activar un flujo ágil usando Chrome Dev Tools como editor de texto.

¿Te gustaría que la siguiente sesión cubra primero elementos o estilos? Cuéntalo en los comentarios y comparte cómo abres y usas tus Dev Tools en el día a día.