Kako uporabljati Google Chrome za odpravljanje napak v CSS

Orodje Inspect Element je odlično, ko gre za odpravljanje napak na vaših spletnih straneh v realnem času. S tem orodjem si lahko pomagate pri predogledu in spreminjanju zasnove spletnega mesta. Omogoča vam tudi, da to storite brez ponovnega nalaganja strani in takoj prikaže vaše spremembe CSS.

V tem članku bomo razpravljali o tem, kako si lahko ogledate razrede CSS in njihove uporabljene sloge v oknu Preglejte element. Zajel bo tudi, kako lahko to uporabite za predogled sprememb, ki jih naredite v svojem CSS v realnem času.

Odpiranje Inspect Element v Google Chromu

Obiščete lahko katero koli spletno mesto in odprete okno Preglejte element, da vidite, kako izgleda njegova koda HTML ali CSS. Ta vadnica bo uporabljena vzorčno spletno mesto pokazati.

Okno Preglejte element v Google Chromu lahko odprete s pritiskom na F12 ključ. Prav tako lahko z desno tipko miške kliknete kjerkoli na strani in kliknete na Preglejte.

Odpre se okno Preglejte element s kodo HTML za del spletnega mesta, kjer ste kliknili z desno tipko miške. Tukaj lahko tudi urejanje besedila spletnega mesta z Google Chromom.

Zavihek Slogi v oknu Preglejte element

V samem oknu Preglejte element pod Elementi zavihku, obstaja prostor za ogled kode HTML in CSS. Kodo HTML lahko vidite na levi strani okna Preglejte element. Kodo CSS najdete na desni, pod Slogi zavihek.

Recimo, da ste imeli element HTML z razredom, imenovanim "card-padding", z desnim in levim paddingom:

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

Če ste si predogledali to spletno mesto v brskalniku, bi lahko izbrali razdel element z razredom "card-padding". Vsak slog, uporabljen za razred "card-padding", bi bil prikazan na desni, pod Slogi zavihek.

Ko miškin kazalec premaknete nad element v pogledu kode HTML, bo ta del spletne strani označen v spletnem brskalniku. Vrsta elementa HTML skupaj z vsemi imeni razredov bo prikazana tudi v pogovornem oknu poleg elementa.

V tem primeru boste na strani videli vsebnik div z označenimi imeni razredov "row", "card-padding" in "pb-5".

Kako spremeniti CSS v realnem času

CSS lahko spremenite neposredno na zavihku Slogi:

1. Uporaba to spletno mesto, z desno tipko miške kliknite prvi naslov.
2. V tem posebnem naslovu h4 boste videli razred, ki je bil uporabljen zanj, imenovan "text-grey" z barvo #8a8a8a.
3. Namesto tega spremenite barvo v nekaj drugega, na primer v oranžno. Spremeniti želite le samo vrednost in ne imena lastnosti, "barva".
4. Videli boste, da se naslov spremeni iz temno sive v oranžno.
5. Če želite onemogočiti določen slog CSS, počistite polje na levi strani sloga.
6. Izvirnemu kompletu lahko dodate tudi več stilov. Kliknite tik pod ali desno od znamke, da začnete dodajati novo. Pri dodajanju novih slogov morate uporabiti enako sintakso kot v običajni datoteki CSS.
7. Če predogledujete lokalno spletno mesto, lahko še naprej spreminjate CSS, dokler se ne približate zahtevanemu videzu in občutku za uporabniški vmesnik. Po tem lahko kopirate spremembe CSS, ki ste jih naredili, nazaj v svojo lokalno kodo.

Kako spremeniti CSS iz knjižnic ali okvirjev tretjih oseb

Elemente HTML lahko spremenite tudi, če uporabljate knjižnice ali okvire tretjih oseb, kot je Bootstrap.

1. Uporaba to spletno mesto, z desno tipko miške kliknite enega od gumbov Bootstrap na strani.
2. Videli boste dva razreda, uporabljena za gumb, "btn" in "btn-primary". Bootstrap že ima svoj lasten slog, ki se uporablja za oba razreda. Barve, ki se uporabljajo kot barve ozadja in obrobe, so #007bff. Spremenite to v nekaj drugega, na primer Violet.
3. Če si predogledujete lokalno spletno mesto, lahko nato svoje nove spremembe dodate nazaj v lokalno kodo. Odvisno od vrstnega reda vašega CSS, boste morda morali uporabite bolj specifičen izbirnik CSS. Na primer, predpono izbirnika z ".btn". To bo preglasilo izvirni slog Bootstrapa.

   .btn.btn-primarni {
    barva ozadja: vijolična;
    barva obrobe: vijolična;
   }

Kaj pomeni element.style na zavihku Slogi?

Vsak element HTML, ki ga označite v oknu Preglejte element, ima blok element.styles. To je enakovredno dodajanju vstavljenega sloga elementu HTML, namesto da bi ga ciljali z izbirnikom.

1. Z desno tipko miške kliknite element HTML. V razdelek element.style dodajte poljuben slog, na primer:

   barva: whitesmoke;

2. Videli boste, da se je spremenila tudi koda za element HTML. Koda znotraj elementa HTML ima zdaj novo vrstico:

   slog ="barva: whitesmoke;"

Kako otroški elementi HTML podedujejo slog

Če imate dve različni vrednosti sloga uporabljeni za nadrejeni element in podrejeni element, bo imela vrednost v podrejenem elementu prednost.

1. Uporaba to spletno mesto, z desno tipko miške kliknite kjer koli na zunanjih robovih spletnega mesta.
2. V razdelku HTML okna Preglejte element se osredotočite na dva določena elementa HTML. Obstaja nadrejeni element div, za katerega je uporabljen razred "vsebina". Ta element HTML ima podrejeni element h4, za katerega je uporabljen razred "besedilno sivo".
3. Izberite podrejeni element h4 HTML in onemogočite barvno oblikovanje v razredu "besedilo-sivo".
4. Izberite nadrejeni element HTML z razredom "content". Razredu dodajte naslednji slog CSS:

   barva: rdeča;

   Vse besedilo znotraj nadrejenega diva bo postalo rdeče. Ta sprememba bo prišla tudi na podrejene elemente, kar pomeni, da bo imel h4 tudi rdečo barvo.
5. Izberite podrejeni element h4 HTML in dodajte nov slog v razred "besedilno sivo":

   barva: zelena;

   To bo preglasilo oblikovanje vseh nadrejenih razredov. Element h4 HTML se bo spremenil iz rdeče v zeleno.
6. Če si ogledate slog za razred "vsebina", boste videli tudi prečrtano. To potrjuje, da podrejeni element h4 preglasi nadrejeno barvo.

Prednosti odpravljanja napak vašega CSS v brskalniku

Odpravljanje napak CSS v vašem brskalniku lahko prihrani veliko časa in pospeši vaš potek dela kodiranja. To še posebej velja, če morate videti, kako vaše nove spremembe CSS vplivajo na uporabniški vmesnik na vašem spletnem mestu v realnem času.

To tehniko lahko uporabite namesto spreminjanja lokalne kode in ponovnega nalaganja aplikacije. Tako boste prihranili pred ugibanjem, katere vrednosti CSS bi delovale, saj si lahko zdaj ogledate spremembe uporabniškega vmesnika, ko jih naredite.

V oknu Preglejte element lahko spreminjate, dokler se ne približate želenemu dizajnu. Ko imate, lahko kopirate kodo iz okna Preglejte element nazaj v svojo lokalno kodo. Še vedno lahko znova zaženete svojo aplikacijo, da preverite, ali nove spremembe CSS še vedno delujejo.

Ta vadnica je pokrivala osnove, kako razhroščevati CSS spletnega mesta z uporabo okna Preglejte element, vključno s tem, kje najti CSS na zavihku Slogi.

Zajelo je tudi, kako spremeniti CSS in si ogledati vizualne spremembe uporabniškega vmesnika v realnem času. Upajmo, da razumete tudi, kako narediti spremembe, ko CSS uporablja knjižnico drugega proizvajalca, in kako deluje dedovanje slogov.

Obstaja veliko drugih zanimivih stvari, ki jih lahko počnete z oknom Preglejte element.

7 igrivih stvari, ki jih lahko naredite z elementom Inspect

Preberite Naprej

O avtorju