Kako koristiti Google Chrome za otklanjanje pogrešaka u CSS-u

Alat Inspect Element izvrstan je kada je u pitanju otklanjanje pogrešaka na vašim web stranicama u stvarnom vremenu. Ovaj alat možete koristiti za pregled i promjenu dizajna web stranice. Također vam omogućuje da to učinite bez potrebe za ponovnim učitavanjem stranice, odmah prikazujući vaše CSS promjene.

Ovaj članak će proći kroz kako vidjeti CSS klase i njihove primijenjene stilove u prozoru Inspect Element. Također će pokriti kako to možete koristiti za pregled promjena koje unosite u svoj CSS u stvarnom vremenu.

Otvaranje Inspect Element u Google Chromeu

Možete posjetiti bilo koju web stranicu i otvoriti prozor Inspect Element da vidite kako izgleda njegov HTML ili CSS kod. Ovaj vodič će koristiti uzorak web stranice demonstrirati.

Možete otvoriti prozor Inspect Element u Google Chromeu pritiskom na F12 ključ. Također možete kliknuti desnom tipkom bilo gdje na stranici i kliknuti na Pregledati.

Otvorit će se prozor Inspect Element za HTML kôd za dio web stranice na koji ste kliknuli desnom tipkom miša. Ovdje također možete uređivati ​​tekst web stranice pomoću Google Chromea.

Kartica Stilovi u prozoru Inspect Element

U samom prozoru Inspect Element, ispod Elementi na kartici, postoji mjesto za pregled HTML i CSS koda. HTML kôd možete vidjeti na lijevoj strani prozora Inspect Element. CSS kod možete pronaći desno, ispod Stilovi tab.

Recimo da ste imali HTML element s klasom koja se zove "card-padding", s desnim i lijevim paddingom primijenjenim na njega:

.card-padding {
 padding-desno: 0vh;
 padding-lijevo: 0vh;
}

Ako ste pregledali ovu web stranicu u pregledniku, mogli biste odabrati razd element s klasom "card-padding". Svaki stil primijenjen na klasu "card-padding" prikazat će se s desne strane, ispod Stilovi tab.

Kada zadržite pokazivač miša iznad elementa u prikazu HTML koda, taj će dio web stranice istaknuti u web-pregledniku. Vrsta HTML elementa, zajedno s svim nazivima klasa, također će se prikazati u dijaloškom okviru pored elementa.

U tom slučaju vidjet ćete div spremnik s nazivima klasa "row", "card-padding" i "pb-5" istaknutim na stranici.

Kako unijeti promjene u CSS u stvarnom vremenu

CSS možete promijeniti izravno s kartice Stilovi:

1. Korištenje ovu web stranicu, desnom tipkom miša kliknite prvi naslov.
2. Na tom posebnom h4 naslovu vidjet ćete klasu primijenjenu na njega pod nazivom "text-grey" s bojom #8a8a8a.
3. Umjesto toga promijenite boju u nešto drugo, kao što je narančasta. Vi samo želite promijeniti samu vrijednost, a ne naziv svojstva, "boja".
4. Vidjet ćete kako se naslov mijenja iz tamnosive u narančasto.
5. Ako želite onemogućiti određeni CSS stil, poništite okvir lijevo od stila.
6. Također možete dodati više stilova izvornom skupu. Kliknite odmah ispod ili desno od svojstva da biste počeli dodavati novi. Prilikom dodavanja novih stilova trebali biste koristiti istu sintaksu kao u običnoj CSS datoteci.
7. Ako pregledavate lokalnu web stranicu, možete nastaviti s CSS promjenama dok se ne približite potrebnom izgledu i dojmu za svoje korisničko sučelje. Nakon toga možete kopirati CSS promjene koje ste napravili natrag u svoj lokalni kod.

Kako izmijeniti CSS iz knjižnica ili okvira treće strane

Također možete promijeniti HTML elemente ako koristite biblioteke ili okvire treće strane kao što je Bootstrap.

1. Korištenje ovu web stranicu, desnom tipkom miša kliknite jedan od gumba Bootstrap na stranici.
2. Vidjet ćete dvije klase primijenjene na gumb, "btn" i "btn-primary". Bootstrap već ima svoj vlastiti stil primijenjen na obje ove klase. Boje koje se koriste kao boje pozadine i obruba su #007bff. Promijenite ovo u nešto drugo, kao što je Violet.
3. Ako pregledavate lokalnu web stranicu, tada možete dodati svoje nove promjene natrag u svoj lokalni kôd. Ovisno o redoslijedu vašeg CSS-a, možda ćete morati koristite specifičniji CSS selektor. Na primjer, stavite prefiks biraču s ".btn". Ovo će nadjačati originalni Bootstrap stil.

   .btn.btn-primarni {
    boja pozadine: ljubičasta;
    boja obruba: ljubičasta;
   }

Što element.style znači na kartici Stilovi?

Svaki HTML element koji označite u prozoru Inspect Element ima blok element.styles. Ovo je ekvivalent dodavanju umetnutog stila u HTML element, umjesto da ga ciljate pomoću selektora.

1. Desnom tipkom miša kliknite HTML element. Dodajte bilo koji stil u odjeljak element.style, kao što su:

   boja: whitesmoke;

2. Vidjet ćete da se promijenio i kod za HTML element. Kod unutar HTML elementa sada ima novi redak:

   stil="boja: whitesmoke;"

Kako podređeni HTML elementi nasljeđuju stil

Ako imate dvije različite vrijednosti stila primijenjene na roditeljski element i podređeni element, vrijednost u podređenom elementu imat će prednost.

1. Korištenje ovu web stranicu, desnom tipkom miša kliknite bilo gdje na vanjskim rubovima web-mjesta.
2. U odjeljku HTML prozora Inspect Element, usredotočite se na dva određena HTML elementa. Postoji roditeljski element div na koji je primijenjena klasa "content". Ovaj HTML element ima podređeni element h4, s klasom "text-grey" primijenjenom na njega.
3. Odaberite podređeni h4 HTML element i onemogućite stil boja u klasi "tekst-sivi".
4. Odaberite roditeljski HTML element s klasom "content". Dodajte sljedeći CSS stil klasi:

   boja: crvena;

   Sav tekst unutar roditeljskog diva postat će crven. Ova promjena će također kaskadno preći na podređene elemente, što znači da će h4 također imati crvenu boju.
5. Odaberite podređeni h4 HTML element i dodajte novi stil klasi "text-grey":

   boja: zelena;

   Ovo će nadjačati stil bilo koje roditeljske klase. HTML element h4 će se iz crvene pretvoriti u zelenu.
6. Također ćete vidjeti precrtano ako pogledate stil za klasu "sadržaj". Ovo potvrđuje da h4 podređeni element nadjača boju roditelja.

Prednosti otklanjanja pogrešaka vašeg CSS-a u pregledniku

Otklanjanje pogrešaka u CSS-u u vašem pregledniku može uštedjeti puno vremena i ubrzati radni tijek kodiranja. To je osobito istinito ako trebate vidjeti kako vaše nove CSS promjene utječu na korisničko sučelje na vašoj web stranici u stvarnom vremenu.

Ovu tehniku ​​možete koristiti umjesto izmjene lokalnog koda i ponovnog učitavanja aplikacije. To će vas spasiti od nagađanja koje bi CSS vrijednosti funkcionirale, jer sada možete vidjeti promjene korisničkog sučelja dok ih unosite.

Možete unositi promjene u prozor Inspect Element dok se ne približite željenom dizajnu. Kada to učinite, možete kopirati kod iz prozora Inspect Element, natrag u svoj lokalni kod. I dalje možete ponovno pokrenuti svoju aplikaciju kako biste provjerili funkcioniraju li vaše nove CSS promjene.

Ovaj vodič pokriva osnove kako otkloniti pogreške u CSS-u web-mjesta pomoću prozora Inspect Element, uključujući gdje pronaći CSS na kartici Stilovi.

Također je pokrilo kako napraviti promjene u CSS-u i vidjeti vizualne promjene korisničkog sučelja u stvarnom vremenu. Nadamo se da također razumijete kako napraviti promjene kada CSS koristi biblioteku treće strane i kako funkcionira nasljeđivanje stilova.

Postoje mnoge druge zanimljive stvari koje možete učiniti s prozorom Inspect Element.

7 razigranih stvari koje možete učiniti s elementom Inspect

Pročitajte dalje

O autoru