Како користити Гоогле Цхроме за отклањање грешака у ЦСС-у

Алат Инспецт Елемент је одличан када је у питању отклањање грешака на вашим веб страницама у реалном времену. Ову алатку можете користити да бисте прегледали и променили дизајн веб странице. Такође вам омогућава да то урадите без потребе да поново учитавате страницу, одмах приказујући ваше ЦСС промене.

Овај чланак ће говорити о томе како да видите ЦСС класе и њихове примењене стилове у прозору Инспецт Елемент. Такође ће покрити како ово можете користити за преглед промена које уносите у свој ЦСС у реалном времену.

Отварање Инспецт Елемент у Гоогле Цхроме-у

Можете да посетите било коју веб локацију и отворите прозор Инспецт Елемент да видите како изгледа његов ХТМЛ или ЦСС код. Овај водич ће користити узорак веб странице да демонстрира.

Можете отворити прозор Инспецт Елемент у Гоогле Цхроме-у притиском на Ф12 кључ. Такође можете да кликнете десним тастером миша било где на страници и кликнете на Инспецт.

Прозор Инспецт Елемент ће се отворити за ХТМЛ код за део веб локације на који сте кликнули десним тастером миша. Овде такође можете измените текст веб локације помоћу Гоогле Цхроме-а.

Картица Стилови у прозору Инспецт Елемент

У самом прозору Инспецт Елемент, испод Елементи на картици, постоји место за преглед и ХТМЛ и ЦСС кода. Можете видети ХТМЛ код са леве стране прозора Инспецт Елемент. Можете пронаћи ЦСС код са десне стране, испод Стилови таб.

Рецимо да имате ХТМЛ елемент са класом која се зове "цард-паддинг", са десним и левим допунама примењеним на њега:

.цард-паддинг {
 паддинг-ригхт: 0вх;
 паддинг-лефт: 0вх;
}

Ако сте прегледали ову веб локацију у прегледачу, могли бисте да изаберете див елемент са класом "цард-паддинг". Сваки стил примењен на класу "цард-паддинг" би се приказао на десној страни, испод Стилови таб.

Када пређете курсором преко елемента у приказу ХТМЛ кода, тај део веб странице ће бити истакнут у веб претраживачу. Тип ХТМЛ елемента, заједно са свим именима класа, такође ће се приказати у оквиру за дијалог поред елемента.

У овом случају, видећете див контејнер са именима класа „ров“, „цард-паддинг“ и „пб-5“ истакнутим на страници.

Како направити промене у ЦСС-у у реалном времену

Можете променити ЦСС директно са картице Стилови:

1. Користећи ову веб страницу, кликните десним тастером миша на први наслов.
2. На том одређеном х4 наслову, видећете класу примењену на њега под називом „тект-греи“ са бојом #8а8а8а.
3. Уместо тога промените боју у нешто друго, на пример наранџасту. Желите да промените само саму вредност, а не име својства, "боја".
4. Видећете да се наслов мења из тамносиве у наранџасто.
5. Ако желите да онемогућите одређени ЦСС стил, опозовите избор у пољу за потврду лево од стила.
6. Такође можете додати више стилова оригиналном скупу. Кликните одмах испод или десно од својства да бисте почели да додајете нову. Требало би да користите исту синтаксу као у обичној ЦСС датотеци када додајете нове стилове.
7. Ако прегледавате локалну веб локацију, можете наставити да уносите ЦСС промене док се не приближите потребном изгледу и осећају за свој кориснички интерфејс. Након тога, можете копирати ЦСС промене које сте направили назад у свој локални код.

Како да измените ЦСС из библиотека или оквира треће стране

Такође можете да мењате ХТМЛ елементе ако користите библиотеке или оквире треће стране као што је Боотстрап.

1. Користећи ову веб страницу, кликните десним тастером миша на једно од Боотстрап дугмади на страници.
2. Видећете две класе примењене на дугме, "бтн" и "бтн-примари". Боотстрап већ има сопствени стил примењен на обе ове класе. Боје које се користе као боје позадине и ивице су #007бфф. Промените ово у нешто друго, као што је Виолет.
3. Ако прегледавате локалну веб локацију, можете да додате нове промене назад у свој локални код. У зависности од редоследа вашег ЦСС-а, можда ћете морати користите специфичнији ЦСС селектор. На пример, ставите префикс селектору са ".бтн". Ово ће заменити оригинални Боотстрап стил.

   .бтн.бтн-примари {
    боја позадине: љубичаста;
    боја ивице: љубичаста;
   }

Шта значи елемент.стиле на картици Стилови?

Сваки ХТМЛ елемент који истакнете у прозору Инспецт Елемент има блок елемент.стилес. Ово је еквивалентно додавању уграђеног стила у ХТМЛ елемент, уместо да га циљате помоћу селектора.

1. Кликните десним тастером миша на ХТМЛ елемент. Додајте било који стил у елемент.стиле одељак, као што су:

   боја: бели дим;

2. Видећете да је код за ХТМЛ елемент такође промењен. Код унутар ХТМЛ елемента сада има нови ред:

   стиле="боја: бели дим;"

Како подређени ХТМЛ елементи наслеђују стил

Ако имате две различите вредности стила примењене на родитељски елемент и подређени елемент, вредност у подређеном елементу ће имати предност.

1. Користећи ову веб страницу, кликните десним тастером миша било где на спољним ивицама веб локације.
2. У одељку ХТМЛ прозора Инспецт Елемент, фокусирајте се на два одређена ХТМЛ елемента. Постоји родитељски елемент див са класом "цонтент" примењеном на њега. Овај ХТМЛ елемент има подређени елемент х4, на који је примењена класа „тект-греи“.
3. Изаберите подређени х4 ХТМЛ елемент и онемогућите стил боја у класи „текст-сива“.
4. Изаберите родитељски ХТМЛ елемент са класом "цонтент". Додајте следећи ЦСС стил у класу:

   боја црвена;

   Сав текст унутар родитељског дива ће постати црвен. Ова промена ће такође каскадно прећи на подређене елементе, што значи да ће х4 такође имати црвену боју.
5. Изаберите подређени х4 ХТМЛ елемент и додајте нови стил класи „текст-сиви“:

   боја: зелена;

   Ово ће надјачати стил било које родитељске класе. Х4 ХТМЛ елемент ће се променити из црвене у зелену.
6. Такође ћете видети прецртано ако погледате стил за класу „садржај“. Ово потврђује да х4 подређени елемент надјача боју родитеља.

Предности отклањања грешака у вашем ЦСС-у у претраживачу

Отклањање грешака у ЦСС-у у вашем претраживачу може уштедети много времена и убрзати радни ток кодирања. Ово је посебно тачно ако желите да видите како ваше нове ЦСС промене утичу на кориснички интерфејс на вашој веб локацији у реалном времену.

Можете да користите ову технику уместо да мењате локални код и поново учитавате апликацију. Ово ће вас уштедети од нагађања које би ЦСС вредности функционисале, јер сада можете да видите промене корисничког интерфејса док их правите.

Можете да уносите промене у прозор Инспецт Елемент док се не приближите жељеном дизајну. Када то урадите, можете копирати код из прозора Инспецт Елемент, назад у свој локални код. И даље можете поново да покренете апликацију да бисте тестирали да ли ваше нове ЦСС промене и даље функционишу.

Овај водич је покрио основе како да отклоните грешке у ЦСС-у веб локације помоћу прозора Инспецт Елемент, укључујући и где да пронађете ЦСС на картици Стилови.

Такође је покрило како направити промене у ЦСС-у и видети визуелне промене корисничког интерфејса у реалном времену. Надамо се да такође разумете како да направите промене када ЦСС користи библиотеку треће стране и како функционише наслеђивање стилова.

Постоји много других занимљивих ствари које можете да урадите са прозором Инспецт Елемент.

7 забавних ствари које можете да урадите са елементом Инспецт

Реад Нект

О аутору