Katso minkä tahansa verkkosivun HTML ja CSS
Sivusto on rakennettu koodilinjojen kanssa, mutta tulos on tiettyjä sivuja, joissa on kuvia, videoita, fontteja ja paljon muuta. Jos haluat muuttaa jonkin näistä elementeistä tai katsoa, mistä se koostuu, sinun on löydettävä tarkka koodi. Voit tehdä sen elementtitarkastustyökalulla.
Useimmat verkkoselaimet eivät lataa tarkastustyökalua tai asenna lisäosaa. Sen sijaan ne antavat sinun napsauttaa hiiren kakkospainikkeella sivun elementtiä ja valita Tarkasta tai tarkasta elementti . Prosessi saattaa kuitenkin olla hieman erilainen selaimessasi.
Tarkastele elementtejä Chrome
Google Chromen viimeisimmistä versioista voit tarkastella sivua muutamilla tavoilla, jotka kaikki käyttävät sisäänrakennettua Chrome DevToolsia:
- Napsauta hiiren kakkospainikkeella jotain sivulla (tai tyhjää aluetta) ja valitse Tarkista
- Syötä Ctrl + Shift + I -näppäimistön pikavalinta
- Käytä Chrome-valikkoa valitsemalla Lisää työkaluja> Kehittäjätyökalut -vaihtoehto
Chrome DevToolsin avulla voit helposti kopioida tai muokata HTML-rivejä tai piilottaa tai poistaa elementtejä kokonaan (kunnes sivu päivitetään uudelleen).
Kun DevTools avautuu sivun puolelta, voit vaihtaa sen sijainnin, ponnahdusikkunan sivulta, etsiä kaikki sivun tiedostot, valita sivun elementit tarkkaan tutkimukseen, kopioida tiedostoja ja URL-osoitteita ja jopa muokata joukkoa asetuksista.
Tarkista elementit Firefoxista
Kuten Chrome, Firefoxilla on muutamia eri tapoja avata työkalu nimeltä Inspector:
- Napsauta hiiren kakkospainikkeella tyhjää aluetta sivulla tai valitse elementti ja valitse Tarkasta elementti
- Syötä Ctrl + Shift + T tai Ctrl + Shift + I näppäimistöllä
- Valitse Firefox-valikosta Developer > Inspector
- Valitse Työkalut- valikosta Web-kehittäjä> Tarkastaja
Kun siirrät hiirtä eri Firefox-elementtien päälle, Tarkastaja -työkalu löytää automaattisesti elementin lähdekooditiedot. Napsauta elementtiä ja "lennon haku" pysähtyy ja voit tarkastella elementtiä Tarkastajan ikkunasta.
Napsauta hiiren kakkospainikkeella elementtiä löytääksesi kaikki tuetut ohjaimet. Voit tehdä asioita, kuten muokata sivua HTML: ksi, kopioida tai liittää sisäisen tai ulkoisen HTML-koodin, näyttää DOM-ominaisuuksia, kuvakaappauksen tai poistaa solmun, soveltaa uusia ominaisuuksia helposti, katsoa koko sivun CSS ja paljon muuta.
Tarkasta elementit Opera
Opera voi tarkastaa elementtejä myös DOM Inspector -työkalulla, joka on identtinen Chromen kanssa. Näin pääset siihen:
- Käytä pikanäppäimiä Ctrl + Shift + I
- Siirry Valikko> Lisää työkaluja> Näytä kehittäjävalikko ja avaa valikko Valikko> Kehittäjät> Kehittäjätyökalut
- Napsauta hiiren kakkospainikkeella mitä tahansa sivun elementtiä , valitse Tarkasta elementti
Tarkasta elementit Internet Explorerissa
Internet Explorerissa on saatavana vastaava tarkistuselementtityökalu, jota kutsutaan Kehittäjätyökaluiksi:
- Paina näppäimistön F12 näppäintä
- Käytä Työkalut> F12-kehittäjävalikko -vaihtoehtoa (paina Alt + X, jos työkaluja ei näy)
- Napsauta hiiren kakkospainikkeella sivua ja valitse Tarkasta elementti
IE: ssä on Select element -työkalu tässä uudessa valikossa, jonka avulla voit napsauttaa mitä tahansa sivun elementtiä nähdäksesi sen HTML- ja CSS-yksityiskohdat. Voit myös poistaa tai ottaa käyttöön elementin korostuksen helposti, kun selaat DOM Explorer -välilehteä.
Kuten muiden elementtien tarkastajien työkaluja edellä olevissa selaimissa, Internet Explorerin avulla voit leikata, kopioida ja liittää elementtejä sekä muokata HTML: ää, lisätä attribuutteja, kopioida elementtejä liitetyillä tyylillä ja muilla.