Debug con Less.js

Il fatto che Less.js trattare il CSS come una sorta di linguaggio di programmazione ci dà la possibilità di commettere errori di sintassi, che usando solo CSS l'unica cosa che otterremmo è che lo stile non sarebbe uscito correttamente, ma in Meno quello che ci genererebbe è che nessuno stile si vedrebbe.
Ecco perché è molto importante disporre di strumenti che ci permettano di vedere gli errori nel processo di sviluppo, così perdiamo meno tempo a individuare all'interno di grandi blocchi di codice che è ciò che fallisce.
A causa della natura di Less.js lo sviluppo orientato ai test non è ancora possibile, ecco perché farlo eseguire il debug Molte volte, se non sempre, deve essere fatto nel browser, cosa non molto ottimale ma è la soluzione che abbiamo a portata di mano.
1- Per eseguire questo tutorial sarà necessario avere conoscenze e nozioni di base su CSS, poiché sebbene sia focalizzato su Meno dobbiamo ancora sapere come vengono costruiti gli stili e come vengono utilizzate almeno le proprietà di base in modo da poter avere un riferimento adeguato quando vediamo i possibili errori.
2- Dobbiamo avere un ambiente configurato per l'uso Meno, ovvero una cartella con il progetto scaricato e disponibile per l'uso.
3- Se usiamo Google Chrome avremo bisogno di uno stile server web Apache poiché questo browser per sicurezza blocca le richieste locali di Less, se non vogliamo questa configurazione possiamo usare Firefox.
4- Infine abbiamo anche bisogno di un editor di testo dove scrivere gli esempi, può essere Testo sublime o forse NotePad ++ entrambi gli editor hanno la possibilità di incorporare plugin per poter evidenziare la sintassi di JavaScript e di CSS. Inoltre, è importante disporre delle autorizzazioni nel nostro sistema per salvare questi file nella posizione scelta.
Una delle prime opzioni che abbiamo è stampare il nostro codice e gli errori di sintassi direttamente all'interno del nostro ambiente con la libreria less.jsCiò si ottiene nell'ambiente di sviluppo eseguendo la nostra libreria direttamente sul client, in questo caso all'interno del browser.
Questo è molto importante, poiché quando compiliamo direttamente in questo modo quando si verifica un errore meno non genera alcuno stile, quindi in caso di guasto vedremo solo la nostra struttura HTML ma senza CSS. Per fare questo tipo di debug possiamo seguire la guida nel seguente codice:

 Debug con Less Js 

La prima cosa che vediamo è che includiamo un file personalizzato chiamato style-error.less Questo file è quello che conterrà il proprio codice su cui faremo il debug, quindi dobbiamo definire una variabile chiamata meno e assegnagli un elemento env che chiameremo sviluppo, quindi includiamo la nostra libreria less.js e con questa variabile quello che facciamo è dire meno che quando si verifica un errore ci lancia il messaggio per il quale non può compilare il codice tra le altre cose.
Nel nostro archivio style-error.less inseriremo il seguente codice errato:

 h1 {colore: rosso; dimensione del carattere: 3em;

Come abbiamo notato dobbiamo chiudere una chiave alla fine, ovviamente analiticamente questo errore sembra un po' semplice e sciocco, ma quando abbiamo centinaia di righe è molto certo che a un certo punto ci dimentichiamo di chiudere una chiave. Al momento dell'esecuzione del nostro documento vedremo poi come Meno ci dà un errore nel browser:

INGRANDIRE

Come vediamo il compilatore nel browser Meno Ci dice che c'è qualcosa che non riconosce e che probabilmente abbiamo dimenticato qualcosa, in questo caso sappiamo che era la chiave che non abbiamo chiuso.
Qui dobbiamo fare una piccola pausa, abbiamo già visto inizialmente come possiamo ottenere gli errori in MenoTuttavia, non sappiamo ancora cosa significano gli errori che possiamo ottenere, ecco perché definiremo i più importanti in modo da avere motivi sufficienti per sapere cosa cercheremo e quali possibili soluzioni possiamo applicare.
FileErrorQuesto errore si riferisce a un'importazione fallita da un altro file, se ricordiamo nei nostri file meno possiamo usare le istruzioni @importare per includere altri file per organizzare ed estendere le nostre funzionalità.
Errore di sintassiQuesto errore si verifica quando scriviamo in modo errato un'istruzione o posizioniamo una proprietà in modo errato, ad esempio quando dichiariamo una proprietà al di fuori di un blocco.
Nell'immagine seguente vediamo come appare un errore di questo tipo, lo otteniamo con il seguente codice:

 colore rosso; h1 {dimensione carattere: 3em; }

Dove possiamo vedere chiaramente che la proprietà colore rosso è fuori dalla sua posizione corretta, vediamo come appare se lo eseguiamo nel browser:

INGRANDIRE

Errore di analisiEra l'errore che abbiamo fatto esplodere nell'esempio iniziale, questo si verifica quando ci dimentichiamo di posizionare le parentesi graffe o il punto e virgola dove sono necessari.
NomeErroreQuesto errore si verifica quando chiamiamo una variabile o a mescolando che non è definito o non è disponibile nell'ambiente di quel file Meno.
Un'altra cosa che dobbiamo evidenziare è che Meno Verifica solo che la sintassi e i nomi siano corretti, tuttavia non convaliderà se il nostro contenuto è corretto, ad esempio vediamo il seguente codice:

 h1 {colore: rosso; dimensione del carattere: 3em; larghezza: rosso; }

Il codice sopra verrà compilato senza alcun problema, anche se vediamo chiaramente che la proprietà larghezza Deve avere una misura di taglia e non un colore, se eseguiamo lo stesso nel nostro browser il file viene eseguito e funziona:

INGRANDIRE

Quindi dobbiamo essere vigili poiché questa tecnica non è totalmente infallibile e ci sono errori che non vengono rilevati.
Un'altra delle tecniche che possiamo usare per fare un eseguire il debug del nostro codice sono gli strumenti di sviluppo del browser, attualmente i principali browser come Cromo sì Firefox disporre di strumenti che ci permettano di capire come il HTML e come si comporta e in questo modo possiamo usarli per vedere il nostro codice Meno.
Questo ci dà un livello più alto di eseguire il debug, soprattutto quando non possiamo utilizzare la variabile env che abbiamo visto nella sezione precedente, con questo tipo di debug potremmo non avere il rilevamento degli errori precedenti ma possiamo rilevare problemi come stili che si sovrappongono o hanno proprietà errate come abbiamo visto nell'esempio precedente dove Meno non ha rilevato un larghezza: rosso; ad esempio.
Per dimostrare questo modo di eseguire il debug, creeremo il seguente stile all'interno del nostro file style-error.less:

 h1 {dimensione carattere: 3em; colore: pomodoro; } header {h1 {font-size: 2em; }} # content-footer {span {font-family: Times, serif; }}

Poi nel nostro file HTML dove chiamiamo le librerie dovrebbe essere il seguente:

 Debug di meno Js © 2015 Solvetic 

Il prossimo passo è eseguire il nostro HTML nel browser, dove dovremmo ottenere quanto segue:

Ora per eseguire il debug corrispondente, non ci resta che fare clic con il pulsante destro del mouse su uno qualsiasi dei titoli e cercare l'opzione che ci dice Ispeziona elemento, con questo verrà rimossa la console di debug del browser.
Una volta lì possiamo ispezionare il nostro secondo titolo e vedremo qualcosa di interessante, c'è una proprietà che viene cancellata ed è perché quando si sovrappone viene eliminata per quell'elemento, con questo dimostriamo come possiamo individuare problemi e situazioni che sfuggono il compilatore di Meno. Vediamo quindi nell'immagine seguente come si presenta questa azione:

Per i primi passi in Meno Con questi strumenti otterremo sicuramente un'esperienza di sviluppo ottimale, riducendo la quantità di errori per omissione che possiamo avere, poiché quando dobbiamo scrivere centinaia di righe, qualcosa potrebbe andare storto.
Con questo finiamo questo tutorial, abbiamo visto un paio di opzioni di debug per Meno utilizzando risorse che già abbiamo, in questo modo non dobbiamo scaricare altri strumenti o cercare documentazione esterna di terze parti. Naturalmente ci sono altri strumenti e complementi che ci aiutano a soddisfare questi tipi di requisiti, tuttavia devi indagare un po' di più e la curva di apprendimento sarà maggiore per raggiungere lo stesso obiettivo.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo