Elementtien tarkastaminen Safarissa, Chromessa ja Firefoxissa Macissa

Elementtien tarkastaminen on olennainen taito, jonka avulla kuka tahansa voi ymmärtää, miten verkkosivusto rakennetaan, ja tehdä tarvittavia muutoksia. Sinun ei tarvitse olla verkkokehittäjä hyötyäksesi elementtien tarkastamisesta Macissa millä tahansa nykyaikaisella selaimella muutamalla yksinkertaisella napsautuksella. Onneksi elementtien tarkastus on sisäänrakennettu työkalu kaikissa nykyaikaisissa selaimissa, etkä tarvitse siihen erityisiä ohjelmistoja. Tämä opetusohjelma sisältää vaiheittaiset ohjeet elementtien tarkastamiseen Safarissa, Chromessa ja Firefoxissa Macissa.

Mikä on elementtien tarkastaminen?

Inspect Elements on kaikkien nykyaikaisten verkkoselaimien tehokas ominaisuus, jonka avulla voit oppia lisää verkkosivusta, kuten sen rakenteesta, asettelusta ja tyylistä. Kehittäjät ja verkkosisällön suunnittelijat käyttävät usein näitä työkaluja verkkoprojektin virheenkorjaukseen, kokeiluun ja vianetsintään. Voit helposti valita verkkosivuston elementin, ja tarkistustyökalu antaa kaikki tiedot tietyn elementin alla, kuten värin, fontin, koon ja muut elementit.

Tarkastustyökalun avulla voit myös muokata koodia väliaikaisesti ja tarkastella verkkosivulle sovellettavia muutoksia reaaliajassa. Muutokset näkyvät kuitenkin vain sinulle. Se on tehokas työkalu sinulle, olitpa kokenut kehittäjä tai vain utelias oppimaan, miten tietty verkkosivusto rakennetaan.

Kärki: haluatko vaihtaa Chromesta Firefoxiin oletusselaimeksi? Tarjoamme kaiken mitä tarvitset sujuvan siirtymisen varmistamiseksi.

Kuinka tarkastaa elementit Google Chromessa Macissa

Aloitetaan elementtien tarkastamisesta Chromessa, koska se on suosituin selain. Vaiheet ovat melko yksinkertaisia, joten pääset alkuun hetkessä.

Tarkastuspaneelin avaaminen Google Chromessa

1. Avaa Chrome-selain ja siirry mille tahansa verkkosivustolle, jonka haluat tarkistaa.

2. Napsauta hiiren kakkospainikkeella mitä tahansa tyhjää kohtaa ja valitse "Tarkista".

3. Näet tarkastuspaneelin näytölläsi.

Hyvä tietää: et käytä Chrome for Macia? Tutustu Google Chromen "Tarkista"-työkalun käyttämiseen verkkosivustojen diagnosointiin Windows-tietokoneessa.

Verkkosivun tietyn osan tarkastaminen Google Chromessa

Nyt kun olet avannut tarkastuspaneelin onnistuneesti, opimme käyttämään elementtiä.

1. Napsauta tarkastuspaneelin vasemmassa kulmassa "Valitse elementti tarkastaaksesi sen".

2. Valitse mikä tahansa elementti. Tässä esimerkissä tarkastamme verkkosivulla olevaa kuvaa. Voit tehdä tämän millä tahansa elementillä haluat. Näet valkoisen laatikon, jossa on perustietoja, kuten elementin tyyppi, tiedoston nimi jne. Oikealla puolella näet kyseiseen elementtiin liittyvän koodin.

Kuinka tarkastella verkkosivuston mobiiliversiota Google Chromessa

1. Napsauta tarkastuspaneelin vasemmalla puolella vaihtoehtoa "Toggle Device Toolbar".

2. Näet verkkosivuston reagoivan mobiililaitteella. Voit silti suorittaa tarkastuksen napsauttamalla elementtiä, ja tiedot perustuvat älypuhelimiin.

3. Jos napsautat yllä olevaa "Responsive" -pudotusvalikkoa, voit valita haluamasi laitteen luettelosta. Kun teet niin, näet, kuinka verkkosivu reagoi tiettyyn älypuhelinmalliin.

Tarkastuspaneelin sijainnin muuttaminen Google Chromessa

1. Napsauta pystysuoraa kolmen pisteen ellipsiä tarkastuspaneelin oikeasta kulmasta.

2. Valitse tarkastustelakan sijainti: vasemmalta, alapuolelta tai ponnahdusikkunasta.

Kuinka tarkastaa elementit Safarissa Macissa

Tarkista elementit -ominaisuus on oletuksena pois päältä Safarissa, koska se on osa kehittäjävaihtoehtoa. Joten ensin meidän on otettava käyttöön "Kehitysvalikko".

Kärki: siirrytäänkö Chromesta Safariin oletusselaimeksi Macissa? Meillä on kaikki vaiheet, joiden avulla voit siirtyä menettämättä suosikkikirjanmerkkejäsi, laajennuksiasi ja paljon muuta.

Tarkastuspaneelin avaaminen Safarissa

1. Kun avaat Safarin ja olet jo tarkastettavalla verkkosivustolla, napsauta "Safari" -kuvaketta ylävalikkopalkissa ja valitse "Asetukset".

2. Tämä vie sinut "Yleiset"-välilehdelle. Valitse oikeasta reunasta "Lisäasetukset" -välilehti.

3. Napsauta "Näytä kehitysvalikko valikkorivillä" -kohdan vieressä olevaa valintaruutua, jotta pääset käyttämään kaikkia Safarin lisäominaisuuksia.

4. Napsauta hiiren kakkospainikkeella mitä tahansa verkkosivuston kohtaa ja valitse "Tarkista elementti". Tämä avaa tarkastuselementtien paneelin Safarissa.

5. Jos haluat lisäasetuksia, napsauta valikkorivin "Kehitä"-välilehteä.

Web-sivun tietyn osan tarkistaminen Safarissa

1. Napsauta tarkastusruudun vasemmassa kulmassa olevaa "tarkista"-kuvaketta, joka näyttää napakymppiltä.

2. Käytä kohdistinta ja valitse elementti, jonka haluat tarkastaa. Tarkastamme tämän esimerkin otsikkotunnistetta, mutta voit tarkastaa minkä tahansa elementin, jonka haluat.

Kuinka tarkastella verkkosivuston mobiiliversiota Safarissa

1. Napsauta ylävalikkopalkissa "Kehitä" -vaihtoehtoa ja valitse "Siirry reagoivaan suunnittelutilaan".

2. Valitse mikä tahansa laitemalli, jota haluat käyttää verkkosivun tarkastamiseen.

Tarkastuspaneelin sijainnin muuttaminen Safarissa

Valitse tarkastuspaneelin vasemmalta puolelta haluamasi sijainti, ja tarkastusruutua siirretään vastaavasti.

Elementtien tarkastaminen Macin Firefoxissa

Firefox on suosittu valinta kokeneiden kehittäjien ja suunnittelijoiden keskuudessa verkkoprojektien parissa. Katsotaanpa, kuinka voimme tarkastaa elementtejä Macin Firefoxissa.

Kärki: et käytä Firefoxia Macissa? Opi käyttämään Firefoxin "Tarkista elementti" -työkalua verkkosivuston tutkimiseen Windows-tietokoneessa.

Tarkastuspaneelin avaaminen Firefoxissa

1. Kun olet verkkosivulla, jonka haluat tarkistaa Firebox-selaimessa, napsauta hiiren kakkospainikkeella ja valitse "Tarkista".

2. Tämä avaa Firefox-selaimen tarkistuspaneelin.

Web-sivun tietyn osan tarkastaminen Firefoxissa

1. Napsauta "kohdistin" -kuvaketta, jonka näet tarkastuspaneelin vasemmassa kulmassa.

2. Siirrä kohdistin tarkastettavan elementin kohdalle. Tässä esimerkissä tarkastamme otsikkotunnistetta, mutta voit tehdä tämän millä tahansa haluamallasi elementillä.

Kuinka tarkastella verkkosivuston mobiiliversiota Firefoxissa

1. Napsauta tarkastuspaneelin oikeasta kulmasta älypuhelimen kuvaketta.

2. Tämä muuntaa ja lataa verkkosivuston älypuhelimen muotoiseksi katseluohjelmaksi. Voit napsauttaa "Responsiivinen"-kytkintä valitaksesi haluamasi mobiililaitteen.

Tarkastuspaneelin sijainnin muuttaminen Firefoxissa

1. Napsauta tarkastustelakan oikeassa kulmassa olevaa vaakasuuntaista kolmen pisteen ellipsiä.

2. Valitse sijainti, jonka haluat ottaa käyttöön, ja tarkastuspaneeli siirretään vastaavasti.

Usein Kysytyt Kysymykset

Miten elementtien tarkasteleminen eroaa sivun lähteen tarkastelusta?

Inspect elements on kehittäjätyökalu, joka on sisäänrakennettu nykyaikaisiin selaimiin, jotta se voi olla vuorovaikutuksessa, muokata ja suorittaa vianetsintää verkkosivun HTML-, CSS- ja JavaScript-koodin suhteen. Kun tarkistat verkkosivun sivulähteen, näet yksinkertaisesti staattisen HTML-koodin, jonka palvelin on toimittanut selaimeen. Voit analysoida yleistä rakennetta, sisältöä ja tunnisteita, kuten metatietoja jne., mutta tarkistustyökalu renderöi verkkosivun kaikkine elementteineen, korjaa virheet ja paljon muuta.

Mitä muita tietoja voin löytää elementtien tarkastustyökalun avulla?

Tarkastuselementtien avulla saat kattavan kuvan verkkosivuston rakentamisesta. Pääset käsiksi varsinaiseen HTML-koodiin hierarkialla ja sisäkkäisillä. Voit muokata CSS:ää ja nähdä muutokset reaaliajassa, mukaan lukien elementit, kuten väri, kirjasinkoko jne. Voit myös nähdä JavaScript-koodin, jonka avulla voit korjata koodin virheitä ja analysoida sitä. "Verkkopyynnöt" -ominaisuuden avulla on helpompi ymmärtää ulkoisesti ladattavia resursseja, kuten konsolin lähtöfontteja, DOM-käsittelyä ja paljon muuta.

Näkevätkö verkkosivustojen omistajat tarkastettavat elementit verkkosivustollaan?

Teknisesti kyllä. Selvennykseksi totean, että kaikilla nykyaikaisilla verkkosivuilla on asennettuna analytiikka ja muut seurantatyökalut, jotka käytännössä seuraavat kaikkea, mitä teet verkkosivustolla, siitä kuinka kauan pysyt sivustolla ja mihin napsautat. Sivusto ei kuitenkaan koskaan tunnista sinua henkilökohtaisesti, ja olet vain tietopiste käyttäjäryhmässä, joka vastaa demografisia tietojasi ja käyttäytymistäsi. Nämä järjestelmät ovat käytössä seuraamaan verkkosivuston suorituskykyä ja parantamaan käyttökokemusta.

Nyt kun olet lukenut Elementtien tarkastaminen Safarissa, Chromessa ja Firefoxissa Macissa loppuun, kutsumme sinut tutustumaan lisää Mac-kategoriaan. Löydät sieltä muita mielenkiintoisia artikkeleita, jotka laajentavat tietojasi ja pitävät sinut ajan tasalla. Älä lopeta lukemista ja löytämistä!