Tarkastuselementin käyttäminen

Useimmat ihmiset eivät tiedä, että heidän käytettävissään on aarrearkku kehittäjätyökaluja ja että se on piilotettu heidän suosikkiselaimeensa.

Jokainen verkkoselain tarjoaa kehittäjätyökaluja verkkosivuston koodauksen tarkistamiseen, mutta se on kuitenkin vieras kokonaisuus tavalliselle Internetin käyttäjälle. Loppujen lopuksi, kuka haluaa katsoa verkkosivuston koodausta, eikö niin?

Kuten käy ilmi, on paljon asioita, joita voit oppia katsomalla verkkosivuston koodausta. Lue eteenpäin saadaksesi selville, mitä tarkastuselementin ominaisuus tarjoaa ja kuinka sitä käytetään.

Tarkastuselementin käyttäminen tietyssä selaimessa

Useimmissa selaimissa on työkaluja verkkosivuston osien tarkastamiseen, mutta ne kaikki toimivat yleensä samalla tavalla.

Tarkastuselementin käyttäminen Google Chromessa

1. Avaa verkkosivusto, jonka haluat tarkistaa.

   

2. Napsauta hiiren kakkospainikkeella mitä tahansa sivulla ja valitse Tarkastaa.

   

   TAI

3. Napsauta kolmea pystysuoraa pistettä työkalupalkin oikeassa kulmassa.

   

4. Mene Lisää työkaluja.

   

5. Valitse Kehitystyökalut.

   

   TAI

6. paina F12 pikanäppäin PC:llä tai CMD + Optiot + I Macilla.

Tarkastuselementin käyttäminen Microsoft Edgessä

1. Avaa verkkosivusto.

   

2. Napsauta kolmea pystysuoraa pistettä selaimen työkalupalkin oikeassa yläkulmassa.
3. Vieritä alas ja napsauta Lisää työkaluja.

   

4. Klikkaa Kehitystyökalut.

   

   TAI

5. Napsauta hiiren kakkospainikkeella mitä tahansa verkkosivuston kohtaa.
6. Klikkaa Tarkastaa.

   

   TAI

7. Lehdistö Ctrl + Vaihto + I.

Mikä tahansa näistä kolmesta menetelmästä antaa sinulle saman tuloksen.

Jos teit tämän oikein, näet uuden ruudun avautuvan selaimesi alareunaan. Nämä ovat Kehittäjätyökalut ja sisältävät Elementit-välilehden. Tämä on työkalu, jota tarvitset elementin tarkastamiseen.

Paneeli avautuu oletuksena näytön alareunaan, mutta voit aina muuttaa sen ulkoasua. Noudata näitä yksinkertaisia ​​ohjeita sijoittaaksesi Kehittäjätyökalut -paneelin uudelleen:

1. Napsauta kolmea pystysuoraa pistettä Kehittäjätyökalut-paneelin yläkulmassa.

   

2. Valitse telakointipuoli (vasen, alhainen tai oikea) tai irrota telakointi erilliseen ikkunaan.

   

Kohdistimen vieminen Developer Tools -paneelikehyksen reunan viereen ja vetäminen kaventaa tai laajentaa työtilaa. Jos esimerkiksi päätät kiinnittää paneelin selainikkunan oikealle puolelle, yritä viedä hiiri vasemman reunan päälle. Voit muuttaa paneelin kokoa vetämällä, kun näet nuolikohdistimen.

Tarkastuselementin käyttäminen (käyttöjärjestelmäkohtainen)

Vaikka monet asiaan liittyvät vaiheet olisi voitu kattaa vain näyttämällä sinulle, kuinka Inspect Element -elementtiä käytetään selaimessa, missä se alun perin on olemassa, näytämme kuitenkin, kuinka useimmissa käyttöjärjestelmissä.

Inspect Elementin käyttäminen Chromebookissa

Chromebookin oletusselain on Google, joten käytä Chrome-selaimen ohjeita Tarkastele elementtiä. Tässä sinulle pieni kertauskurssi:

1. Avaa verkkosivusto.

   

2. Napsauta kolmea pystysuoraa viivaa työkalupalkin oikeassa yläkulmassa.

   

3. Valitse Lisää työkaluja.

   

4. Klikkaa Kehitystyökalut.

   

Voit myös käyttää hiiren kakkospainikkeella menetelmää tai F12 toimintonäppäintä päästäksesi kehittäjätyökaluihin nopeammin.

Inspect Elementin käyttäminen Android-laitteella

Inspect Elementin suorittaminen Android-laitteella on hieman erilaista. Katso, kuinka pääset Inspect Element -paneeliin Androidissa:

1. paina F12 toimintonäppäin.
2. Valita Laitepalkki päälle/pois.

   

3. Valitse Android-laite avattavasta valikosta.

   

Kun valitset tietyn Android-laitteen, huomaat, että verkkosivuston mobiiliversio latautuu. Täältä voit vapaasti käyttää Inspect Element -ominaisuutta Android-laitteellasi mukavasti työpöydältäsi.

Tämä menetelmä toimii sekä Chrome- että Firefox-selaimissa, koska niiden kehittäjätyökaluissa on ominaisuus nimeltä Device Simulation.

Se toimii samalla tavalla myös iPhone-laitteissa. Sinun tarvitsee vain valita oikea avattavasta valikosta.

Inspect Elementin käyttäminen Windowsissa

Inspect Element -työkalu ei välttämättä ole käyttöjärjestelmäkohtainen, vaan selainkohtainen. Tämä tarkoittaa, että kehittäjätyökalut ovat käyttämäsi selaimen ominaisuus, eivät välttämättä Windowsin. Voit kuitenkin päästä Inspect Element -paneeliin riippumatta siitä, mitä selainta pidät.

Jos käytät Windows-käyttöjärjestelmää, käytät todennäköisesti myös Microsoft Edge -selainta. Katso, kuinka pääset Inspect Elementiin MS Edgessä:

1. Avaa verkkosivusto, jonka haluat tarkistaa.

   

2. Napauta kolmea pystysuoraa pistettä selainikkunan kulmassa.

   

3. Vieritä alas ja valitse Lisää työkaluja.

   

4. Klikkaa Kehitystyökalut.

   

Voit myös käyttää F12 toimintonäppäintä, jos haluat käyttää Tarkasta elementtiä nopeammin. Myös verkkosivun napsauttaminen hiiren kakkospainikkeella ja Tarkasta-vaihtoehdon valitseminen toimii myös.

Inspect Elementin käyttäminen Macissa

Jos käytät Macia, valitsemasi selaimesi on todennäköisesti Safari. Inspect Elements -sovelluksen avaaminen Safarissa on hieman erilainen kuin Chromessa ja Firefoxissa. Mutta se on yhtä yksinkertaista näillä vaiheilla:

1. Avaa Safari-selain.
2. Klikkaa Safari otsikkovälilehdessä.
3. Valitse Asetukset avattavasta valikosta.
4. Klikkaa Pitkälle kehittynyt rataskuvake, joka sijaitsee näytön yläosassa.
5. Valitse ruutu, jossa lukee Näytä Kehitä-valikko valikkorivillä.

Näiden vaiheiden suorittaminen ottaa Inspect Element -ominaisuuden käyttöön selaimessasi. Jos et ota ensin Inspect Element -toimintoa käyttöön, et näe vaihtoehtoa, kun avaat verkkosivuston.

Kun olet suorittanut tämän vaiheen, napsauta hiiren kakkospainikkeella mitä tahansa avointa verkkosivua ja valitse Tarkista. Voit myös käyttää pikanäppäinkomentoa: CMD + Optio + I (tarkastaa).

Inspect Elementin käyttäminen iPhonessa

Haluatko käyttää Inspect Elements -ominaisuutta nähdäksesi, miltä verkkosivun mobiiliversio näyttää iPhonessa? Voit tehdä tämän ja paljon muuta vain muutamalla yksinkertaisella vaiheella. Mutta ennen kuin tarkastelet elementtiä, sinun on otettava se käyttöön Webin tarkastaja iOS-laitteellesi:

1. Mene asetukset.

   

2. Valitse nyt Safari.

   

3. Vieritä alas ja napauta Lisävalikko.

   

4. Napauta nyt vaihtokytkintä kytkeäksesi päälle Webin tarkastaja.

   

Sinun on myös varmistettava, että Kehitä-valikko on käytössä Macissasi:

1. Avaa Safari.
2. Valitse Safari yläotsikoista.
3. Napsauta seuraavaksi Asetukset.
4. Napsauta sitten Pitkälle kehittynyt.
5. Valitse ruutu, jossa lukee Näytä Kehitä-valikko valikkorivillä.

Kun olet ottanut käyttöön sekä iOS-mobiililaitteen että Macin, näet Kehitä-valikon Macin yläpalkissa. Napsauta sitä nähdäksesi yhdistetyn iPhonen ja laitteessa aktiivisen verkkosivun. Web-sivun valitseminen avaa myös Web Inspector -ikkunan samalle sivulle Mac-näytössä.

Muista kuitenkin, että nämä ohjeet toimivat vain Safarissa, jossa on Mac, eivät Safaria Windowsissa.

Tarkastuselementin käyttäminen Google Formsissa

Voit myös käyttää Tarkastuselementtiä Google Formsissa. Jos kuitenkin etsit vastauksia tietokilpailuun, et ole onneton. Et löydä vastauksia koodaukseen upotettuna. Voit tarkastella vastauksia vain, jos olet lomakkeen luoja tai muokkaaja. Joka tapauksessa, jos olet opiskelija vastaamassa kyselyyn Google Formsissa, näet vain omat vastauksesi.

1. Voit napsauttaa lomaketta hiiren kakkospainikkeella ja valita Tarkastaa nähdäksesi kaikki lomakkeen koodit.

Tarkastuselementin käyttäminen, kun se on estetty

Joskus huomaat, että et voi tarkastaa verkkosivua ja Tarkista-valinta näkyy harmaana, jos yrität napsauttaa sitä hiiren kakkospainikkeella. Saatat ajatella, että se on estetty, mutta sen voi kiertää useilla tavoilla:

menetelmä 1 - Sammuta Javascript

1. Mennä asetukset.

   

2. Hae "JavaScript”.

   

3. Kytke pois päältä JavaScript.

   

Tapa 2 – Käytä kehittäjän työkaluja pitkälle

Sen sijaan, että napsautat hiiren oikealla painikkeella Tarkasta, tee näin:

1. Mene asetukset selaimessasi.

   

2. Valitse Lisää työkaluja.

   

3. Vieritä alas ja napsauta Kehitystyökalut.

   

Tapa 3 – Toimintonäppäimen käyttö

Voit myös kokeilla käyttää F12 toimintonäppäin verkkosivuilla, jotka estävät Tarkastus-toiminnon napsauttamalla hiiren oikeaa painiketta.

Saatat joutua kokeilemaan kaikkia näitä menetelmiä, ennen kuin löydät sellaisen, joka sopii sinulle. Viimeisenä keinona voit myös yrittää tarkastella lähdekoodia kirjoittamalla view-source: [kirjoita koko URL-osoite].

Inspect Elementin käyttäminen Discordissa

Koodauksen tarkistaminen Discordissa on helppo prosessi. Käytä vain Ctrl + Vaihto + I komento tai F12 näppäin Discord-sivulla.

Inspect Elementin käyttäminen koulun Chromebookissa

Jos Chromebookisi on koulun myöntämä, Inspect Element -ominaisuuden käyttäminen sisältää muutaman yksinkertaisen vaiheen:

1. Napsauta verkkosivua hiiren kakkospainikkeella tai napauta kahdella sormella ja valitse Tarkastaa.
2. Lehdistö Ctrl + Vaihto + I.
3. Kokeile ja käytä view-source:[url]-menetelmää, kuten "view-source://www.wikipedia.com", ilman lainausmerkkejä.

Jotkut koulut ja organisaatiot kuitenkin estävät tämän ominaisuuden. Joten jos se ei toimi sinulle, sinun on ehkä otettava yhteyttä organisaatiosi tai koulusi ylläpitäjään.

Kuinka käyttää tarkastuselementtiä vastausten löytämiseen

Voit käyttää Inspect Elementiä löytääksesi vastauksia moniin asioihin, kuten:

1. Sivuston suunnittelun esikatselu mobiililaitteilla.
2. Selvitä avainsanat, joita kilpailijat käyttävät.
3. Nopeustestit.
4. Tekstin muuttaminen verkkosivulla.
5. Etsi nopeita esimerkkejä näyttääksesi kehittäjille, mitä tarvitset.

Kun käynnistät Inspect Element -paneelin, näet kaikki verkkosivuston koodaukset. Se sisältää kaiken siihen sisäänrakennetun JavaScript-, CSS- ja HTML-koodauksen. Se on kuin verkkosivun lähdekoodin näkeminen, paitsi että voit tehdä muutoksia koodiin. Lisäksi näet kaikki muutokset reaaliajassa.

Tämän työkalun ansiosta markkinoijat, suunnittelijat ja kehittäjät voivat tarkastella suunnittelumuutoksia ennen niiden viimeistelemistä. Muutosten tekeminen koodaukseen Inspect Elementin avulla ei kuitenkaan kestä ikuisesti. Kun lataat sivun uudelleen, se palaa oletustilaan.

Muita usein kysyttyjä kysymyksiä

Kuinka käytän Inspect Element -komentoa löytääkseni vastauksia?

Ainoa tapa löytää vastauksia Inspect Element -ominaisuuden avulla on, jos verkkosivusto paljastaa sen välittömästi lähettämisen jälkeen. Tässä tapauksessa vastaukset ovat koodauksessa.

Muussa tapauksessa tarkastelet vain tietokilpailun tai testin koodausta, kun käytät Inspect Element -ominaisuutta, sekä kaikkia lähettämiäsi vastauksia.

Onko Inspect Element laitonta?

Ei, Inspect Element -työkalu ei ole laiton, se on suunniteltu verkkokehittäjille. Verkkosivuston lähdekoodin katseleminen ei ole laitonta, siitä tulee ongelma vain, jos käytät kerättyjä tietoja ilkeisiin tarkoituksiin, kuten hyväksikäyttöön jne.

Onko mahdollista poistaa tarkastuselementti käytöstä selaimessa?

Lyhyt vastaus on ei.

Tarkastuselementtiä ei voi poistaa käytöstä selaimessa. Voit kuitenkin asettaa parametreja, jotka estävät käyttäjiä tekemästä tiettyjä toimintoja, kuten napsauttamalla hiiren kakkospainikkeella verkkosivua. Verkossa on lukuisia opetusohjelmia, joiden avulla voit asettaa oikeat skriptit tiettyjen tapahtumien poistamiseksi käytöstä. Et kuitenkaan voi poistaa Inspect Element -ominaisuutta kokonaan käytöstä.

Opi tuntemaan verkkosivun sisäosat

Verkkosivun Inspect Element -ominaisuuden tarkistaminen on luultavasti kehittäjätyökalu, jota et tiennyt tarvitsevasi – vaikka et itse olisikaan kehittäjä. Siinä on paljon suunnittelu- ja markkinointisovelluksia, jotka voivat tehdä verkkosivustostasi sujuvamman. Ja ehkä antaa sinulle etulyöntiaseman kilpailijaan nähden.

Mihin käytät Inspect Elementiä? Kerro meille siitä alla olevassa kommenttiosassa.