Verkon selaamalla meillä ei yleensä ole miettiä paljon kulissien takana tapahtuvaa. Teksti, kuvat ja video ilmestyvät vain tai ne eivät. Selaimessa tai Web -palvelimessa suoritetaan kuitenkin valtava määrä koodia joka kerta, kun vierailet sivulla. Joten joskus on hyödyllistä nähdä tämä koodi. Esimerkiksi, jos sivu ei ladata oikein tai haluat tietää, kuinka videosoitin on upotettu.
Tässä artikkelissa näytämme sinulle, kuinka tarkastaa elementti Safarissa, Chromessa ja Firefoxissa.
Mikä on tarkastuselementti?
Inspect Element on edistyksellinen ominaisuus useimmissa selaimissa, joiden avulla voit avata ikkunan, joka näyttää HTML: n, CSS: n, JavaScriptin ja muun koodauksen, joka yhdistää verkkosivun rakentamiseksi. Joissakin selaimissa sinun on otettava se käyttöön asetuksissa, mutta useimmissa se on jo valikossa. Se on pääasiassa kehittäjille tarkoitettu, että ne voivat virheenrakentaa verkkosivustoja, mutta se voi olla hyödyllinen myös muissa tilanteissa.
Miksi tarkastaa elementti verkkoselaimessa?
Sivun virheenkorjauksen lisäksi Inspect Element on erinomainen työkalu tarkistamaan, onko WordPressin kaltaisessa sisällönhallintajärjestelmässä lisätty koodi, kuten Google Analytics, jotka on lisätty oikein. Se voi olla hyödyllistä myös selvittämisessä, miksi video ei toisteta tai tiedosto ei aloita lataamista.
Jos olet kehittäjä, joka haluaa selvittää, kuinka verkkosivusto saavutti tietyn vaikutuksen, käytä tarkastuselementtiä. Voit jopa muokata koodia selaimessa testataksesi miltä se näyttää muutoksissa. Pää -selaimen ikkunan verkkosivu päivitetään heti kaikkien muutosten esittämiseksi.
Kuinka tarkastaa elementti verkkoselaimessa
Tapa, jolla tarkistat elementit, riippuu käyttämästäsi selaimesta. Näytämme sinulle, kuinka se tehdään Safarissa, Firefoxissa ja Chromessa.
Liittyvät:4 tapaa siirtää tietoja Macista Maciin
Kuinka tarkastaa elementti Safarissa
Ensimmäinen asia, joka sinun on tehtävä Safari -elementtien tarkastamiseksi, on Kehitysvalikko. Näin se tehdään.
- Käynnistä Safari.
- Napsauta Safari -valikkoa ja valitse sitten asetukset.
- Valitse Lisäasetus -välilehti.
- Valitse valikkopalkissa olevaa ruudun 'Näytä Kehitä valikko.'
- Sulje asetukset.
Kun olet ottanut käyttöön Kehitä-valikon, napsauta sitä ja valitse Näytä sivulähde tai paina Command-Option-U. Näet ikkunan auki selaimen alaosassa, jossa on paljon välilehtiä yläosan yli. Täällä voit tehdä useita asioita.
- Napsauta lähteitä nähdäksesi luettelon kaikista sivun eri osista. Sivupalkissa näet luettelon kansioista, kuten kehyistä, kuvista ja skripteistä. Napsauta Kuvat -kansiota nähdäksesi gallerian sivun kuvista. Napsauta avata minkä tahansa kansiota vieressä tarkistaaksesi kyseisen kansion elementit. Napsauta yhtä heistä, ja pääikkunassa ilmestyy esikatselu.
- Valitse Elements -välilehti nähdäksesi sisäkkäisen kuvan koodista, joka muodostaa verkkosivun. Jos laajennat osaa, kyseisen osan koodi on näkyvissä; Jos valitset sen, se näyttää sivuun, johon se liittyy.
- Avaa elementtien tarkastaja uudessa ikkunassa napsauttamalla työkalurivin päällekkäisiä suorakulmioita.
- Napsauta Elements -välilehdessä Riders -kuvaketta nähdäksesi kunkin elementin tarkan paikannuksen.
Kuinka tarkastaa ja muuttaa tietty verkkosivuelementti Safarissa
Yllä oleva menetelmä antaa sinulle hyvän yleiskuvan Safarin verkkosivusta. Mutta entä jos haluat löytää tietyn elementin sivulta ja muuttaa sitä testataksesi jotain? Näin:
- Siirry elementtiin, jonka haluat tarkistaa verkkosivustolla, esimerkiksi tekstirivi.
- Valitse teksti ja ohjaus napsauta sitä. Valitse sitten tarkasta elementti kontekstuaalisesta valikosta.
- Ikkuna avataan verkkosivun alareunassa ja näet koodin, joka ohjaa sitä elementtiä.
- Voit muuttaa selaimesi tekstin napsauttamalla sitä tarkastajalla ja kirjoittamalla sitä uuden tekstin kanssa. Tai, jos se on kuva, voit korvata URL -osoitteen toisen kuvan URL -osoitteella.
Tarkastuselementin käyttö Google Chromessa
- Käynnistä Chrome. Napsauta Näytä-valikkoa, siirrä osoitin kehittäjälle alareunassa ja valitse tarkasta elementit-tai paina Command-OPTION-C.
- Ikkuna avataan selainikkunan oikealla puolella, joka näyttää verkkosivuilla olevat elementit.
- Huomaat, että tarkastajan yläosassa olevat välilehdet ovat samanlaisia kuin Safarin: elementit, konsoli ja lähteet.
- Elements -välilehdessä leijuta mitä tahansa osaa korostaaksesi sen hallitsemansa verkkosivun osaa.
- Lähteet -välilehdet ryhmittelee kaikki erityyppiset elementit yhdessä kansioissa, samoin kuin Safarissa.
Kuinka tarkastaa ja muuttaa tietty verkkosivuelementti Chromessa
Prosessi tietyihin elementteihin ja muutoksiin verkkosivustolla on sama Chromessa kuin Safarissa.
- Etsi elementti verkkosivulta. Sitten ohjata napsauta sitä.
- Valitse valikosta tarkasta. Oikealla sivupalkissa näet koodin osion, joka liittyy valitsemaani elementtiin.
- Napsauta nuolta paljastaaksesi koko osan.
- Kun löydät muuttamasi tekstin rivin, valitse se, poista teksti ja kirjoita uusi teksti. Jos se on kuva, jonka haluat muuttaa, kirjoita tai liitä uuden kuvan URL -osoite.
Tarkastuselementin käyttö Firefoxissa
- Käynnistä Firefox. Napsauta Työkalut -valikkoa.
- Vedä hiiren osoitin selaintyökalujen yli ja valitse web -kehittäjätyökalut.
- Näet ikkunan auki näytön alareunassa, samanlainen kuin Safarissa avautuva.
- Tässä tapauksessa ei ole erillisiä elementtejä tai lähde -välilehtiä. Tarkasta koodi valitsemalla tarkastaja -välilehti.
- Huomaat, että kun leijut koodiostien yli tarkastaja -välilehdessä, yllä olevan sivun osiot korostetaan.
Kuinka tarkastaa tietty verkkosivuelementti ja muuttaa sitä Firefoxissa
Kaikki edellä mainitut toimivat Firefoxissa, kuten Safarissa ja Chromessa.
- Ohjaa napsauta napsautusta elementtiä, jonka haluat tarkistaa tai muuttaa verkkosivulla.
- Valitse valikosta tarkasta.
- Napsauta avattava nuolta paljastaaksesi koodin.
- Valitse teksti, poista se ja kirjoita uusi teksti (tai valitse kuvan URL -osoite ja korvaa se toisen kuvan URL -osoitteella.)
Kun tiedät kuinka tarkastaa elementti Macissa, voit analysoida lähdekoodin verkkosivustolla tai jopa tehdä muutoksia ja testituloksia. Prosessi on hyvin samanlainen useimmissa selaimissa. Näkymävalikossa on yleensä kehittäjätyökaluvalikko tai näkymälähdekomento. Safarissa se on näkyvissä vain, kun otat kehittäjävalikon käyttöön asetuksissa, mutta useimmissa selaimissa se on valikkopalkissa. Seuraa yllä olevia vaiheita tarkistaaksesi elementit Safarissa, Chromessa tai Firefoxissa.