Débogage avec Less.js

Le fait que Moins.js traiter le CSS comme une sorte de langage de programmation nous donne la possibilité de commettre des erreurs de syntaxe, qui en utilisant uniquement CSS la seule chose que nous obtiendrions, c'est que le style ne sortirait pas correctement, mais dans Moins ce qui nous générerait, c'est qu'aucun style ne serait vu.
C'est pourquoi il est très important d'avoir des outils qui nous permettent de voir les erreurs dans le processus de développement, ainsi nous perdons moins de temps à localiser dans de gros blocs de code c'est ce qui échoue.
En raison de la nature par Less.js le développement orienté test n'est pas encore possible, c'est pourquoi faire déboguer Plusieurs fois, sinon toujours, cela doit être fait dans le navigateur, ce qui n'est pas très optimal mais c'est la solution que nous avons à portée de main.
1- Afin de réaliser ce tutoriel nous aurons besoin d'avoir des connaissances de base et des notions de CSS, car bien qu'il soit axé sur Moins encore faut-il savoir comment sont construits les styles et comment au moins les propriétés de base sont utilisées pour avoir une référence adéquate quand on voit les erreurs possibles.
2- Nous devons avoir un environnement configuré pour utiliser Moins, c'est-à-dire un dossier avec le projet téléchargé et disponible pour utilisation.
3- Si nous utilisons Google Chrome nous allons avoir besoin d'un style de serveur Web Apache puisque ce navigateur de sécurité bloque les requêtes locales de Less, si nous ne voulons pas de cette configuration, nous pouvons utiliser Firefox.
4- Enfin, nous avons également besoin d'un éditeur de texte où écrire les exemples, il peut être Texte sublime ou peut-être NotePad ++ les deux éditeurs ont la possibilité d'incorporer des plugins pour pouvoir mettre en évidence la syntaxe de JavaScript et de CSS. De plus, il est important que nous ayons des autorisations dans notre système pour enregistrer ces fichiers à l'emplacement choisi.
L'une des premières options dont nous disposons est d'imprimer notre code et nos erreurs de syntaxe directement dans notre environnement avec la bibliothèque moins.jsCeci est réalisé dans l'environnement de développement en exécutant notre bibliothèque directement sur le client, dans ce cas dans le navigateur.
Ceci est très important, car lorsque nous compilons directement de cette manière lorsqu'une erreur se produit moins ne génère aucun style, donc s'il y a un échec nous ne verrons que notre structure HTML mais sans CSS. Pour faire ce type de débogage nous pouvons suivre le guide dans le code suivant :

 Débogage avec moins de Js 

La première chose que nous voyons est que nous incluons un fichier personnalisé appelé erreur-style.less Ce fichier est celui qui contiendra le propre code auquel nous allons déboguer, puis nous devons définir une variable appelée moins et lui attribuer un élément env que nous appellerons développement, puis nous incluons notre bibliothèque moins.js et avec cette variable ce que nous faisons est de dire moins que lorsqu'une erreur se produit, il nous renvoie le message dont il ne peut pas compiler le code entre autres.
Dans nos archives erreur-style.less nous allons placer le code erroné suivant :

 h1 {couleur : rouge; taille de police : 3em ;

Comme nous l'avons remarqué, nous devons fermer une clé à la fin, bien sûr analytiquement cette erreur semble un peu simple et idiote, mais lorsque nous avons des centaines de lignes, il est très certain qu'à un moment donné, nous oublions de fermer une clé. Au moment de l'exécution de notre document, nous verrons alors comment Moins nous renvoie une erreur dans le navigateur :

AGRANDIR

Comme nous voyons le compilateur dans le navigateur Moins Il nous dit qu'il y a quelque chose qu'il ne reconnaît pas et que nous avons probablement oublié quelque chose, dans ce cas nous savons que c'était la clé que nous n'avons pas fermée.
Ici il faut faire une petite pause, on a déjà vu dans un premier temps comment on peut obtenir les erreurs en MoinsCependant, nous ne savons pas encore ce que signifient les erreurs que nous pouvons obtenir, c'est pourquoi nous allons définir les plus importantes afin que nous puissions avoir des motifs suffisants pour savoir ce que nous allons rechercher et quelles solutions possibles nous pouvons appliquer.
Erreur de fichierCette erreur fait référence à un échec d'importation à partir d'un autre fichier, si nous nous souvenons dans nos fichiers moins nous pouvons utiliser l'instruction @importer d'inclure d'autres fichiers pour organiser et étendre nos fonctionnalités.
Erreur de syntaxeCette erreur se produit lorsque nous écrivons incorrectement une instruction ou plaçons une propriété dans le mauvais sens, par exemple lors de la déclaration d'une propriété en dehors d'un bloc.
Dans l'image suivante, nous voyons à quoi ressemble une erreur de ce type, nous y parvenons avec le code suivant :

 La couleur rouge; h1 {taille de la police : 3em; }

Où l'on peut clairement voir que la propriété La couleur rouge n'est pas dans sa position correcte, voyons à quoi cela ressemble si nous l'exécutons dans le navigateur :

AGRANDIR

Erreur d'analyseC'est l'erreur que nous avons déclenchée dans l'exemple initial, cela se produit lorsque nous oublions de placer les accolades ou les points-virgules là où ils sont nécessaires.
NameErrorCette erreur se produit lorsque nous appelons une variable ou un mélanger qui n'est pas défini ou non disponible dans l'environnement de ce fichier Moins.
Une autre chose que nous devons souligner est que Moins Il vérifie seulement que la syntaxe et les noms sont corrects, cependant il ne validera pas si notre contenu est correct, par exemple voyons le code suivant :

 h1 {couleur : rouge; taille de police : 3em ; largeur : rouge ; }

Le code ci-dessus compilera sans aucun problème, bien que nous voyions clairement que la propriété largeur Il doit avoir une mesure de taille et non une couleur, si nous exécutons la même chose dans notre navigateur le fichier est exécuté et fonctionne :

AGRANDIR

Il faut donc être vigilant car cette technique n'est pas totalement infaillible et il y a des erreurs qui ne sont pas détectées.
Une autre des techniques que nous pouvons utiliser pour faire un déboguer de notre code sont les outils de développement du navigateur, actuellement les principaux navigateurs tels que Chrome Oui Firefox ont des outils qui nous permettent de comprendre comment le HTML et comment il se comporte et de cette façon nous pouvons les utiliser pour voir notre code Moins.
Cela nous donne un niveau plus élevé de déboguer, surtout quand on ne peut pas utiliser la variable env que nous avons vu dans la section précédente, avec ce type de débogage, nous n'avons peut-être pas la détection des erreurs précédentes mais nous pouvons détecter des problèmes tels que des styles qui se chevauchent ou ont des propriétés erronées comme nous l'avons vu dans l'exemple précédent où Moins n'a pas détecté de largeur : rouge; par exemple.
Afin de démontrer cette façon de déboguer, nous allons construire le style suivant dans notre fichier erreur-style.less:

 h1 {taille de la police : 3em; couleur : tomate ; } header {h1 {font-size: 2em; }} # content-footer {span {font-family: Times, serif; }}

Puis dans notre dossier HTML où nous appelons les bibliothèques devrait être comme suit :

 Déboguer Moins Js © 2015 Solvetic 

La prochaine étape consiste à exécuter notre HTML dans le navigateur, où nous devrions obtenir ce qui suit :

Maintenant, pour effectuer le débogage correspondant, il suffit de cliquer avec le bouton droit sur l'un des titres et de rechercher l'option qui nous indique inspecter l'élément, avec cela, la console de débogage du navigateur sera levée.
Une fois là-bas, nous pouvons inspecter notre deuxième titre et nous verrons quelque chose d'intéressant, il y a une propriété qui est barrée et c'est parce que lors du chevauchement, elle est éliminée pour cet élément, avec cela nous montrons comment nous pouvons localiser les problèmes et les situations qui s'échappent le compilateur de Moins. Voyons alors dans l'image suivante à quoi ressemble cette action :

Pour les premiers pas dans Moins Avec ces outils, nous obtiendrons sûrement une expérience de développement optimale, en réduisant le nombre d'erreurs par omission que nous pouvons avoir, car lorsque nous devons écrire des centaines de lignes, quelque chose peut mal tourner.
Avec cela, nous terminons ce didacticiel, nous avons vu quelques options de débogage pour Moins en utilisant les ressources dont nous disposons déjà, de cette façon, nous n'avons pas besoin de télécharger d'autres outils ou de rechercher de la documentation externe de tiers. Bien sûr il existe d'autres outils et compléments qui nous aident à répondre à ce type d'exigences, cependant il faut enquêter un peu plus et la courbe d'apprentissage sera plus longue pour atteindre le même objectif.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif