Lähes kaikki käyttävät nykyään Internetiä. Ihmiset etsivät paljon tietoa Internetistä. Se voi olla mitä tahansa. Se voi olla esimerkiksi kuvaus jostakin palvelusta, ravintolasivusto, josta voi tilata ruokaa, tai vain uutissivusto, josta voi lukea viimeisimmät uutiset.
Kaikissa näissä tapauksissa ihmiset valitsevat ne sivustot, jotka ovat mukavuudeltaan ja kauneudeltaan houkuttelevimpia. Jotta sivustosi menestyisi ja alkaisi toimia hyvin, sen on oltava tyylikäs ja toimiva. On myös tärkeää, että se ei ole pörröinen ja latautuu nopeasti.
Kaikki tämä riippuu siitä, miten sivusto on suunniteltu ja mitä tekniikkaa siinä käytetään. Yleisesti uskotaan, että ohjelmointi on vaikeaa. Kun kuitenkin ymmärrät perusteet, voit ymmärtää, miten sivustosi toimii ja miten voit muuttaa sitä.
Nykyaikaisissa selaimissa on elementtien tarkastustoiminto, jonka avulla voit tarkastella sivustosi koodia nopeasti. Tämä toiminto on myös Macissa.
Miksi sinun pitäisi oppia käyttämään Inspect Element -ominaisuutta?
Tämä on perustoiminto verkkosivuston kehittämisessä. Sen avulla kehittäjät tarkistavat verkkosivujen suorituskyvyn. Sitä käytetään sivujen virheenkorjaukseen ja testaamiseen Internetissä. Tämän ominaisuuden muista käyttötarkoituksista voidaan erottaa 4 suuntaa:
- Kehittäjät käyttävät tätä ominaisuutta kehittääkseen verkkosivustoja, testatakseen niitä ja tehdäkseen muutoksia.
- Suunnittelijat voivat käyttää sitä tarkistaakseen, miltä heidän ulkoasunsa näyttävät, tai ottaa ulkoasun toiselta sivustolta.
- Markkinoijat voivat käyttää sitä tekstin muuttamiseen verkossa tai Google Analyticsin tarkistamiseen.
- Tukihenkilöt voivat muodostaa yhteyden Element Inspectoriin, jotta he voivat välittää kehittäjille oikeaa tietoa sivuston käyttäjien raportoimista vioista.
Voimme myös sanoa, että jos olet yrityksen omistaja, olisi hyödyllistä tutustua tähän ominaisuuteen, jotta ymmärrät, miten verkkosivustosi toimii ja mitä tulevia tehtäviä kehittäjille voidaan asettaa.
Kuinka tarkastaa elementti Macissa eri selaimissa
Inspect Element -ominaisuuden aktivoiminen ei ole vaikeaa. Voit tehdä sen kirjaimellisesti muutamalla napsautuksella missä tahansa selaimessa. Voit tehdä tämän seuraavasti:
Safari
Aluksi saattaa vaikuttaa siltä, että tämä ominaisuus toimii Safarissa vaikeammin kuin missään muussa selaimessa. Itse asiassa sen aktivointi on helppoa. Tarvitset:
- Käynnistä Safari.
- Siirry asetuksiin (⌘ + ,).
- Napsauta Lisäasetukset-välilehteä.
- Merkitse ”Näytä Kehitysvalikko valikkorivillä” -ruutu.
- Tämän jälkeen pääset kehittäjän työkaluihin valikossa
- Seuraavaksi tarvitset Näytä sivulähde -toiminnon (Valinta + ⌘ + U).
- Ja napsauta Elementit näyttääksesi sivuston koodin.
Kun viet kohdistimen elementin päälle, se korostuu. Jos haluat avata Safarin Tarkasta elementti -vaihtoehdon tietylle sivun osalle, voit napsauttaa sitä hiiren kakkospainikkeella ja valita Tarkasta elementti.
Firefox
Ne toimivat samalla tavalla, mutta niissä on jo käytössä Inspect Element.
Firefoxin pikanäppäin Tarkista elementti on Option + ⌘ + I, ja voit myös tarkastaa minkä tahansa elementin hiiren oikealla painikkeella.
Kromi
Löydät tämän ominaisuuden valikkorivin kohdasta Näytä ➙ Kehittäjä tai käyttämällä pikanäppäintä Option + ⌘ + I. Voit käyttää kohteiden tarkastusta Chromessa samalla tavalla, yksinkertaisesti napsauttamalla hiiren kakkospainikkeella mitä tahansa verkkosivun osaa.
Kuinka tehdä muutoksia verkkosivustoon käyttämällä Inspect Element -elementtiä?
Tämän ominaisuuden avulla voit tehdä sivustoosi nopeita muutoksia. Tätä varten sinun on otettava käyttöön Inspect Element -valinnat ja kirjaimellisesti säädettävä mitä tahansa HTML- tai CSS-osaa.
Sinun on toistettava samat vaiheet kaikissa selaimissa. Voit tehdä muutoksia aloitussivulle seuraavasti:
- Napsauta hiiren kakkospainikkeella haluamaasi elementtiä ja valitse Inspect Element.
- Kaksoisnapsauta sitten koodissa olevaa tekstiä ja tee se muokattavaksi.
- Nyt voit tehdä muutoksia koodiin.
- Kun olet tehnyt kaikki muutokset, paina Enter.
Voit vaihtaa kuvan tai animaation millä tahansa verkkosivulla – korvaa vanhan kuvan URL-osoite uuden kuvan tai GIF:n URL-osoitteella.
Voit myös tehdä muutoksia CSS:ään, kuten muuttaa värejä tai fonttikokoja.
