Vaadake mis tahes veebi lehe HTML-i ja CSS-i
Veebisait on ehitatud koodide ridu, kuid tulemuseks on konkreetsed lehed koos piltide, videote, fondide ja muudega. Kui soovite mõnda neist elementidest muuta või näha, mis see koosneb, peate leidma selle koodi konkreetse rea. Seda saate teha elemendi kontrollimise vahendiga.
Enamik veebibrauseritest ei lase teil kontrollimisvahendit alla laadida ega lisandmooduli installida. Selle asemel saavad nad paremklõpsata lehe elementi ja valida Inspect (Kontrolli) või Inspect Element (Kontrolli elementi) . Kuid see protsess võib teie brauserist veidi teistsugune olla.
Kontrollige Chrome'i elemente
Google Chrome'i uusimad versioonid võimaldavad teil lehte mõnevõrra kontrollida, mis kõik kasutavad sisseehitatud Chrome DevToolsit:
- Paremklõpsake lehel (või tühjal alal) midagi ja valige käsk Kontrolli
- Sisesta kiirklahv Ctrl + Shift + I
- Kasutage Chrome'i menüüd, et avada valik Rohkem tööriistad> Arendaja tööriistad
Chrome DevTools võimaldab teil teha selliseid asju nagu HTML-readide kopeerimine või redigeerimine või elementide peitmine või kustutamine (kuni leht uuesti laaditakse).
Kui lehe küljel avaneb DevTools, saate selle asukohta muuta, lehest välja lehitseda, otsida kõiki lehe faile, valida konkreetse eksamiga lehe elemente, kopeerida faile ja URL-e ning isegi kohandada hunnikut seadetest.
Kontrollige Firefoxi elemente
Nagu Chrome, on Firefoxil mõni erinevat moodi oma tööriista Inspector avamiseks:
- Paremklõpsake lehel tühja ala või valige element ja valige käsk Kontrollida elementi
- Klaviatuuriga sisestage Ctrl + Tõstuklahv + T või Ctrl + Tõstuklahv + I
- Firefoxi menüüs klõpsake käsku Developer > Inspector
- Klõpsake menüü Tööriistad käsku Veebi arendaja> Inspektor
Kui liigutate kursorit erinevate Firefoxi elementide hulgast, otsib Inspector tööriista automaatselt elemendi lähtekoodi teavet. Klõpsake elemendil ja "otseülekanne" peatub ja saate kontrollida elementi inspektori aknas.
Kõigi toetatud juhtnuppude leidmiseks klõpsake hiire parema nupuga. Saate teha selliseid asju, nagu redigeerida lehte HTML-iga, kopeerida või kleepida sisemine või välimine HTML-kood, näidata DOMi atribuute, pildi ekraanipildi või eemaldada sõlme, hõlpsalt rakendada uusi atribuute, vaadata kogu lehe CSS-i jms.
Kontrollige Opera elemente
Opera saab elemente ka kontrollida, kuna see on DOM-i inspektori tööriist, mis on Chrome'i jaoks identne. Selle juurde pääseb järgmiselt.
- Kasutage kiirklahvi Ctrl + Shift + I
- Liikuge menüükäsu juurde> Veel tööriistad> Näita arendaja menüüd ja avage menüü Menüü> Arendaja> Arendaja tööriistad
- Paremklõpsake mis tahes elemendil lehel, valige Kontrolli element
Kontrollige Internet Exploreri elemente
Sarnane kontrollitavate elementide tööriist, mida nimetatakse arendaja tööriistadele, on saadaval Internet Exploreris:
- Klaviatuuril vajutage F12
- Kasutage valikuid Tööriistad> F12 Arendaja menüü (vajuta Alt + X, kui te ei näe menüüd Tööriistad )
- Paremklõpsake lehel ja klõpsake nuppu Kontrolli elementi
Sellel uuel menüül on IE elemendi tööriist, mille abil saate klõpsata ükskõik millisel lehe elemendil, et näha selle HTML-i ja CSS-i üksikasju. Samuti saate hõlpsasti blokeerida / lubada elemendi esiletõstmist, kui sirvite DOM-i Explorer vahekaarti.
Nagu eespool nimetatud brauserites olevad elemendiinspektori tööriistad, võimaldab Internet Explorer teil elemente lõigata, kopeerida ja kleepida, muuta HTML-i, lisada atribuute, kopeerida elemente lisatud stiilidega jms.