Jeste li ikada poželjeli privremeno izmijeniti web stranicu kako biste vidjeli kako će izgledati s određenim bojama, fontovima i stilom? To je moguće pomoću alata koji već postoji u vašem pregledniku pod nazivom " Pregledajte element ”. Ovo je ostvarenje snova za sve korisnike koji vole manipulirati CSS-om.
U ovom vodiču provest ćemo vas kroz osnove pregleda predmeta i kako ga koristiti na vašoj web lokaciji WordPress.
Što je alat za pregled predmeta?
Moderni preglednici kao što su Google Chrome i Mozilla Firefox ugradili su alate koji omogućuju web programerima da otklone pogreške. Ovi alati prikazuju HTML, CSS i JavaScript za stranicu i prikazuju kako se kôd izvodi.
Upotreba alata " Pregledajte element Možete urediti HTML, CSS ili JavaScript kôd za bilo koju web stranicu i uživo vidjeti svoje promjene (samo na računalu).
Za vlasnika a web stranica, ovi vam alati mogu pomoći da pregledate kako će određeni stil izgledati bez stvarne primjene promjena za sve.
Za pisce su ovi alati izvrsni jer lako možete mijenjati osobne podatke prilikom snimanja zaslona uklanjajući potrebu za stvarno zamućivanjem elemenata.
Za agente za podršku ovo je sjajan način da prepoznaju pogrešku koja bi mogla uzrokovati da se vaše galerije ne učitavaju ili spriječiti u njihovom ispravnom radu.
Samo grebemo površinu slučajeva upotrebe, jer alat " Pregledajte element Zaista je moćan.
U ovom ćemo se članku usredotočiti na alat " Pregledajte element Iz Google Chromea, jer je to naš odabrani preglednik. Firefox ima vlastite razvojne alate na koje se također možete pozvati odabirom izbornika " pregledati element ".
Pokretanje alata "Inspect element" i lokalizacija koda
Ovaj alat možete pokrenuti pritiskom na tipke CTRL + Shift + I na tipkovnici. Možete i kliknuti bilo gdje na web stranici, a zatim odabrati Pregled stavke izbornika preglednika.
Prozor vašeg preglednika podijelit će se na dva dijela, a na dnu će se prikazati izvorni kôd web stranice.
Prozor alata za programere dalje je podijeljen u dva prozora. S lijeve strane vidjet ćete HTML kôd stranice. Na desnom oknu vidjet ćete CSS pravila.
Dok pomičete miš preko izvora HTML koda, vidjet ćete označeno područje označeno na web stranici. Također ćete primijetiti CSS pravila za ovaj element u pitanju.
Također možete pokazivati pokazivač miša preko stavke na web stranici, desnom tipkom miša i odaberite " pregledati element ". Stavka koju ste kliknuli bit će istaknuta u izvornom kodu.
Programer koda i program za otklanjanje pogrešaka
HTML i CSS u prozoru za pregled elemenata mogu se uređivati. Dvaput možete kliknuti u izvornom HTML kôdu i urediti kôd kako želite.
Možete i dvokliknite i urediti atribute stilova u oknu CSS. Da biste dodali pravilo, kliknite ikonu plus na oknu sa stilom pri vrhu.
Kada napravite promjene u CSS ili HTML kodu, te će se promjene odmah prikazati u vašem pregledniku.
Imajte na umu da nisu sve ovdje napravljene promjene spremljene nigdje. Alat Pregledajte element To je alat za uklanjanje pogrešaka i ne sprema promjene u datoteku na vašem poslužitelju. To znači da će se, ako osvježite stranicu, sve vaše promjene izgubiti.
Da biste stvarno izvršili promjene, morat ćete izmijeniti stil svog WordPress tema ili predložak za dodavanje promjena koje želite spremiti.
Prije nego počnete uređivati svoje WordPress tema postojeći pomoću alata " Pregledajte element Obavezno spremite sve promjene stvaranjem podređene teme.
Kako lako pronaći pogreške na WordPress
Alat Pregledajte element Je li područje nazvano " Utješiti Što pokazuje sve pogreške koje postoje na vašoj web lokaciji. Prije nego što pokušate otkloniti pogrešku ili zatražiti pomoć od autora teme ili dodatka, ovdje je uvijek vrijedno pogledati kako biste vidjeli što nije u redu.
Na primjer, ako ste bili mušterija OptinMonster Tko se pita zašto se njegov optin ne opterećuje, lako možete pronaći problem koji pokazuje da je " slug vaše stranice se ne podudara ".
Ako traka za dijeljenje nije radila ispravno, možete primijetiti da je uzrok JavaScript pogreška.
To je sve za ovaj vodič, nadam se da možete bolje prilagoditi svoj WordPress blog. Slobodno podijelite ovaj vodič sa svojim prijateljima.
