Siendo un desarrollador web uno debe conocer algunas técnicas de debug para optimizar los tiempos de desarrollo.
Para ser honestos, he estado utilizando console.log() junto con el inspector de Chrome para depurar mi código Javascript casi toda mi vida profesional, con PHP creaba echos y printf a diestro y siniestro, claro está, hasta que comencé a trabajar en Laravel y entonces se convirtió en DD.
Pero la depuración o debugging, como a los profesionales nos gusta llamarle, no se limita a estos dos métodos. Es cierto que te sacan de bastantes apuros, pero hay que seguir mejorando técnica y estilo para convertirse en un programador de primera, y es por eso que hoy te ayudaré a crear una especie de tarea que deberás repetir con cada F5 que pulses para ver los cambios, tanto en backend como en frontend y crear un hábito que te ayudará a ser mejor profesional.
Una reflexión sobre el debug antes de comenzar
Para la redacción de este artículo intenté recopilar, además de las técnicas y herramientas que suelo usar yo en mi día a día, todos los recursos que pude dando una buena vuelta por las redes. Me dispuse a realizar este post con la intención de cambiar de hábitos y actualizar todo lo que tenía hasta ahora y lo cierto es que, no ha sido para nada una mala idea.
Dando una pequeña vuelta por mis páginas de referencia habituales, me he topado con algunos artículos estupendos sobre herramientas de debug que no he dudado en probar ipso facto y he de reconocer que, aunque la mayoría ya las conocía, no las había usado por el mero hecho de no pararme a trastear con ellas mientras desarrollo Ahora aproveché para hacerlo mientras redactaba este artículos, porque no es lo mismo estar trabajando en un proyecto, tu solo, con tiempos de ejecución, a menudo muy justos e intentar incorporar una nueva herramienta de este calibre a tu día a día.
El debug no es broma y tratar de entender Hay que hacerlo poco a poco, probando, deshechando y volviendo a probar. Este artículo me ha dado la oportunidad que estaba buscando y estos son los resultados. Comenzamos:
¿Qué es debug?
Para empezar a hacer debug de nuestras páginas web, lo primero que debemos saber es qué es el debug y cómo se hace. Lo primero que tenemos que entender, es que el «arte del debug» no solo se hace en el desarrollo web, ni mucho menos. Desde que existe la informática y los programas informáticos, el debug es una parte esencial en el desarrollo de dichos programas.
Nadie, nunca, en el mundo del desarrollo, fue capaz de llevar a cabo una programación directa sin intervención de una parte del debug en el ciclo del proyecto. Si te estás preguntando: ¿Pero no se puede hacer?, claro que se puede hacer, pero ningún cliente en su sano juicio te volverá a contratar en la vida. Es como ponerte a conducir un coche y le sacas el freno… puedes arrancarlo, conducirlo, girar en las curvas, pero no podrás pararlo en caso de necesitarlo. Para ser un poco más técnicos, puedes ver su definición en Wikipedia.
Entonces, diremos que el debugging es un proceso en el cual el encargado de este punto del desarrollo es capaz de identificar y resolver los errores en el código de programación que hacen que el programa/web no funcione o no funcione como en un principio debiera funcionar. Así, una vez identificados estos errores se subsanarán para poder finalizar o proseguir con la programación.
Generalmente, en un equipo de varias componentes, programadores y debuggers son diferentes personas, ya que existe algo que yo suelo identificar como «la ceguera del programador», y es que, la persona que programa una aplicación o una página web, no tendrá fácil identificar elementos erróneos porque él ya sabe cómo funciona la aplicación, cómo funcionan todos los elementos que la componen y siempre hará las tareas necesarias de la forma menos «usuario».
Alguien que, aunque pertenezca al grupo de programadores de una empresa, pero esté fuera del hámbito de programación de esa misma aplicación dará con los errores mucho antes que quién desarrolla, porque actuaría como alguien que se topa por primera vez con esa web o esa interfaz y actuaría como tal, no como alguien que ya sabe por dónde atajar… no sé si me explico.
Ahora bien, teniendo todo esto en cuenta, la realidad es un poco diferente para aquellos que nos dedicamos a este mundillo de forma individual y necesitamos sacarnos nosotros mismos las castañas del fuego.
La ceguera del programador es algo que tendremos que resolver de forma autómata, sin depender de nadie más que de nuestra pericia y por eso, lo ideal es hacer debug de un proyecto cada vez que hagamos un cambio en concreto dentro del código y probemos su funcionamiento. Para ello tenemos de nuestra mano varias herramientas que iré enumerando a continuación.
Mensajes en consola
Empecemos por mostrar los típicos mensajes en consola en una aplicación con JavaScript:
- log()
- error()
- warn()
- table()
- count()
- time() and timeEnd()
Hagamos la prueba con cada uno de ellos:
console.log('Esto es un console.log()');
console.error('Esto es un console.error()');
console.warn('Esto es un console.warn()');
console.table({"Tipo de parámetro":"Esto es console.table()","Nombre":"Martín", "Apellidos":"Domínguez"});
for(let i=0; i < 5; i++){
console.count(i);
}
console.time('abc');
let fun1= function(){
console.log('Fun1 está corriendo');
}
let fun2= function(){
console.log('Fun2 está corriendo...');
}
fun1();
fun2();
console.timeEnd('abc');Y este sería el resultado en la consola de Chrome:
Atajos de teclado para la consola
- Para borrar la consola ctrl L(Windows) o cmd K(Mac OS)
2. Mostrar consola ctrl `
3. Mientras inspeccionas un elemento, selecciona el elemento y pulsa f2 para Editar como HTML
Uso de literales para consultas de variables
Cuando se registran múltiples variables, hacer un seguimiento de las variables individuales puede resultar difícil. O bien tenemos que escribirlas con diferentes console.log() o darles cadenas específicas, por ejemplo:
https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff%2F788447%3Fas_embed%3Dtrue&dntp=1&display_name=Upscribe&url=https%3A%2F%2Fupscri.be%2F788447%2F&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=upscri.
El uso de obetos literales es muy útil en este caso y te sacará de un buen apuro:
let a = 10;
let b = 20;
// En vez de hacer
console.log(a,"a");
console.log(b,"b");
// Puedes hacer
console.log({a},{b});
Herramientas recomendadas
CSS Overview
Con esta herramienta podrás ver el resumen de todos los colores, fuentes y consultas de medios en un solo lugar.
Para instalarlo en tu Chrome, deberás seguir estos pasos:
- En Google Chrome, abre Developer Tools.
- Abre Settings.
- Click en Experiments Tab.
- Habilita el CSS Overview.
- Recarga DevTools.
- Aparecerá una nueva pestaña en DevTools llamada CSS Overview.
Font editor tools
Esta función nos permite probar diferentes tipos de letra sin escribir una sola línea de código.
- Ir a la pestaña Experiments a través de DevTools.
- Marca Enable New Font Editor Tools within Styles Pane.
- Recarga DevTools.
- Selecciona el elemento HTML que incluye las propiedades de la fuente que quieres cambiar.
- Verás el icono del Editor de Fuentes en el panel de Estilos.
Otras cositas que tal vez te sirvan para algo
Obtener la etiqueta seleccionada actualmente
Ve a Chrome DevTools y escribe $0 en la consola. Esto dará la referencia del nodo seleccionado actualmente.
Obtener el último valor evaluado en la consola
Ve a chrome DevTools y escribe $_ en la consola. Esto imprimirá siempre el último valor evaluado.
Copiar la solicitud como cURL desde la pestaña de red
Copia directamente la solicitud como cURL desde la pestaña de red
Edita toda la página activando el modo de diseño
Ve a chrome dev tools y escribe document.designMode=»on». Esto te permitirá modificar sin refrescar la página.
Conclusiones
Bueno, como ves, he decidido, además de usar el navegador Chrome como herramienta principal, dedicar este tutorial a enseñarte todo lo que el DevTools puede ofrecerte sin tener que instalar ninguna herramienta externa a mayores. Simplemente activando un par de funciones, para mí, completamente primordiales y enseñarte cuales son los comandos más usados, y no tan usados, para poder hacer tu vida de desarrollador web un poco más fácil.
En otra ocasión profundizaremos en otros temas de debug como extensiones para el navegador, que, para mi entender, solo sobrecargan aún más el proceso de desarrollo, y las herramientas de los diferentes frameworks que se suelen usar para el desarrollo web.
Espero que estas sugerencias te ayuden a mejorar tu día a día y, si tienes alguna sugerencia, compártela con los demás en la sección de comentarios.
