"Inspect Element" on Firefoxin selaimen kehittäjätyökalu, jonka avulla voit seurata HTML -koodia millä tahansa verkkosivulla. Verkkosivun HTML- ja CSS -tyylitaulukoita voidaan muokata "Tarkasta elementti" -toiminnolla. Voit yrittää muokata sivua haluamallasi tavalla ja palauttaa sen ennalleen yksinkertaisesti lataamalla muokatun verkkosivun uudelleen.
Vaihe
Osa 1/2: Elementtien tarkastus
Vaihe 1. Päivitä Firefox (valinnainen)
On mahdollista, että et voi käyttää tässä artikkelissa käsiteltyjä ominaisuuksia, jos käytät vanhempaa Firefox -versiota. Päivitys asennetaan automaattisesti, kun tarkistat käyttämäsi Firefox -version.
Firefox 9 ja aiemmat versiot eivät sisällä "Tarkasta elementti" -työkalua lainkaan
Vaihe 2. Napsauta mitä tahansa verkkosivun elementtiä hiiren kakkospainikkeella
Voit napsauttaa mitä tahansa kuvaa, tekstiä, taustaa tai elementtiä hiiren kakkospainikkeella. Jos hiiressäsi on vain yksi painike, hiiren kakkospainikkeella ja Control-näppäimellä saadaan aikaan hiiren kakkospainike.
Vaihe 3. Napsauta avattavasta valikosta "Tarkista elementti"
Työkalurivi tulee näkyviin ikkunan alaosaan. Työkalurivin alapuolelle tulee myös paneeli, joka näyttää HTML -koodin aktiivisella sivulla.
Vaihe 4. Tutustu olemassa oleviin työkaluriveihin ja paneeleihin
Kun käytät "Tarkista elementti", selainikkunan alle avautuu useita paneeleja. Seuraavassa kuvataan "Tarkasta elementti" -työkalurivien ja paneelien nimet ja toiminnot:
- Ylärivillä on Toolbox -työkalupalkki. Täältä löytyy useita työkaluja, mutta keskitymme vasemmalla olevaan Tarkastaja -painikkeeseen. Varmista, että tämä painike on aktiivinen (osoitettuna painikkeen värillä, joka muuttuu siniseksi, kun se on aktiivinen) koko tämän oppaan aikana.
- Sen alla on rivi HTML -elementtien korppujauhoja, jotka osoittavat valitun elementin sijainnin.
- Navigointikehotteiden alla olevassa ruudussa näkyy verkkosivun HTML -puu tai "Merkintänäkymä". Valitun elementin HTML -koodi merkitään ja keskitetään tähän ruutuun.
- Oikealla oleva ruutu näyttää nykyisen verkkosivun CSS -tyylitaulukon.
Vaihe 5. Valitse toinen elementti
Kun työkalurivi on auki, voit helposti valita muita elementtejä. Voit tehdä tämän kolmella tavalla:
- Vie hiiri HTML -rivin päälle merkitäksesi valitun elementin (tämä ominaisuus vaatii Firefox 34+). Valitse kyseinen elementti napsauttamalla HTML -koodia.
- Napsauta työkalurivin vasemmassa kulmassa olevaa "Valitse elementti" -työkalua: siinä on kohdistimen muotoinen kuvake laatikon yläpuolella. Merkitse elementti siirtämällä kohdistinta verkkosivulla ja valitse se napsauttamalla.
Vaihe 6. Jäljitä HTML -koodi
Napsauta mitä tahansa HTML -ruudun kohtaa. Käytä näppäimistön vasenta ja oikeaa suuntanäppäintä siirtyäksesi koodista koodiin (tämä ominaisuus vaatii Firefox 39+). Tämä menetelmä on hyödyllinen valittaessa elementtejä, jotka ovat liian pieniä, jotta niitä voidaan valita kohdistimella.
- Harmaana näkyvä HTML -koodi ilmaisee elementtejä, joita ei näytetä sivulla. Tähän sisältyvät elementit ovat kommentteja, kuten solmuja, ja muut CSS -näyttöominaisuuden piilottamat elementit.
- Näytä tai piilota sisältö napsauttamalla ruudun vasemmalla puolella olevaa nuolta. Jos haluat näyttää koko sisällön, pidä alt="Kuva" tai vaihtoehto painettuna samalla, kun napsautat nuolta.
Vaihe 7. Etsi elementti
Etsi hakukenttä (silmukan muotoinen kuvake) korppujauhojen rivin oikeasta alakulmasta. Laajenna hakukenttää napsauttamalla ja kirjoita HTML -koodi, jota haluat etsiä. Kun kirjoitat, näkyviin tulee ponnahdusikkuna, jossa näkyvät vastaavat hakutulokset. Napsauta elementtiä hakutuloksista ja vieritä HTML -ruutu etsimäsi koodin kohdalle.
Osa 2/2: HTML -muokkaaminen
Vaihe 1. Aloita alusta lataamalla sivu uudelleen
Jos olet uusi verkkosivustojen kehittämistyökaluissa, muista, ettet tee pysyviä muutoksia muokkaamiisi sivuihin. Muokkauksesi näkyvät näytölläsi vain, kunnes lataat tai suljet sivun uudelleen. Kokeile rohkeasti, vaikka et tiedä mitä tapahtuu.
Vaihe 2. Kaksoisnapsauta muokattavaa HTML -koodia
Kaksoisnapsauta upotettua HTML -koodia. Kirjoita uusi teksti ja tallenna muutokset painamalla Enter.
Vaihe 3. Tuo lisää vaihtoehtoja näkyviin napsauttamalla työkalua leivänmurussa
Huomaa, että navigointipaneelin työkalurivi sijaitsee HTML -puun ja sen yläpuolella olevan työkalurivin välissä. Napsauta ja pidä pohjassa tämän rivin työkalua avataksesi lisää valikoita. Alla on vihje käytettävissä olevista vaihtoehdoista (ei tyhjentävä):
- "Muokkaa HTML -muodossa" -toiminnon avulla voit muokata kaikkea HTML -sisällön HTML -puusta suoraan kunkin rivin muokkaamisen sijaan.
- "Kopioi sisäinen HTML" kopioi koko sisällön solmun sisällä, kun taas "Kopioi ulompi HTML" kopioi sisällön ja solmut (kuten tai
- "Liitä →" tuo esiin useita vaihtoehtoja kopion liittämiselle, kuten ennen solmua tai solmun ensimmäisen lapsen jälkeen.
- : hover,: active ja: focus muuttavat elementin ulkoasua, kun käyttäjä on vuorovaikutuksessa. Muutetut tehosteet määritetään CSS -tyylitaulukosta (muokattavissa oikealla olevasta paneelista).
Vaihe 4. Vedä ja pudota
Jos haluat järjestää koodin elementtejä uudelleen, napsauta HTML -koodia ja pidä sitä painettuna, kunnes pisteviiva tulee näkyviin. Siirrä viivaa puussa ylös ja alas ja vapauta hiiren painike, kun viiva on haluamassasi paikassa.
Tämä ominaisuus vaatii Firefox 39: n ja uudemmat
Vaihe 5. Sulje kehittäjän työkalurivi
Sulje koko Inspect Element -ikkuna napsauttamalla XS -painiketta työkalupalkin oikeassa yläkulmassa CSS -paneelin yläpuolella.
Vinkkejä
- Voit myös avata työkalurivin ikkunan yläreunan valikkovaihtoehdoista:
- Windows: Firefox → Web -kehittäjä → Vaihda työkalut
- Mac tai Linux: Työkalut → Web -kehittäjä → Vaihda työkalut
- Firefox 40: llä on mahdollisuus piilottaa CSS -paneeli, jotta sinulla on enemmän tilaa muokata HTML -koodia. Etsi nuolikuvake korppujauhojen rivin oikeasta reunasta ja hakukentän oikealta puolelta. Piilota CSS -paneeli napsauttamalla tätä kuvaketta ja tuo se esiin napsauttamalla uudelleen.
- Voit myös muokata CSS -paneeleja, mutta niitä ei ole lueteltu tässä artikkelissa. Löydät ohjeet CSS -koodin muokkaamiseen Internetistä.
