Mitä tietää
- Chrome, Firefox tai Safari: Napsauta hiiren kakkospainikkeella elementtiä ja valitse Tarkastaa.
- Ota Internet Explorerissa tai Edgessä käyttöön tarkastukset, napsauta hiiren kakkospainikkeella elementtiä ja valitse Tarkastele elementtiä.
Tässä artikkelissa kerrotaan, miten tarkastetaan elementtejä Chromessa, Firefoxissa, Safarissa, Internet Explorerissa ja Microsoft Edgessä, mukaan lukien miten tarkastukset otetaan käyttöön IE: ssä ja Edgessä.
Kuinka tarkastaa verkkosivuja selaimellasi
Verkkosivustot on rakennettu koodiriveistä, mutta tulokset ovat sivuja, joissa on kuvia, videoita, fontteja ja muita ominaisuuksia. Jos haluat muuttaa yhtä näistä elementeistä tai nähdä, mistä se koostuu, etsi sitä ohjaava koodirivi. Käytä sitä elementtien tarkastustyökalulla. Sinun ei tarvitse ladata tarkastustyökalua tai asentaa lisäosaa suosikkiselaimellesi. Napsauta sen sijaan hiiren kakkospainikkeella sivuelementtiä ja valitse sitten Tarkastaa tai Tarkastele elementtiä. Kuinka käytät tätä työkalua, vaihtelee kuitenkin selaimen mukaan.
Tässä artikkelissa käytetään oikein-klikkaus viittaa hiiren laitteen toimintaan Windows-tietokoneessa ja Ohjaus+klikkaus toiminto Macissa.
Tarkasta elementit Google Chromessa
Sisään Google Chrome, on kaksi tapaa tarkistaa verkkosivu selaimen sisäänrakennetulla tavalla Chrome DevTools:
- Napsauta hiiren kakkospainikkeella sivun tai tyhjän alueen elementtiä ja valitse sitten Tarkastaa.
- Mene Kromi ja valitse sitten Lisää työkaluja > Kehittäjän työkalut.
Kopioi tai muokkaa Chrome DevTools -sovellusta Hypertekstimerkintäkieli (HTML) -merkintä ja piilota tai poista elementtejä, kunnes sivu latautuu uudelleen.
Kun Chrome DevTools avautuu sivun reunaan, muuta sijaintia, pudota se sivulta ja etsi sivutiedostot, valitse sivun elementit tarkempaa tarkastelua varten, kopioi tiedostot ja URL-osoitteet ja mukauta asetukset.
Tarkasta elementit Mozilla Firefoxissa
Mozilla Firefox on kaksi tapaa avata tarkastustyökalunsa, nimeltään Tarkastaja:
- Napsauta hiiren kakkospainikkeella verkkosivun elementtiä ja valitse sitten Tarkastele elementtiä.
- Valitse Firefox-valikkoriviltä Työkalut > Web-kehittäjä > Tarkastaja.
Kun siirrät osoitinta elementtien päälle Firefoxissa, Inspector löytää automaattisesti elementin lähdekooditiedot. Kun valitset elementin, lennonhaku loppuu ja voit tutkia elementti Tarkastaja-ikkunasta.
Napsauta hiiren kakkospainikkeella elementtiä löytääksesi tuetut ohjausobjektit. Muokkaa ohjaimia sivun muokkaamiseksi HTML-merkinnöinä, kopioimiseksi tai liittämiseksi sisäisen tai ulkoisen HTML-merkinnän näyttämiseen Document Object Model (DOM) -ominaisuudet, ota kuvakaappaus tai poista solmu, käytä uusia määritteitä, katso CSS-tyyliarkit (CSS) ja paljon muuta.
Tarkasta elementit Safarissa
Verkkoelementtejä voi tutkia muutamalla tavalla Safari:
- Napsauta hiiren kakkospainikkeella mitä tahansa verkkosivun kohdetta tai tilaa ja valitse sitten Tarkastele elementtiä.
- Mene Kehittää ja valitse sitten Näytä Web Inspector.
Jos et näe Kehitä-valikkoa, siirry Safari ja valitse Asetukset. Sen Pitkälle kehittynyt -välilehdellä Näytä valikkorivin Kehitä-valikko valintaruutu.
Valitse verkkosivun yksittäiset elementit nähdäksesi kyseiselle osalle omistetun merkinnän.
Tarkasta elementit Internet Explorerissa
Vastaava tarkastuselementtityökalu, johon pääsee ottamalla käyttöön kehittäjätyökalut, on käytettävissä Internet Explorerissa. Ota kehittäjätyökalut käyttöön painamalla F12. Tai siirry Työkalut ja valitse Kehittäjän työkalut.
Avaa Työkalut-valikko painamalla Alt + X.
Tarkasta verkkosivun elementit napsauttamalla sivua hiiren kakkospainikkeella ja valitsemalla sitten Tarkastele elementtiä. Valitse Internet Explorer Select element -työkalussa mikä tahansa sivuelementti nähdäksesi HTML- tai CSS-merkinnät. Voit myös poistaa elementtien korostuksen käytöstä tai ottaa sen käyttöön selatessasi DOM Exploreria.
Kuten muutkin elementtitarkastustyökalut, myös Internet Explorer voit leikata, kopioida ja liittää elementtejä ja muokata HTML-merkintää, lisätä määritteitä, kopioida elementtejä, joihin on liitetty tyylejä, ja paljon muuta.
Tarkasta Microsoft Edgen elementit
Ennen kuin voit tarkastaa Microsoft Edgen osia, sinun on otettava tarkastus käyttöön. Tarkastuksen voi ottaa käyttöön kahdella tavalla:
- Siirry osoiteriville ja kirjoita about: liput. Valitse valintaikkunassa Näytä näkymälähde ja Tarkasta elementti pikavalikossa valintaruutu.
- Lehdistö F12ja valitse sitten DOM Explorer.
Tarkista elementti napsauttamalla elementtiä hiiren kakkospainikkeella verkkosivulla ja valitsemalla sitten Tarkastele elementtiä.
