Kuinka tarkastaa elementti Macissa

Mitä tietää

• Safarissa: Napsauta verkkosivua hiiren kakkospainikkeella ja valitse Tarkastele elementtiä†
• Chromessa voit napsauttaa hiiren kakkospainikkeella ja napsauttaa Tarkastaa†
• Ominaisuuden käyttöönotto Safarissa: Safari † Asetukset † Pitkälle kehittynyt > tarkista Näytä Kehitä-valikko valikkorivillä laatikko.

Tämä artikkeli opettaa sinulle, kuinka voit tarkistaa verkkosivuston elementin Macissa. Katsomme, kuinka voit tehdä tämä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. Näin otat sen käyttöön ja mitä tehdä elementin tarkastamiseksi.

Jos näet Kehitä kirjanmerkkien ja ikkunan välillä, kehittäjävalikko on jo käytössä ja voit siirtyä vaiheeseen 4.

Safarin Inspect Element -ominaisuuden käyttäminen

Näin voit käyttää Inspect Elementiä Safarissa, Mac-tietokoneiden oletusselaimessa.

1. Napsauta Safarissa Safari † Asetukset†

2. Klikkaus Pitkälle kehittynyt†

   

3. Klikkaus Näytä Kehitys-valikko valikkorivillä ja sulje sitten ikkuna.

   

4. Kun selaat verkkosivustoa, napsauta hiiren kakkospainikkeella kohdetta, jonka haluat tarkistaa.

5. Klikkaus Tarkastaa Elementti†

   

6. Voit nyt tarkastella koodia tarkistamasi verkkosivuston takana.

   

Tarkista elementti -ominaisuuden käyttäminen Chromessa Macissa

Chromen käyttäminen Safarin sijaan Macissa tekee elementin tarkastelusta entistä helpompaa, koska ominaisuutta ei tarvitse ottaa käyttöön. Tässä on mitä tehdä.

1. Selaa verkkosivustolle Chromessa.

2. Napsauta hiiren kakkospainikkeella elementtiä, jonka haluat tarkastaa.

3. Klikkaus Tarkastaa†

   

4. Voit nyt tarkastella koodia Chromen sivuikkunassa.

   

Miksi en voi tarkastaa Macillani?

Et ehkä voi tarkastaa elementtiä Macissasi, jos et ole ottanut Kehittäjä-valikkoa käyttöön Safarissa. Tässä on muistutus kuinka se tehdään.

1. Napsauta Safarissa Safari † Asetukset†

   

2. Klikkaus Pitkälle kehittynyt†

   

3. Klikkaus Näytä Kehitys-valikko valikkorivillä ja sulje sitten ikkuna.

   

Teetkö muutoksia verkkosivustoon tarkastamalla elementti?

Sen lisäksi, että koodia voi tarkastella verkkosivustolla, on mahdollista myös väliaikaisesti muuttaa verkkosivuston elementtiä Inspect Elementin kautta. Näin teet tämän Safarin kautta.

Prosessi on hyvin samanlainen kuin muissa selaimissa.

1. Kun selaat verkkosivustoa, napsauta hiiren kakkospainikkeella kohdetta, jonka haluat tarkistaa.

2. Klikkaus Tarkastele elementtiä†

3. Kaksoisnapsauta koodissa olevaa tekstiä, jotta se on muokattavissa.

4. Poista se tai kirjoita uusi tekstijoukko.

5. Napauta Enter.

6. Koodia on nyt muutettu väliaikaisesti vain sinun hyödyksesi.

Miksi haluat käyttää Inspect Element -ominaisuutta?

Mahdollisuus tarkastaa elementti on hyödyllistä monista syistä.

• Vaihda koodi lennossa† Verkkosivustosuunnittelijat voivat väliaikaisesti muuttaa asioita verkkosivustolla nähdäkseen, kuinka muutokset vaikuttavat asioihin.
• Tarkistaaksesi koodin:† Sekä suunnittelijat että markkinointihenkilöt voivat tarkistaa koodin varmistaakseen, että siellä on esimerkiksi Google Analytics -tietoja.
• Katso kuvat erillään sivustosta† Jos et voi avata kuvaa sivuston uudessa välilehdessä tai ikkunassa, voit tarkastella elementtiä.
• Tinker† Verkkosivun koodin näkeminen voi auttaa sinua ymmärtämään näkemäsi paremmin ja poistamaan mysteerin siitä, mitä ja miksi käyttämällesi sivustolle tapahtuu. Se on kuin purkisi laitteen osiin nähdäksesi, miten se toimii, mutta tässä tapauksessa ei ole hukattavia ruuveja.

FAQ

• Onko verkkosivuston tarkastaminen laillista?

  Joo. Jos kuitenkin aiot käyttää koodia tai resursseja verkkosivustolta, ota yhteyttä omistajaan ja liitä mukaan tekijänoikeusilmoitus.

• Kuinka kopioin HTML-koodin verkkosivustolta, jossa on tarkastuselementti?

  Napsauta Chromessa sivua hiiren kakkospainikkeella ja valitse TarkastaaSiirry sitten yläosaan ja napsauta hiiren kakkospainikkeella tunniste (esim. † Valitse Kopioida † Kopioi ulkoinen HTMLja liitä sitten koodi teksti- tai HTML-tiedostoon.

• Voinko kopioida CSS:n verkkosivustolta, jossa on tarkastuselementti?

  Joo. Napsauta hiiren kakkospainikkeella elementtiä, jonka haluat kopioida, ja valitse Tarkastaa† Napsauta korostettua koodia hiiren kakkospainikkeella ja valitse Kopioida † Kopioi tyylit†

• Kuinka näen tallennetut salasanani tarkastuselementin kanssa?

  Voit paljastaa piilotetut salasanat napsauttamalla salasanan tekstiruutua hiiren kakkospainikkeella ja valitsemalla Tarkastaa† Hae korostetulta alueelta type = «salasana» ja vaihda Salasana / teksti† On olemassa helpompia tapoja luetella kaikki salasanasi Chromessa.