Отстраняване на грешки Less.js

Фактът че По -малко.js лекувайте CSS като един вид език за програмиране ни дава възможността да допускаме синтаксични грешки, които използваме само CSS единственото нещо, което бихме получили, е, че стилът няма да излезе правилно, но вътре По-малко това, което би ни генерирало, е, че няма да се вижда никакъв стил.
Ето защо е много важно да имаме инструменти, които ни позволяват да виждаме грешките в процеса на разработка, така че губим по -малко време за локализиране в големи блокове код, което е неуспешното.
Поради природата от Less.js тестово-ориентирано развитие все още не е възможно, затова правим отстраняване на грешки Много пъти, ако не винаги, трябва да се прави в браузъра, нещо, което не е много оптимално, но е решението, което имаме под ръка.
1- За да изпълним този урок ще ни е необходимо да имаме основни познания и представи за CSS, тъй като въпреки че е фокусиран върху По-малко все още трябва да знаем как се изграждат стиловете и как се използват поне основните свойства, за да можем да имаме адекватна справка, когато видим възможните грешки.
2- Трябва да имаме конфигурирана среда за използване По-малко, тоест папка с изтегления проект и достъпна за използване.
3- Ако използваме Google Chrome ще се нуждаем от стил на уеб сървър Apache тъй като този браузър за сигурност блокира локалните заявки на Less, ако не искаме тази настройка, можем да използваме Firefox.
4- И накрая, ние също се нуждаем от текстов редактор, където да напишем примерите, може да бъде Възвишен текст или може би NotePad ++ и двата редактора имат възможност да включат плъгини, за да могат да подчертаят синтаксиса на JavaScript и на CSS. Освен това е важно да имаме разрешения в нашата система за запазване на тези файлове на избраното място.
Една от първите опции, които имаме, е да отпечатаме нашия код и грешки в синтаксиса директно в нашата среда с библиотеката less.jsТова се постига в средата за разработка чрез пускане на нашата библиотека директно на клиента, в този случай в браузъра.
Това е много важно, тъй като когато компилираме директно по този начин, когато възникне грешка по-малко не генерира никакъв стил, така че ако има грешка, ще видим само нашата структура HTML но без CSS. За да направим този тип отстраняване на грешки, можем да следваме ръководството в следния код:

 Отстраняване на грешки с по -малко Js 

Първото нещо, което виждаме, е, че включваме персонализиран файл, наречен style-error.less Този файл е този, който ще съдържа собствения код, към който ще отстраняваме грешки, след което трябва да дефинираме променлива, наречена по-малко и му задайте елемент env който ще наречем развитие, след това включваме нашата библиотека less.js и с тази променлива ние казваме по-малко че когато възникне грешка, тя ни хвърля съобщението, за което не може да компилира кода между другото.
В нашия архив style-error.less ще поставим следния грешен код:

 h1 {цвят: червен; размер на шрифта: 3em;

Както забелязахме, че трябва да затворим ключ в края, разбира се аналитично тази грешка изглежда малко проста и глупава, но когато имаме стотици редове, е много сигурно, че в един момент забравяме да затворим ключ. В момента на изпълнение на нашия документ ще видим как По-малко ни изпраща грешка в браузъра:

Увеличете

Както виждаме компилатора в браузъра По-малко Той ни казва, че има нещо, което не разпознава и че вероятно сме забравили нещо, в този случай знаем, че това е ключът, който не затворихме.
Тук трябва да направим малка пауза, вече видяхме първоначално как можем да получим грешките в По-малкоВсе още обаче не знаем какво означават грешките, които можем да получим, затова ще дефинираме най -важните, за да можем да имаме достатъчно основания да знаем какво ще търсим и какви възможни решения можем да приложим.
FileErrorТази грешка се отнася до неуспешен импорт от друг файл, ако помним в нашите файлове по-малко можем да използваме инструкцията @импорт да включваме други файлове за организиране и разширяване на нашите функционалности.
Синтактична грешкаТази грешка възниква, когато неправилно напишем изявление или поставим свойство по грешен начин, например при деклариране на свойство извън блок.
На следващото изображение виждаме как изглежда грешка от този тип, постигаме я със следния код:

 цвят: червен; h1 {размер на шрифта: 3em; }

Където можем ясно да видим, че имотът цвят: червен е извън правилното си положение, нека видим как изглежда, ако го стартираме в браузъра:

Увеличете

ParseErrorТова беше грешката, която детонирахме в първоначалния пример, това се случва, когато забравим да поставим скоби или точка и запетая, където са необходими.
Грешка в иметоТази грешка се случва, когато извикаме променлива или a миксин което не е дефинирано или не е налично в средата на този файл По-малко.
Друго нещо, което трябва да подчертаем, е, че По-малко Той само проверява дали синтаксисът и имената са правилни, но няма да се потвърди, ако съдържанието ни е правилно, например нека видим следния код:

 h1 {цвят: червен; размер на шрифта: 3em; ширина: червена; }

Горният код ще се компилира без проблем, въпреки че ясно виждаме, че свойството ширина Той трябва да има измерване на размера, а не цвят, ако изпълним същото в нашия браузър, файлът се изпълнява и работи:

Увеличете

Затова трябва да бъдем бдителни, тъй като тази техника не е напълно безпогрешна и има грешки, които не се откриват.
Друга от техниките, които можем да използваме, за да направим a отстраняване на грешки на нашия код са инструментите за разработчици на браузъри, понастоящем основните браузъри като напр Chrome Y Firefox имат инструменти, които ни позволяват да разберем как HTML и как се държи и по този начин можем да ги използваме, за да видим нашия код По-малко.
Това ни дава по -високо ниво на отстраняване на грешки, особено когато не можем да използваме променливата env което видяхме в предишния раздел, с този тип отстраняване на грешки може да нямаме откриване на предишните грешки, но можем да открием проблеми като стилове, които се припокриват или имат грешни свойства, както видяхме в предишния пример, където По-малко не откри а ширина: червена; например.
За да демонстрираме този начин на отстраняване на грешки, ще изградим следния стил във файла си style-error.less:

 h1 {размер на шрифта: 3em; цвят: домат; } заглавка {h1 {font-size: 2em; }} # content-footer {span {font-family: Times, serif; }}

След това в нашия файл HTML където наричаме библиотеките трябва да бъде както следва:

 Отстраняване на грешки по -малко Js © 2015 Solvetic 

Следващата стъпка е да стартираме нашата HTML в браузъра, където трябва да получим следното:

Сега, за да направим съответното отстраняване на грешки, просто трябва да щракнем с десния бутон върху някое от заглавията и да потърсим опцията, която ни казва инспектирай елемента, с това конзолата за отстраняване на грешки на браузъра ще бъде вдигната.
След като там можем да проверим второто си заглавие и ще видим нещо интересно, има свойство, което се зачертава и това е така, защото когато припокриването се елиминира за този елемент, с това демонстрираме как можем да локализираме проблеми и ситуации, които избягват компилаторът на По-малко. Нека да видим тогава на следното изображение как изглежда това действие:

За първите стъпки в По-малко С тези инструменти със сигурност ще получим оптимален опит в развитието, като намалим количеството грешки чрез пропуск, който може да имаме, тъй като когато трябва да напишем стотици редове, нещо може да се обърка.
С това приключваме този урок, видяхме няколко опции за отстраняване на грешки за По-малко използвайки ресурси, които вече имаме, по този начин не е нужно да изтегляме други инструменти или да търсим външна документация на трети страни. Разбира се, има и други инструменти и допълнения, които ни помагат да изпълним тези изисквания, но трябва да проучите малко повече и кривата на обучение ще бъде по -голяма, за да постигнете същата цел.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка