Conoce los principales aspectos de Chrome DevTools
Chorme DevTools es una excelente herramienta para los desarrolladores o profesionales del área digital que desean iterar y depurar un sitio web integrado en Google Chrome.
El Chrome DevTools (Inspector de elementos por sus siglas en inglés) es una herramienta de desarrollo integrada en el buscador de Chrome para diagnosticar posibles problemas o errores. También permite testear las modificaciones mínimas para ser visualizadas en pantalla en tiempo real.
Para ingresar al inspector de código debemos hacer click con el botón secundario del mouse y seleccionar Inspeccionar. Así se puede acceder a los diferentes paneles, según el tipo de visualización escogido por el desarrollador o profesional dentro del área digital.
Si deseas iterar y depurar un sitio web es importante conocer los principales paneles, que te permitirán detectar los problemas más comunes en contenido mixto, inspeccionar recursos, rastrear pérdidas de memoria y mejorar el rendimiento.
Elementos de visualización de mayor uso
Los elementos de visualización más comunes y visibles en el inspector de Chrome son los relacionados al alineado o la visualización en ventanas emergentes.
Sin embargo, los más utilizados dentro de la comunidad de desarrolladores, son:
Cambio de estilos:
Los estilos permiten que el desarrollador visualice cambios realizados de manera local.
Además, puede aumentar los márgenes, disminuir el tamaño de la fuente y verificar cómo se verán los elementos con colores. A esto se suma la capacidad de editar la estructura HTML de una página, añadir y modificar textos, clases, IDs, e incluso borrar líneas de código. Dentro de la edición de estilos se pueden asignar estados a las clases o elementos seleccionados y revisar todos los estilos aplicados o heredados de un elemento.
También tiene la posibilidad de modificar el alto y el ancho de elementos, y añadir o modificar un padding, margen e incluso bordes del elemento.
Debug de Javascript:
La primera gran incógnita que como desarrolladores enfrentamos es descubrir un error. Esto, muchas veces, es similar a encontrar una aguja en un pajar, sobretodo cuando no sabemos donde buscar.
Sin embargo, Javascript nos permite debuguear o realizar seguimientos a piezas de código o una línea de código en particular con la ayuda de la función console.log(). Estos resultados se pueden ver en la pestaña Console (Consola) de Chrome, donde se nos informa desde que archivo y línea se está ejecutando dicho debug, archivo el cual puede ser visualizado haciendo click sobre este.
Fuentes (Sources):
Permite asignar puntos de interrupción desde la sección Event Listener Breakpoints. Pudiendo marcar eventos, los cuales se encuentran categorizados de acuerdo al tipo de acción a ejecutar.
Cómo ejecutar Javascript en la consola integrada
Con la posibilidad de Debuguear Javascript, también se puede revisar el historial de mensajes dentro de la consola (Console) de Chrome. Además podemos obtener información del mismo buscador.
Errores como TypeError, debido a un error de tipeo o a que el selector de javascript no existe en el DOM, o 404 (not found), puede indicar que el petitorio de un recurso no existe.
Además de recibir información de nuestro sitio, usar la consola nos permite consultar mientras ejecutamos código dentro de la propia consola. Así mismo, permite seleccionar en qué pieza de código o elemento dentro del browser queremos ejecutar para realizar nuestra consulta.
En ese sentido, nos permite ejecutar javascript arbitrario, es decir, ejecutar consultas independientes del sitio o página que se esté visualizando en el buscador. Así podemos sestear diferentes funciones para ser ejecutadas en tiempo real.
Testear la visualización de un sitio en diferentes tamaños de dispositivo
Finalmente, destacamos la capacidad de emular diferentes dispositivos dentro del inspector de elementos. Logrando testear un sitio web desde:
- Pantalla común de computador
- Pantalla pequeña (1024×768)
- iPad o tablet (entre 1024px y 768px de ancho)
- Celulares y palms (entre 768px y 320px de ancho)
A esto se añade la posibilidad de emular la disposición del dispositivo (vertical u horizontal). Incluso introducir un tamaño definido por el usuario, sumando la opción de realizar un zoom de dicho dispositivo.
En conclusión, la interfaz del inspector de Chrome es de mucha ayuda para el desarrollador. Esto les permite aumentar la productividad y el comportamiento de una etapa de testeo de cada unos de sus proyectos.
Acerca del Autor
Agregar un comentario