Depuração com Less.js

O fato de que Less.js trate o CSS como um tipo de linguagem de programação nos dá a possibilidade de cometer erros de sintaxe, que usando apenas CSS a única coisa que veríamos é que o estilo não sairia corretamente, mas em Menos o que nos geraria é que nenhum estilo seria visto.
Por isso é muito importante ter ferramentas que nos permitam ver os erros no processo de desenvolvimento, para que percamos menos tempo localizando dentro de grandes blocos de código que é o que falha.
Devido à natureza por Less.js o desenvolvimento orientado a testes ainda não é possível, é por isso que fazer depurar Muitas vezes, senão sempre, deve ser feito no navegador, o que não é muito ideal, mas é a solução que temos em mãos.
1- Para a realização deste tutorial, será necessário ter conhecimentos básicos e noções de CSS, uma vez que embora esteja focado em Menos ainda temos que saber como são construídos os estilos e como pelo menos as propriedades básicas são utilizadas para que possamos ter uma referência adequada quando virmos os possíveis erros.
2- Devemos ter um ambiente configurado para usar Menos, ou seja, uma pasta com o projeto baixado e disponível para uso.
3- Se usarmos Google Chrome vamos precisar de um estilo de servidor web Apache já que este navegador para segurança bloqueia as solicitações locais de Less, se não quisermos esta configuração, podemos usar Raposa de fogo.
4- Finalmente, também precisamos de um editor de texto onde escrever os exemplos, pode ser Texto Sublime ou talvez NotePad ++ ambos os editores têm a capacidade de incorporar plug-ins para poder destacar a sintaxe de JavaScript e de CSS. Além disso, é importante que tenhamos permissões em nosso sistema para salvar esses arquivos no local escolhido.
Uma das primeiras opções que temos é imprimir nosso código e erros de sintaxe diretamente em nosso ambiente com a biblioteca less.jsIsso é obtido no ambiente de desenvolvimento, executando nossa biblioteca diretamente no cliente, neste caso, no navegador.
Isso é muito importante, pois quando compilamos diretamente desta forma, quando ocorre um erro menos não gera nenhum estilo, então se houver uma falha veremos apenas a nossa estrutura HTML mas sem CSS. Para fazer esse tipo de depuração, podemos seguir o guia no seguinte código:

 Depurando com menos Js 

A primeira coisa que vemos é que incluímos um arquivo personalizado chamado style-error.less Este arquivo é aquele que conterá o próprio código ao qual iremos depurar, então devemos definir uma variável chamada menos e atribuir a ele um elemento env que vamos chamar desenvolvimento, então incluímos nossa biblioteca less.js e com esta variável o que fazemos é dizer menos que, quando ocorre um erro, ele nos envia a mensagem para a qual não pode compilar o código, entre outras coisas.
Em nosso arquivo style-error.less vamos colocar o seguinte código errado:

 h1 {cor: vermelho; tamanho da fonte: 3em;

Como notamos que precisamos fechar uma chave no final, é claro que analiticamente esse erro parece um pouco simples e bobo, mas quando temos centenas de linhas é muito certo que em algum momento nos esquecemos de fechar uma chave. No momento de executar nosso documento, veremos como Menos nos lança um erro no navegador:

PROLONGAR

Como vemos o compilador no navegador Menos Diz-nos que há algo que não reconhece e que provavelmente esquecemos algo, neste caso sabemos que foi a chave que não fechamos.
Aqui devemos fazer uma pequena pausa, já vimos inicialmente como podemos obter os erros em MenosPorém, ainda não sabemos o que significam os erros que podemos obter, por isso vamos definir os mais importantes para que possamos ter bases suficientes para saber o que procuraremos e quais as possíveis soluções que podemos aplicar.
Erro de arquivoEste erro se refere a uma importação com falha de outro arquivo, se nos lembrarmos em nossos arquivos menos podemos usar a instrução @importar para incluir outros arquivos para organizar e estender nossas funcionalidades.
Erro de sintaxeEste erro ocorre quando escrevemos incorretamente uma instrução ou colocamos uma propriedade da maneira errada, por exemplo, ao declarar uma propriedade fora de um bloco.
Na imagem a seguir, vemos a aparência de um erro desse tipo, e o obtemos com o seguinte código:

 cor vermelha; h1 {tamanho da fonte: 3em; }

Onde podemos ver claramente que a propriedade cor vermelha está fora de sua posição correta, vamos ver como fica se o executarmos no navegador:

PROLONGAR

Erro de análiseFoi o erro que detonamos no exemplo inicial, isso ocorre quando esquecemos de colocar as chaves ou ponto e vírgula onde são necessários.
NameErrorEste erro acontece quando chamamos uma variável ou um mixin que não está definido ou não está disponível no ambiente desse arquivo Menos.
Outra coisa que devemos destacar é que Menos Ele apenas verifica se a sintaxe e os nomes estão corretos, porém não validará se nosso conteúdo estiver correto, por exemplo, vamos ver o seguinte código:

 h1 {cor: vermelho; tamanho da fonte: 3em; largura: vermelho; }

O código acima será compilado sem nenhum problema, embora possamos ver claramente que a propriedade largura Deve ter uma medida de tamanho e não uma cor, se executarmos o mesmo em nosso navegador o arquivo é executado e funciona:

PROLONGAR

Portanto, devemos estar atentos, pois esta técnica não é totalmente infalível e existem erros que não são detectados.
Outra das técnicas que podemos usar para fazer um depurar do nosso código são as ferramentas de desenvolvedor de navegador, atualmente os principais navegadores, como cromada Y Raposa de fogo temos ferramentas que nos permitem entender como o HTML e como ele se comporta e, desta forma, podemos usá-los para ver nosso código Menos.
Isso nos dá um nível mais alto de depurar, especialmente quando não podemos fazer uso da variável env que vimos na seção anterior, com este tipo de depuração podemos não ter a detecção dos erros anteriores, mas podemos detectar problemas como estilos que se sobrepõem ou possuem propriedades erradas, como vimos no exemplo anterior, onde Menos não detectou um largura: vermelho; por exemplo.
A fim de demonstrar esta forma de depuração, vamos construir o seguinte estilo dentro de nosso arquivo style-error.less:

 h1 {tamanho da fonte: 3em; cor: tomate; } cabeçalho {h1 {tamanho da fonte: 2em; }} # content-footer {span {font-family: Times, serif; }}

Então em nosso arquivo HTML onde chamamos as bibliotecas deve ser o seguinte:

 Depurando menos Js © 2015 Solvetic 

A próxima etapa é executar nosso HTML no navegador, onde devemos obter o seguinte:

Agora para fazer a depuração correspondente, basta clicar com o botão direito em qualquer um dos títulos e procurar a opção que nos diz inspecionar elemento, com isso o console de depuração do navegador será levantado.
Uma vez lá podemos inspecionar nosso segundo título e veremos algo interessante, há uma propriedade que está sendo riscada e é porque ao se sobrepor é eliminada para aquele elemento, com isso demonstramos como podemos localizar problemas e situações que escapam o compilador de Menos. Vamos ver então na imagem a seguir como é essa ação:

Para os primeiros passos em Menos Com essas ferramentas com certeza obteremos uma ótima experiência de desenvolvimento, reduzindo a quantidade de erros por omissão que possamos ter, pois quando tivermos que escrever centenas de linhas, algo pode dar errado.
Com isso encerramos este tutorial, vimos algumas opções de depuração para Menos utilizando recursos que já possuímos, desta forma não precisamos estar baixando outras ferramentas ou procurando documentação externa de terceiros. Claro que existem outras ferramentas e complementos que nos ajudam a atender esses tipos de requisitos, porém você tem que investigar um pouco mais e a curva de aprendizado será maior para atingir o mesmo objetivo.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo