El hecho que Less.js trate al CSS como una especie de lenguaje de programación nos da la posibilidad de cometer errores de sintaxis, que utilizando solamente CSS lo único que obtendríamos es que no saldría el estilo de forma adecuada, pero en Less lo que nos generaría es que ningún estilo se vería.
Es por ello que es muy importante contar con herramientas que nos permitan ver los errores en el proceso de desarrollo, así perdemos menos tiempo ubicando dentro de grandes bloques de código que es lo que falla.
Debido a la naturaleza de Less.js aún no es posible el desarrollo orientado a pruebas, es por ello que hacer debug muchas veces por no decir siempre debe hacerse en el navegador, algo que no es muy óptimo pero es la solución que tenemos a mano.
1- Para poder llevar a cabo este tutorial vamos a requerir tener conocimientos y nociones básicas de CSS, ya que a pesar que está enfocado en Less igual tenemos que saber cómo se construyen los estilos y como se utilizan al menos las propiedades básicas para que podamos tener una referencia adecuada cuando veamos los posibles errores.
2- Debemos tener configurado un entorno para utilizar Less, es decir, una carpeta con el proyecto descargado y disponible para su uso.
3- Si utilizamos Google Chrome vamos a necesitar un servidor web estilo Apache ya que este navegador por seguridad bloquea las peticiones locales de Less, si no queremos este setup podemos utilizar Firefox.
4- Por último necesitamos también un editor de textos donde escribir los ejemplos, puede ser Sublime Text o tal vez NotePad ++ ambos editores tienen la posibilidad de incorporar complementos para poder resaltar la sintaxis de JavaScript y de CSS. Además, es importante que tengamos permisos en nuestro sistema para guardar dichos archivos en la locación decidida.
Una de las primeras opciones que tenemos es imprimir nuestros errores de código y sintaxis directamente dentro de nuestro entorno con la librería less.js, esto se logra en el ambiente de desarrollo al ejecutar nuestra librería directamente en el cliente, en este caso dentro del navegador.
Esto es muy importante, ya que cuando compilamos directo de esta manera al ocurrir un error less no genera ningún estilo, por lo que si hay una falla solo veremos nuestra estructura HTML pero sin CSS. Para hacer este tipo de debug podemos seguir la guía del siguiente código:
En nuestro archivo estilo-error.less vamos a colocar el siguiente código erróneo:
![debug-lessjs.jpg]()
Como vemos el compilador en el navegador de Less nos indica que hay algo que no reconoce y que probablemente hemos olvidado algo, en este caso sabemos que fue la llave que no cerramos.
Aquí debemos hacer una pequeña pausa, ya vimos inicialmente como podemos obtener los errores en Less, sin embargo no sabemos aún que significan los errores que posiblemente obtengamos, es por ello que vamos a definir los más importantes de manera que podamos tener el fundamento suficiente para saber que buscaremos y que posibles soluciones podremos aplicar.
En la siguiente imagen vemos como luce un error de este tipo, lo logramos con el código siguiente:
![debug-lessjs-2.jpg]()
Otra cosa que debemos destacar es que Less solo verifica que la sintaxis y los nombres sean adecuados, sin embargo no va a validar si nuestro contenido es correcto, por ejemplo veamos el siguiente código:
![debug-lessjs-3.jpg]()
Así que debemos estar atentos ya que esta técnica no es totalmente infalible y hay errores que no se detectan.
Otra de las técnicas que podemos utilizar para poder hacer un debug de nuestro código son las herramientas de desarrollador de los navegadores, en la actualidad los navegadores principales como Chrome y Firefox tienen herramientas que nos permiten entender como está conformado el HTML y cómo se comporta el mismo y de esta forma podemos utilizarlas para poder ver nuestro código Less.
Esto nos da un nivel superior de debug, sobre todo cuando no podemos hacer uso de la variable env que vimos en la sección anterior, con este tipo de depuración no tendremos tal vez la detección de los errores anteriores pero podemos detectar problemas como estilos que se solapan o que tienen propiedades erróneas como vimos el ejemplo anterior donde Less no detectaba un width:red; por ejemplo.
Para poder demostrar esta forma de hacer debug vamos a construir el siguiente estilo dentro de nuestro archivo estilo-error.less:
Ahora para hacer el debug correspondiente, solo debemos hacer click derecho sobre alguno de los títulos y buscar la opción que nos dice inspeccionar elemento, con ello se levantará la consola de debug del navegador.
Una vez ahí podemos inspeccionar nuestro segundo título y veremos algo interesante, hay una propiedad que se está tachando y es porque al solaparse se elimina para ese elemento, con ello demostramos como podemos ubicar problemas y situaciones que escapan al compilador de Less. Veamos entonces en la siguiente imagen como luce esta acción:
Para los primeros pasos en Less con estas herramientas seguramente obtendremos una experiencia de desarrollo óptima, reduciendo la cantidad de errores por omisión que podamos tener, ya que cuando tenemos que escribir cientos de líneas es posible que algo salga mal.
Con esto damos por finalizado este tutorial, hemos visto un par de opciones de depuración para Less utilizando recursos que ya poseemos, de esta forma no tenemos que estar descargando otras herramientas o buscando documentación externa de terceros. Por supuesto hay otras herramientas y complementos que nos ayudan a cumplir este tipo de requerimientos, sin embargo hay que investigar un poco más y la curva de aprendizaje será mayor para lograr el mismo objetivo.
Es por ello que es muy importante contar con herramientas que nos permitan ver los errores en el proceso de desarrollo, así perdemos menos tiempo ubicando dentro de grandes bloques de código que es lo que falla.
Debido a la naturaleza de Less.js aún no es posible el desarrollo orientado a pruebas, es por ello que hacer debug muchas veces por no decir siempre debe hacerse en el navegador, algo que no es muy óptimo pero es la solución que tenemos a mano.
Requisitos
1- Para poder llevar a cabo este tutorial vamos a requerir tener conocimientos y nociones básicas de CSS, ya que a pesar que está enfocado en Less igual tenemos que saber cómo se construyen los estilos y como se utilizan al menos las propiedades básicas para que podamos tener una referencia adecuada cuando veamos los posibles errores.
2- Debemos tener configurado un entorno para utilizar Less, es decir, una carpeta con el proyecto descargado y disponible para su uso.
3- Si utilizamos Google Chrome vamos a necesitar un servidor web estilo Apache ya que este navegador por seguridad bloquea las peticiones locales de Less, si no queremos este setup podemos utilizar Firefox.
4- Por último necesitamos también un editor de textos donde escribir los ejemplos, puede ser Sublime Text o tal vez NotePad ++ ambos editores tienen la posibilidad de incorporar complementos para poder resaltar la sintaxis de JavaScript y de CSS. Además, es importante que tengamos permisos en nuestro sistema para guardar dichos archivos en la locación decidida.
Hacciendo debug directamente en Less
Una de las primeras opciones que tenemos es imprimir nuestros errores de código y sintaxis directamente dentro de nuestro entorno con la librería less.js, esto se logra en el ambiente de desarrollo al ejecutar nuestra librería directamente en el cliente, en este caso dentro del navegador.
Esto es muy importante, ya que cuando compilamos directo de esta manera al ocurrir un error less no genera ningún estilo, por lo que si hay una falla solo veremos nuestra estructura HTML pero sin CSS. Para hacer este tipo de debug podemos seguir la guía del siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet/less" type="text/css" href="estilo-error.less">
<script type="text/javascript">
var less = { env: 'development' };
</script>
<script src="less.min.js" type="text/javascript"></script>
<title>Haciendo debug con Less Js</title>
</head>
<body>
<h1>Mostrar errores en Less</h1>
</body>
</html>Lo primero que vemos es que incluimos un archivo personalizado llamado estilo-error.less este archivo es el que va a contener el código propio al cual le haremos el debug, acto seguido debemos definir una variable llamada less y asignarle un elemento env al cual llamaremos development, luego incluimos nuestra librería less.js y con esta variable lo que hacemos es decirle a less que cuando ocurra un error nos arroje el mensaje por el cual no puede compilar el código entre otras cosas.En nuestro archivo estilo-error.less vamos a colocar el siguiente código erróneo:
h1 {
color:red;
font-size:3em;Como notamos nos falta cerrar una llave al final, por supuesto de forma analítica este error se ve un poco simple y tonto, pero cuando tenemos cientos de líneas es muy seguro que en algún momento olvidemos cerrar alguna llave. Al momento de ejecutar nuestro documento veremos entonces como Less nos arroja un error en el navegador:
Como vemos el compilador en el navegador de Less nos indica que hay algo que no reconoce y que probablemente hemos olvidado algo, en este caso sabemos que fue la llave que no cerramos.
Tipos de errores que nos podemos encontrar
Aquí debemos hacer una pequeña pausa, ya vimos inicialmente como podemos obtener los errores en Less, sin embargo no sabemos aún que significan los errores que posiblemente obtengamos, es por ello que vamos a definir los más importantes de manera que podamos tener el fundamento suficiente para saber que buscaremos y que posibles soluciones podremos aplicar.
FileError
Este error se refiere a una importación fallida de otro archivo, si recordamos en nuestros archivos less podemos utilizar la instrucción @import para incluir otros archivos para organizar y extender nuestras funcionalidades.
SyntaxError
Este error ocurre cuando escribimos de forma incorrecta alguna instrucción o colocamos una propiedad de forma errónea, por ejemplo al declarar una propiedad fuera de un bloque.
En la siguiente imagen vemos como luce un error de este tipo, lo logramos con el código siguiente:
color:red;
h1 {
font-size:3em;
}Donde podemos ver claramente que la propiedad color:red está fuera de su posición adecuada, veamos como luce si lo ejecutamos en el navegador:
ParseError
Fue el error que detonamos en el ejemplo inicial, este ocurre cuando olvidamos colocar las llaves o los punto y coma donde se necesitan.
NameError
Este error sucede cuando llamamos a una variable o a un mixin que no está definido o no se encuentra disponible en el entorno de ese archivo Less.
Otra cosa que debemos destacar es que Less solo verifica que la sintaxis y los nombres sean adecuados, sin embargo no va a validar si nuestro contenido es correcto, por ejemplo veamos el siguiente código:
h1 {
color:red;
font-size:3em;
width: red;
}El código anterior va a compilarse sin ningún problema, a pesar que claramente vemos que la propiedad width debe llevar una medida de tamaño y no un color, si ejecutamos el mismo en nuestro navegador el archivo se ejecuta y funciona:
Así que debemos estar atentos ya que esta técnica no es totalmente infalible y hay errores que no se detectan.
Utilizar las herramientas del navegador
Otra de las técnicas que podemos utilizar para poder hacer un debug de nuestro código son las herramientas de desarrollador de los navegadores, en la actualidad los navegadores principales como Chrome y Firefox tienen herramientas que nos permiten entender como está conformado el HTML y cómo se comporta el mismo y de esta forma podemos utilizarlas para poder ver nuestro código Less.
Esto nos da un nivel superior de debug, sobre todo cuando no podemos hacer uso de la variable env que vimos en la sección anterior, con este tipo de depuración no tendremos tal vez la detección de los errores anteriores pero podemos detectar problemas como estilos que se solapan o que tienen propiedades erróneas como vimos el ejemplo anterior donde Less no detectaba un width:red; por ejemplo.
Para poder demostrar esta forma de hacer debug vamos a construir el siguiente estilo dentro de nuestro archivo estilo-error.less:
h1 {
font-size: 3em;
color: tomato;
}
header {
h1 {
font-size: 2em;
}
}
#content-footer {
span {
font-family: Times, serif;
}
}Luego en nuestro archivo HTML donde llamamos a las librerías debe quedar de la siguiente forma:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet/less" type="text/css" href="estilo-error.less">
<script src="less.min.js" type="text/javascript"></script>
<title>Haciendo debug con Less Js</title>
</head>
<body>
<h1>Haciendo debug con Less</h1>
<header><h1>Aqui vemos un encabezado de página</h1></header>
<footer id="content-footer"><span>© 2015 Solvetic</span></footer>
</body>
</html>El siguiente paso es ejecutar nuestro HTML en el navegador, donde deberíamos obtener lo siguiente:
Ahora para hacer el debug correspondiente, solo debemos hacer click derecho sobre alguno de los títulos y buscar la opción que nos dice inspeccionar elemento, con ello se levantará la consola de debug del navegador.
Una vez ahí podemos inspeccionar nuestro segundo título y veremos algo interesante, hay una propiedad que se está tachando y es porque al solaparse se elimina para ese elemento, con ello demostramos como podemos ubicar problemas y situaciones que escapan al compilador de Less. Veamos entonces en la siguiente imagen como luce esta acción:
Para los primeros pasos en Less con estas herramientas seguramente obtendremos una experiencia de desarrollo óptima, reduciendo la cantidad de errores por omisión que podamos tener, ya que cuando tenemos que escribir cientos de líneas es posible que algo salga mal.
Con esto damos por finalizado este tutorial, hemos visto un par de opciones de depuración para Less utilizando recursos que ya poseemos, de esta forma no tenemos que estar descargando otras herramientas o buscando documentación externa de terceros. Por supuesto hay otras herramientas y complementos que nos ayudan a cumplir este tipo de requerimientos, sin embargo hay que investigar un poco más y la curva de aprendizaje será mayor para lograr el mismo objetivo.
