Pogledajte HTML i CSS bilo koje web stranice
Web-lokacija je izgrađena s linijama koda , no rezultat je specifičnih stranica s slikama, videozapisima, fontovima i još mnogo toga. Da biste promijenili neki od tih elemenata ili vidjeli što se sastoji, morate pronaći određenu liniju koda koji ga kontrolira. To možete učiniti pomoću alata za pregled elemenata.
Većina web preglednika ne uzrokuje preuzimanje alata za pregled ili instaliranje dodatka. Umjesto toga, omogućuju vam da desnom tipkom miša kliknete element stranice i odaberete Inspect or Inspect Element . Međutim, proces može biti malo drugačiji u vašem pregledniku.
Pregledajte elemente u Chromeu
Najnovija inačica Google Chromea omogućuje pregled stranice na nekoliko načina, a svi koriste ugrađeni Chrome DevTools:
- Desnom tipkom miša kliknite nešto na stranici (ili prazno područje) i odaberite Ispiti
- Unesite prečac tipkovnice Ctrl + Shift + I
- Upotrijebite izbornik Chromea da biste pristupili opciji Više alata> Razvojni alati
Chrome DevTools vam omogućuje da jednostavno kopirate ili uredite HTML retke ili skrivate ili izbrisate elemente zajedno (sve dok se stranica ne ponovo učita).
Kada se DevTools otvori na bočnoj strani stranice, možete promijeniti gdje se nalazi, istaknuti je iz stranice, pretražiti sve datoteke stranice, odabrati elemente sa stranice za određeni pregled, kopirati datoteke i URL-ove, pa čak i prilagoditi hrpu od postavki.
Pregledajte elemente u Firefoxu
Poput Chromea, Firefox ima nekoliko različitih načina za otvaranje svog alata pod nazivom inspektor:
- Desnom tipkom miša kliknite prazno područje na stranici ili odaberite neki element i odaberite Inspect Element
- Unesite Ctrl + Shift + T ili Ctrl + Shift + I pomoću tipkovnice
- Na izborniku Krijesnica kliknite Razvojni programer > Inspektor
- Na izborniku Alati kliknite Web Developer> Inspector
Dok pomaknete miša preko različitih elemenata u Firefoxu, alat Inspector automatski pronalazi informacije izvornog koda elementa. Kliknite element i zaustavit će se "on-the-fly search" i možete pregledati element iz prozora preglednika.
Desnom tipkom miša kliknite element da biste pronašli sve podržane kontrole. Možete učiniti stvari kao što je uređivanje stranice kao HTML, kopiranje ili lijepljenje unutarnjeg ili vanjskog HTML koda, prikazivanje DOM svojstava, snimanje zaslona ili brisanje čvora, jednostavno primjenu novih atributa, pregled svih CSS-a na stranici i još mnogo toga.
Pregledajte elemente u operi
Opera također može pregledati elemente, a to je alat DOM inspektora koji je identičan Chromeovim. Evo kako doći do njega:
- Koristite tipkovnički prečac Ctrl + Shift + I
- Idite na Izbornik> Više alata> Prikaži izbornik razvojnog programera , a zatim otvorite izbornik Izbornik> Razvojni programer> Alati za razvojne programere
- Iz izbornika desnim klikom na bilo koji element na stranici odaberite Inspect element
Pregledajte elemente u programu Internet Explorer
Sličan alat za provjeru elemenata, nazvan Razvojni alati, dostupan je u programu Internet Explorer:
- Pritisnite F12 na tipkovnici
- Koristite opciju Alati> F12 Razvojni programer (pritisnite Alt + X ako ne vidite izbornik Alati )
- Desnom tipkom miša kliknite stranicu i kliknite Inspect Element
IE ima alat Select element u ovom novom izborniku koji vam omogućuje klikanje bilo kojeg elementa stranice da biste vidjeli njegove HTML i CSS pojedinosti. Također možete jednostavno onemogućiti / omogućiti označavanje elementa dok pregledavate karticu DOM Explorer .
Kao i drugi alati za inspektore elemenata u gore navedenim preglednicima, Internet Explorer omogućuje vam rezanje, kopiranje i lijepljenje elemenata, kao i uređivanje HTML-a, dodavanje atributa, kopiranje elemenata s priloženim stilovima i još mnogo toga.