DevTools es una poderosa herramienta para depurar y analizar lo que sucede en la página. Desarrollar eficientemente el frontend sin ella es imposible.
Los navegadores modernos ya vienen equipados con estas herramientas. Solo necesitas encontrarlas en el menú y activarlas. Vale la pena dedicar tiempo a explorar las capacidades de DevTools.
Podemos utilizar DevTools para muchas cosas, pero este curso no es suficiente para cubrirlo todo. En Internet hay muchos artículos sobre las formas más poderosas de utilizar DevTools y sus características ocultas. Por lo tanto, aquí solo cubriremos los conceptos básicos.
Análisis de errores
Todos los errores que ocurren en JavaScript del navegador se muestran en la consola. Puedes revisarlos y abrir el código fuente para ver dónde ocurrió el error.
Elemento seleccionado
Al seleccionar un elemento de esta manera, puedes ir a la pestaña console y escribir $0. Esto te dará acceso a ese elemento.
Búsqueda
Con la función $(), puedes simplificar la búsqueda de elementos por selector. Compara:
document.querySelector('.row');
// Técnicamente similar a trabajar con JQuery, pero no es eso
$('.row');
console.dir
La función console.dir muestra los nodos del DOM en un formato que es fácil de analizar.
Materiales adicionales
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
