Inspect Element, jota kutsutaan myös Inspectiksi, on monipuolinen selaimiin rakennettu työkalu. Toisin kuin yleinen väärinkäsitys, se on yhtä arvokas suunnittelijoille ja kehittäjille kuin satunnaisille käyttäjille. Satunnaisena käyttäjänä voit käyttää Inspect Elementiä macOS-laitteissa saadaksesi lisätietoja verkkosivusta, poimiaksesi tietoja verkkosivulta tai muokataksesi verkkosivun sisältöä muun muassa.
Jatka lukemista, niin näytän sinulle, kuinka Inspect Elementiä käytetään Macissasi.
Mikä on Inspect Element?
Jos olet aina miettinyt, mikä saa verkkosivuston toimimaan, mukaan lukien se, jolla olet tällä hetkellä, tässä on analogia, joka voi auttaa. Ajattele verkkosivustoa rakennuksena: rakenne ja kehys on muotoiltu HTML:llä ja JavaScriptillä, kun taas CSS lisää maalia ja sisustusta.
Inspect Elementin avulla voit irrottaa tasot nähdäksesi minkä tahansa verkkosivun suunnitelman. Mutta siinä on muutakin, ja voit käyttää Inspect Elementiä tehdäksesi monia muita asioita, kuten:
- Vianetsintävirheet koodissa: Voit nopeasti tarkistaa ja ratkaista HTML-, CSS- tai JavaScript-ongelmat.
- Testaa suunnittelumuutoksia: Voit jopa kokeilla asetteluja, värejä ja fontteja.
- Analysoi verkkosivuston suorituskykyä: Voit tarkistaa verkkosivuston reagointikyvyn ja ymmärtää latauskäyttäytymistä.
- Kopioi elementtejä: Voit helposti napata tekstiä, kuvia tai tyylejä verkkosivustoilta, kunhan et riko mitään.
- Muokkaa sisältöä väliaikaisesti: Voit muokata tekstiä, kuvia tai muita elementtejä, jotka näkyvät reaaliajassa.
- SEO:n ymmärtäminen: Voit analysoida sisällönkuvauskenttiä, otsikoita (H1, H2, H3…) ja avainsanojen sijoittelua.
Inspect Elementin käyttäminen eri selaimissa
Nyt kun sinulla on peruskäsitys siitä, mitä Inspect Element voi tehdä, katsotaanpa, kuinka voit käyttää sitä Macissasi eri selaimissa. Voit käyttää Inspect Elementiä suosituissa selaimissa, kuten Safarissa, Chromessa ja Firefoxissa. Näytän sinulle kuinka.
Safarilla
- Avaa Safari.
- Napsauta ylävalikkopalkissa Safari ja valitse Asetukset.
- Siirry Lisäasetukset-välilehteen ja varmista, että otat käyttöön Näytä ominaisuudet verkkokehittäjille -vaihtoehdon.
- Siirry verkkosivulle, jota haluat analysoida tai muokata, Control-klikkaa mitä tahansa elementtiä ja valitse Tarkista elementti.
Chromessa
- Avaa Chrome ja siirry tarkastettavalle verkkosivulle.
- Control-osoita mitä tahansa sivun kohtaa ja valitse Tarkista. Vaihtoehtoisesti voit käyttää Command+Option+I-pikanäppäintä tuodaksesi DevTools-paneelin näkyviin.
Firefoxilla
- Avaa Firefox ja siirry verkkosivustolle, jonka haluat tarkistaa.
- Control-osoita mitä tahansa elementtiä ja valitse Tarkista. Tai tuo kehittäjätyökalut näkyviin painamalla Command+Option+I.
Kuinka käyttää Inspect Elementiä verkkosivun muokkaamiseen
Kuten jo mainittiin, voit käyttää Inspect Elementiä verkkosivuston sisällön väliaikaiseen muokkaamiseen, mikä voi olla hyödyllistä suunnittelukokeilussa, muutosten testaamisessa tai vain kepposissa. Voit tehdä tämän seuraavasti.
Muokkaa tekstiä verkkosivulla
- Avaa verkkosivu ja valitse teksti, jota haluat muokata.
- Control-osoita tekstiä ja valitse Tarkista.
- Näet nyt valitun elementin HTML-koodin korostettuna Kehittäjätyökalut-paneelissa. Napsauta sitä, kirjoita uusi teksti ja paina Return.
Muutokset näkyvät välittömästi verkkosivulla. Huomaa kuitenkin, että ne ovat väliaikaisia.
Vaihda verkkosivulla olevia kuvia
- Control-osoita muokattavaa kuvaa ja valitse Tarkista.
- Etsi Kehittäjätyökalut-paneelista src-attribuutilla varustettu tagi. (Tässä src tarkoittaa kuvan lähdettä.)
- Korvaa URL-osoite src-attribuutissa sen uuden näytettävän kuvan URL-osoitteella.
- Paina Return, niin kuva päivittyy välittömästi.
Muokkaa värejä ja tyylejä
- Control-klikkaa elementtiä, jonka tyyliä haluat muuttaa, ja valitse Tarkista.
- Siirry Kehittäjän työkalut -paneelin Tyylit-osioon.
- Muokkaa CSS-ominaisuuksia, kuten väriä, fonttikokoa tai taustaväriä, suoraan paneelissa. Voit tarkistaa HTML-värikoodit saadaksesi nopeasti HTML-värikoodit.
Korvaa hyperlinkit
- Control-osoita hyperlinkkiä ja valitse Tarkista.
- Etsi tunniste HTML-koodista href-attribuutilla.
- Muuta href-arvo eri URL-osoitteeksi ja paina Return.
- Napsauta muokattua linkkiä testataksesi uutta kohdetta.
Kirjaudutaan ulos…
Kuten juuri huomasit, Inspect Elementin avulla voit helposti suorittaa erilaisia manipulaatioita ja toimintoja verkkosivulla Macissa. Tietysti saatat tuntea olosi peloissasi katsoessasi verkkosivuston koodia aluksi, mutta kun käytät työkalua yhä useammin, tunnet olevasi rauhassa ja pystyt tekemään paljon enemmän kuin mitä olemme käsitelleet oppaassa.
UKK
Ei, muutokset näkyvät vain sinun päässäsi ja katoavat, kun sivu päivitetään. Ne eivät vaikuta varsinaiseen verkkosivustoon tai muihin käyttäjiin.
Inspect Elementin avulla voit oppia verkkosivustojen toiminnasta tai kokeilla suunnittelua. Sivuston koodin kopioiminen, rajoitusten ohittaminen tai tietojenkalastelu voi kuitenkin olla laitonta ja saattaa johtaa vaikeuksiin asuinpaikastasi riippuen.
Elementin poistaminen Inspect Elementista piilottaa sen vain väliaikaisesti. Voit päivittää sivun palauttaaksesi kaiken alkuperäiseen tilaan.
Lue lisää:
- Safari vs. Chrome: Mikä selain on parempi iPhonelle ja Macille?
- Kuinka vaihtaa oletusselainta Macissa
- Parhaat iOS-emulaattorit PC:lle
