Pogledajte HTML i CSS bilo koje veb stranice
Sajt je izgrađen sa linijama koda , ali rezultat je određene stranice sa slikama, video zapisima, fontovima i još mnogo toga. Da biste promenili jedan od tih elemenata ili videli od čega se sastoji, morate pronaći određenu liniju koda koja ga kontroliše. To možete uraditi pomoću alata za pregled elementa.
Većina veb pregledača ne čine da preuzmete alat za pregled ili instalirate dodatak. Umesto toga, oni vam omogućavaju da kliknete desnim tasterom miša na element stranice i izaberete Pregled ili Pregled elementa . Međutim, proces može biti malo drugačiji u vašem pretraživaču.
Pregledajte elemente u Chrome-u
Najnovije verzije Google Chrome-a vam omogućavaju da pregledate stranicu na nekoliko načina, a sve to koristi ugrađeni Chrome DevTools:
- Desnim tasterom miša kliknite nešto na stranici (ili prazno područje) i izaberite Inspect
- Unesite prečicu tastera Ctrl + Shift + I
- Koristite Chrome meni da biste pristupili opciji More Tools> Developer tools
Chrome DevTools vam omogućava da jednostavno kopirate ili uređujete HTML linije ili potpuno sakrijete ili obrišete elemente (sve dok se stranica ne učita).
Kada se DevTools otvori sa strane stranice, možete da promenite mesto gde se nalazi, da ga ispraznite sa strane, potražite sve datoteke stranice, izaberite elemente sa stranice za određeni pregled, kopirajte datoteke i URL-ove, pa čak i prilagodite gomilu postavki.
Pregledajte elemente u Firefoxu
Kao i Chrome, Firefox ima nekoliko različitih načina za otvaranje alata pod imenom Inspector:
- Kliknite desnim tasterom miša na prazno područje na stranici ili izaberite element, a zatim izaberite Inspect Element
- Ukucajte Ctrl + Shift + T ili Ctrl + Shift + I pomoću tastature
- Iz menija Firefox kliknite Developer > Inspector
- U meniju Alatke kliknite Web Developer> Inspector
Dok pomerate mišem preko različitih elemenata u Firefoxu, alatka Inspector automatski pronalazi informacije o izvornom kodu elementa. Kliknite na neki element, a "pretraživanje na licu" će se zaustaviti i možete pregledati element iz prozora Inspector.
Desnim tasterom miša kliknite na element da biste pronašli sve podržane kontrole. Možete da uradite stvari poput uređivanja stranice kao HTML-a, kopirajte ili nalepite unutrašnji ili spoljašnji HTML kôd, pokažite DOM osobine, snimite ekran ili izbrišite čvor, lako primenite nove atribute, vidite sve CSS stranice i još mnogo toga.
Pregledajte elemente u operi
Opera može pregledati i elemente, sa svojim DOM Inspector alatom koji je identičan Chrome-ovima. Evo kako doći do njega:
- Koristite prečicu na tastaturi Ctrl + Shift + I
- Idite u Meni> Još alatki> Prikaži razvojni meni , a zatim otvorite meni kroz Meni> Programer> Alati za razvijanje
- Iz menija desnog klika na bilo kom elementu na stranici izaberite Inspect element
Pregledajte Elemente u Internet Exploreru
Sličan alat elementa pregleda, nazvan Alat za razvijanje, dostupan je u programu Internet Explorer:
- Pritisnite F12 na tastaturi
- Koristite opciju Tools> F12 Developer Menu (pritisnite Alt + X ako ne vidite meni Tools )
- Kliknite desnim tasterom miša na stranicu i kliknite Inspect Element
IE ima alat Select element u ovom novom meniju koji vam omogućava da kliknete na bilo koji element stranice kako biste videli njegove HTML i CSS detalje. Takođe možete lako onemogućiti / omogućiti označavanje elementa dok pregledate kroz karticu DOM Explorer .
Kao i drugi elementi inspektora elementa u gore navedenim pregledačima, Internet Explorer vam omogućava da isecate, kopirate i nalepite elemente, kao i da izmenite HTML, dodate atribute, kopirate elemente sa priloženim stilovima i još mnogo toga.