Mitä tietää
-
Safarissa: Napsauta verkkosivua hiiren kakkospainikkeella ja valitse Tarkista elementti.
- Chromessa voit napsauttaa hiiren kakkospainikkeella ja napsauttaa Tarkista.
- Ominaisuuden käyttöönotto Safarissa: Safari > Preferences > Lisäasetukset 643344 Näytä Kehitys-valikko valikkopalkissa-laatikko.
Tässä artikkelissa kerrotaan, kuinka voit tarkistaa verkkosivuston elementin Macissa. Siinä tarkastellaan, kuinka se tehdään Safarin ja Google Chromen kautta.
Kuinka käytät Inspect Element -ominaisuutta Macissa?
Ennen kuin tarkastat elementtejä Macissa Safaria käytettäessä, sinun on otettava kehittäjävalikko käyttöön selaimessa. Tässä on katsaus siihen, miten se kytketään päälle ja mitä tehdä elementin tarkastamiseksi.
Jos näet Kehitä kirjanmerkkien ja ikkunan välillä, kehittäjävalikko on jo otettu käyttöön ja voit siirtyä vaiheeseen 4.
Tarkista elementti -ominaisuuden käyttäminen Safarissa
Näin voit käyttää Inspect Elementiä Safarissa, Mac-tietokoneiden oletusselaimessa.
-
Klikkaa Safarissa Safari > Preferences.
Image -
Napsauta Lisäasetukset.
Image -
Napsauta valikkopalkissa Näytä kehitysvalikko ja sulje ikkuna.
Image - Kun selaat verkkosivustoa, napsauta hiiren kakkospainikkeella kohdetta, jonka haluat tarkastaa.
-
Napsauta Tarkista elementti.
Image -
Voit nyt tarkastella koodia tarkastamasi verkkosivuston takana.
Image
Tarkista elementti -ominaisuuden käyttäminen Chromessa Macissa
Jos käytät Chromea Safarin sijaan Macissa, elementin katseleminen on vieläkin helpompaa, koska ominaisuutta ei tarvitse ottaa käyttöön. Tässä on mitä tehdä.
- Selaa verkkosivustolle Chromessa.
- Napsauta hiiren kakkospainikkeella elementtiä, jonka haluat tarkastaa.
-
Napsauta Tarkista.
Image -
Voit nyt tarkastella koodia sivuikkunassa Chromessa.
Image
Miksi en voi tarkastaa Macillani?
Et ehkä pysty tarkastamaan Mac-tietokoneesi elementtiä, jos et ole ottanut Kehittäjä-valikkoa käyttöön Safarissa. Tässä on muistutus siitä, kuinka se tehdään.
-
Klikkaa Safarissa Safari > Preferences.
Image -
Napsauta Lisäasetukset.
Image -
Napsauta valikkopalkissa Näytä kehitysvalikko ja sulje ikkuna.
Image
Kuinka tehdä muutoksia verkkosivustoon tarkastamalla elementti
Sen lisäksi, että voit tarkastella koodia verkkosivustolla, on myös mahdollista muuttaa väliaikaisesti mitä tahansa verkkosivuston elementtiä Inspect Elementin avulla. Näin voit tehdä sen Safarin kautta.
Prosessi on hyvin samanlainen muissa selaimissa.
- Kun selaat verkkosivustoa, napsauta hiiren kakkospainikkeella kohdetta, jonka haluat tarkastaa.
- Napsauta Tarkista elementti.
- Kaksoisnapsauta koodin tekstiä, jotta se on muokattavissa.
- Poista se tai kirjoita uusi tekstijono.
- Napauta Enter.
- Koodia on nyt väliaikaisesti muutettu vain sinun hyödyksesi.
Miksi haluat käyttää Inspect Element -ominaisuutta?
Elementin tarkastaminen on hyödyllistä monista syistä.
- Koodin muuttaminen lennossa. Verkkosivustojen suunnittelijat voivat tilapäisesti muuttaa asioita verkkosivustolla nähdäkseen, kuinka muutokset vaikuttavat asioihin.
- Tarkista koodi. Sekä suunnittelijat että markkinointihenkilöt voivat tarkistaa koodin varmistaakseen, että siellä on esimerkiksi Google Analytics -tiedot.
- Kuvien katseleminen erillään sivustosta. Jos sivusto ei salli kuvan avaamista uudessa välilehdessä tai ikkunassa, elementin tarkastelu mahdollistaa sen.
-
Tinker. Verkkosivun koodin näkeminen voi auttaa sinua ymmärtämään näkemäsi ja poistamaan mysteerin siitä, mitä ja miksi sivustollasi tapahtuu. Se on kuin purkisit laitteen osiin nähdäksesi, miten se toimii, mutta tässä tapauksessa ei ole hukattavia ruuveja.
UKK
Onko verkkosivuston tarkastaminen laillista?
Kyllä. Jos kuitenkin aiot käyttää koodia tai resursseja verkkosivustolta, muista kysyä asiasta omistaj alta ja lisätä tekijänoikeushuomautus.
Kuinka kopioin HTML-koodin verkkosivustolta, jossa on tarkastuselementti?
Napsauta Chromessa sivua hiiren kakkospainikkeella ja valitse Tarkista, siirry sitten yläosaan ja napsauta tunnistetta hiiren kakkospainikkeella (esim. Valitse Kopioi > Kopioi ulkoinenHTML ja liitä koodi teksti- tai HTML-tiedostoon.
Voinko kopioida CSS:n verkkosivustolta, jossa on tarkastuselementti?
Kyllä. Napsauta hiiren kakkospainikkeella elementtiä, jonka haluat kopioida, ja valitse Tarkista. Napsauta korostettua koodia hiiren kakkospainikkeella ja valitse Kopioi > Kopioi tyylit.
Kuinka näen tallennetut salasanani tarkastuselementillä?
Jos haluat paljastaa piilotetut salasanat, napsauta salasanan tekstiruutua hiiren kakkospainikkeella ja valitse Tarkista. Etsi korostetusta osiosta type=”password” ja korvaa salasana text. On olemassa helpompia tapoja näyttää kaikki salasanasi Chromessa.
