Tarkastuselementin käyttö

Suurin osa ihmisistä ei tiedä, että heidän käytettävissä on aarreaitta kehittäjätyökaluja ja että se on piilotettu heidän suosikkiselaimessaan.

Jokainen verkkoselain tarjoaa kehittäjän työkaluja verkkosivuston koodauksen tarkistamiseen, mutta tavalliselle Internet-käyttäjälle se on kuitenkin vieras yksikkö. Loppujen lopuksi kuka haluaa tarkastella verkkosivuston koodausta, eikö?

Kuten käy ilmi, on paljon asioita, joita voit oppia tarkastelemalla verkkosivuston koodausta. Lue lisää siitä, mitä tarkastuselementtiominaisuudella on ja miten sitä käytetään.

Tarkastuselementin käyttö

Useimmilla selaimilla on työkaluja verkkosivuston elementtien tarkastamiseen, mutta ne kaikki toimivat yleensä samalla tavalla.

Tarkastuselementin käyttäminen Google Chromessa

1. Avaa tarkastettava verkkosivusto.
   
2. Napsauta hiiren kakkospainikkeella mitä tahansa sivun kohtaa ja valitse Tarkastaa .
   
   TAI
3. Napsauta työkalupalkin oikeassa kulmassa olevaa kolmea pystypistettä.
   
4. Mene Lisää työkaluja .
   
5. Valitse Kehittäjän työkalut .
   
   TAI
6. paina F12 pikanäppäin PC: llä tai CMD + Asetukset + I Macissa.
   

Tarkastuselementin käyttäminen Microsoft Edgessä

1. Avaa verkkosivusto.
   
2. Napsauta selaimen työkalupalkin oikeassa yläkulmassa olevaa kolmea pystypistettä.
3. Selaa alaspäin ja napsauta Lisää työkaluja .
   
4. Klikkaa Kehittäjän työ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, selaimesi alaosassa näkyy uusi ruutu. Nämä ovat Kehittäjän työkalut ja sisältävät Elementit-välilehden. Tämä on työkalu, jonka tarvitset elementin tarkastamiseen.

miten myydä höyrypelejäsi

Paneeli avautuu näytön alaosassa oletuksena, mutta voit aina muuttaa sen ulkoasua. Seuraa kehittäjän työkalupaneelin sijoittamista seuraavasti:

1. Napsauta kehittäjän työkalupaneelin yläkulmassa olevia kolmea pystysuoraa pistettä.
   
2. Valitse telakan puoli (vasen, alin tai oikea) tai pura erilliseen ikkunaan.
   

Kun viet hiiren osoittimen Kehittäjätyökalut-paneelin kehyksen reunan viereen ja vedät, kavennat tai laajennat työtilaa. Jos esimerkiksi päätät telakoida paneelin selainikkunan oikealle puolelle, yritä viedä hiiri vasemmalle reunalle. Voit muuttaa paneelin kokoa vetämällä paneelia, kun näet nuolikohdistimen.

Kuinka tarkastaa elementtiä vastausten löytämiseen

Voit tarkastaa elementin avulla löytää vastauksia moniin asioihin, kuten:

1. Sivustosuunnittelun esikatselu mobiililaitteilla.
2. Selvitä kilpailijoiden käyttämät avainsanat.
3. Nopeustestit.
4. Web-sivun tekstin vaihtaminen.
5. Löydä nopeita esimerkkejä kehittäjille, mitä tarvitset.

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

Tämä työkalu tekee markkinoijille, suunnittelijoille ja kehittäjille korvaamattoman arvokkaan näkemään kaikki suunnittelumuutokset ennen niiden viimeistelyä. Muutokset koodaamiseen Inspect Elementillä eivät kuitenkaan kestä ikuisesti. Kun lataat sivun uudelleen, se palaa oletustilaansa.

Kuinka tarkastaa elementti Chromebookilla

Chromebookien oletusselain on Google, joten noudata Chrome-selaimen ohjeita Tarkastele elementtiä . Tässä on pieni kertauskurssi sinulle:

1. Avaa verkkosivusto.
   
2. Napsauta työkalupalkin oikeassa yläkulmassa olevaa kolmea pystysuoraa viivaa.
   
3. Valitse Lisää työkaluja .
   
4. Klikkaa Kehittäjän työkalut .
   

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

Kuinka käyttää Inspect Elementia Androidissa

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

1. paina F12 toimintonäppäin.
2. Valita Vaihda laitepalkki .
   
3. Valitse avattavasta valikosta Android-laite.
   

Kun valitset tietyn Android-laitteen, huomaat, että verkkosivuston mobiiliversio latautuu. Täältä voit käyttää Android-laitteen Tarkasta elementti -ominaisuutta mukavasti työpöydällesi.

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

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

Kuinka käyttää Inspect Elementia Windowsissa

Tarkasta elementti -työkalu ei välttämättä ole käyttöjärjestelmäkohtainen, mutta se on selainkohtainen. Tämä tarkoittaa, että kehittäjän työkalut ovat käyttämäsi selaimen ominaisuus eivätkä välttämättä Windows. Voit kuitenkin päästä Tarkasta elementti -paneeliin riippumatta siitä, mitä selainta suosittelet.

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

1. Avaa tarkastettava verkkosivusto.
   
2. Napauta kolme pystysuoraa pistettä selainikkunan kulmassa.
   
3. Selaa alaspäin ja valitse Lisää työkaluja .
   
4. Klikkaa Kehittäjän työkalut .
   

Voit myös käyttää toimintonäppäintä F12, jos haluat käyttää Tarkastuselementtiä nopeammin. Myös napsauttamalla hiiren kakkospainikkeella verkkosivua ja valitsemalla Tarkista, toimii.

Kuinka tarkastaa elementti Chromessa

Tarkastuselementtiä voi käyttää Chromella kolmella tavalla. Sinä pystyt:

disney plus tiskiverkkosäiliössä

1. Napsauta asetusvalikkoa tai kolmea pystysuoraa pistettä selaimessa ja siirry kohtaan Lisää työkaluja> Kehittäjän työkalut .
   
2. Napsauta hiiren kakkospainikkeella verkkosivua ja valitse Tarkastaa .
   
3. Käyttää Ctrl + Vaihto + I (Tarkastaa).

Ensimmäinen tapa on intuitiivisempi muille Inspect Element -käyttäjille. Jos kuitenkin aiot käyttää tätä ominaisuutta usein, pikanäppäimet voivat olla hyödyllisiä.

Inspect Elementin käyttö Macissa

Jos käytät Macia, valitsemasi selain on todennäköisesti Safari. Tarkastuselementtien avaaminen Safarilla on hieman erilainen kuin Chrome ja Firefox. Mutta se on yhtä helppoa näiden vaiheiden avulla:

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

Näiden vaiheiden suorittaminen ottaa käyttöön Selaimen tarkastus -ominaisuuden. Jos et ota ensin käyttöön Tarkasta elementti -vaihtoehtoa, et näe vaihtoehtoa, kun avaat verkkosivuston.

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

Kuinka käyttää Inspect Elementia Google Formsissa

Voit käyttää myös Tarkastele elementtiä Google-lomakkeissa. Jos etsit vastauksia tietokilpailuun, sinulla ei ole onnea. Et löydä vastauksia upotettuna koodaukseen.

Voit tarkastella vastauksia vain, jos olet lomakkeen luoja tai muokkaaja. Jos kuitenkin olet opiskelija, joka vastaa kyselyyn Google Formsissa, näet vain omat vastauksesi.

Kummassakin tapauksessa voit napsauttaa lomaketta hiiren kakkospainikkeella ja valita Tarkastaa nähdäksesi kaikki lomakkeen koodit.

Tarkastuselementin käyttäminen iPhonessa

Haluatko tarkastaa elementit -toiminnon avulla nähdäksesi, kuinka verkkosivun mobiiliversio näkyy iPhonessa? Voit tehdä tämän ja paljon muuta vain muutamalla yksinkertaisella vaiheella. Mutta ennen kuin tarkastelet elementtiä, sinun on otettava Web Inspector käyttöön iOS-laitteellasi:

1. Mene asetukset .
   
2. Valitse Safari .
   
3. Vieritä alareunaan ja napauta Lisävalikko .
   
4. Napauta kytkeäksesi päälle Verkkotarkastaja .
   

Lisäksi sinun on varmistettava, että Kehitä-valikko on käytössä Macissa:

1. Avaa Safari.
2. Valitse Safari ylätunnisteista.
3. Klikkaa Asetukset .
4. Klikkaa Pitkälle kehittynyt .
5. Valitse ruutu, jossa lukee Näytä valikkorivin Kehitä-valikko .

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

Muista kuitenkin, että nämä ohjeet toimivat vain Macia käyttävälle Safarille, ei Safarille Windowsissa.

Kuinka tarkastaa elementti, kun se on estetty

Toisinaan huomaat, että et voi tarkastaa verkkosivua, ja Tarkasta-valinta on harmaa, jos yrität napsauttaa sitä hiiren kakkospainikkeella. Saatat ajatella, että se on estetty, mutta tähän on useita tapoja:

Menetelmä 1 - Poista Javascript käytöstä

1. Mennä asetukset .
   
2. HaeJavaScript.
   
3. Kytke pois päältä JavaScript .
   

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

Sen sijaan, että napsautat hiirtä hiiren kakkospainikkeella Tarkasta, tee tämä:

1. Mene asetukset selaimessasi.
   
2. Valitse Lisää työkaluja .
   
3. Selaa alaspäin ja napsauta Kehittäjän asetukset .
   
   

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

dayz kuinka sytyttää tulipalo

Voit myös kokeilla F12 toimintonäppäin verkkosivuilla, jotka estävät hiiren kakkospainikkeen napsauttamisen Tarkasta.

Saatat joutua kokeilemaan kaikkia näitä menetelmiä, ennen kuin kohtaat sinulle sopivan. Viimeisenä keinona voit myös yrittää tarkastella lähdekoodia kirjoittamalla view-source: [kirjoita täydellinen URL] .

Kuinka käyttää Tarkasta elementti ristiriidassa

Discord-koodauksen tarkastaminen on helppoa. Käytä vain Ctrl + Vaihto + I komento tai F12 näppäintä Discord-sivulla.

Inspect Elementin käyttäminen koulun Chromebookissa

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

1. Napsauta web-sivua hiiren kakkospainikkeella tai napauta kahdella sormella ja valitse Tarkastaa .
   TAI
2. Lehdistö Ctrl + Vaihto + I

Jotkut koulut ja organisaatiot estävät tämän ominaisuuden. Joten jos se ei toimi sinulle, sinun on ehkä otettava yhteyttä organisaatioosi tai koulun järjestelmänvalvojaan.

Lisäkysymyksiä

Kuinka löydän vastauksia Inspect Element -komennolla?

Ainoa tapa löytää vastauksia Tarkasta elementti -ominaisuuden avulla on, jos verkkosivusto paljastaa sen heti lähettämisen jälkeen. Tässä tapauksessa vastaukset ovat läsnä koodauksessa.

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

Onko tarkastettava elementti laiton?

Ei, Tarkastuselementti ei ole laiton. Sivuston lähdekoodin katselu ei ole laitonta, siitä tulee ongelma vain, jos käytät kerättyjä tietoja ilkeisiin tarkoituksiin, kuten hyökkäysyrityksiin jne.

Onko mahdollista poistaa tarkastettava elementti selaimesta?

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 voidaan asettaa oikeat komentosarjat tiettyjen tapahtumien poistamiseksi käytöstä. Et kuitenkaan voi poistaa Tarkastuselementti-ominaisuutta kokonaan käytöstä.

Opi tuntemaan verkkosivun sisäosat

Verkkosivun Tarkasta elementti -ominaisuuden tarkastaminen on todennäköisesti 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 edun kilpailijalle.

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