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

Contenido del curso

Introducción

Elementos y Estilos

Mobile Simulation

JavaScript

Network

Performance

18
Optimización de animaciones con Performance DevTools
12:54 min

Audits

Cierre

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:50

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

Curso de Debugging con Chrome DevTools

Clase 2 de 22

Clase 2 / 22

Recursos

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.