Kuidas kasutada kontrollielementi

Enamik inimesi ei tea, et nende käsutuses on arendustööriistade varakamber ja see on peidetud nende lemmikbrauseris.

Iga veebibrauser pakub arendaja tööriistu veebisaidi kodeerimise kontrollimiseks, kuid keskmise Interneti-kasutaja jaoks on see võõras üksus. Lõppude lõpuks, kes tahab vaadata veebisaidi kodeerimist, eks?

Nagu selgub, on palju asju, mida saate veebisaidi kodeeringut vaadates õppida. Lugege edasi, et teada saada, mida kontrollielemendi funktsioon pakub ja kuidas seda kasutada.

Kuidas kasutada kontrolli elementi konkreetses brauseris

Enamikul brauseritel on tööriistad veebisaidi elementide kontrollimiseks, kuid üldiselt töötavad need kõik ühtemoodi.

Inspect Element kasutamine Google Chrome'is

1. Avage veebisait, mida soovite kontrollida.

   

2. Paremklõpsake ükskõik millisel lehel ja valige Kontrollige.

   

   VÕI

3. Klõpsake tööriistariba paremas nurgas kolmel vertikaalsel punktil.

   

4. Minema Rohkem tööriistu.

   

5. Valige Arendaja tööriistad.

   

   VÕI

6. Vajutage nuppu F12 kiirklahv arvutis või CMD + Valikud + I Macis.

Kontrolli elemendi kasutamine Microsoft Edge'is

1. Avage veebisait.

   

2. Klõpsake brauseri tööriistariba paremas ülanurgas kolmel vertikaalsel punktil.
3. Kerige alla ja klõpsake nuppu Rohkem tööriistu.

   

4. Kliki Arendaja tööriistad.

   

   VÕI

5. Paremklõpsake igal veebisaidil.
6. Kliki Kontrollige.

   

   VÕI

7. Vajutage Ctrl + tõstuklahv + I.

Ükskõik milline neist kolmest meetodist annab teile sama tulemuse.

Kui tegite seda õigesti, näete brauseri allosas avanevat uut paani. Need on arendaja tööriistad ja sisaldavad vahekaarti Elements. See on tööriist, mida vajate elemendi kontrollimiseks.

Paneel avaneb vaikimisi ekraani allservas, kuid saate alati muuta selle kuvamisviisi. Arendaja tööriistade paneeli ümberpaigutamiseks järgige neid lihtsaid samme.

1. Klõpsake arendaja tööriistade paneeli ülemises nurgas kolmel vertikaalsel punktil.

   

2. Valige doki pool (vasak, alumine või parem) või eraldage dokk eraldi aknasse.

   

Kursori hõljutamine arendaja tööriistade paneeli raami serva kõrval ja lohistamine kitsendab või laiendab tööruumi. Näiteks kui otsustate paneeli dokkida brauseriakna paremasse serva, hõljutage kursorit vasakpoolsel äärisel. Kui näete noolekursorit, saate paneeli suuruse muutmiseks lohistada.

Kontrolli elemendi kasutamine (OS-ipõhine)

Ehkki paljusid sellega seotud toiminguid oleks võinud hõlmata lihtsalt näitamine, kuidas kasutada Inspect Elementi brauseris, kus see üldse olemas on, näitame teile, kuidas enamiku OS-i puhul ikkagi.

Inspect Elementi kasutamine Chromebookis

Chromebooki vaikebrauser on Google, seega järgige juurdepääsu saamiseks Chrome'i brauseri juhiseid Kontrollige elementi. Siin on teile väike täienduskursus:

1. Avage veebisait.

   

2. Klõpsake tööriistariba paremas ülanurgas kolmel vertikaalsel joonel.

   

3. Valige Rohkem tööriistu.

   

4. Kliki Arendaja tööriistad.

   

Võite kasutada ka paremklõpsu meetodit või F12 funktsiooniklahvi, et jõuda kiiremini arendaja tööriistadesse.

Inspect Elementi kasutamine Android-seadmes

Inspect Elementi käitamine Android-seadmes on veidi erinev. Vaadake, kuidas pääseda Androidis paneelile Inspect Element:

1. Vajutage nuppu F12 funktsiooniklahv.
2. Vali Seadmeriba sisse- ja väljalülitamine.

   

3. Valige rippmenüüst Android-seade.

   

Kui valite konkreetse Android-seadme, märkate, et laaditakse veebisaidi mobiiliversioon. Siit saate oma Android-seadme funktsiooni Inspect Element kasutada mugavalt oma töölaualt.

See meetod töötab nii Chrome'i kui ka Firefoxi brauserite puhul, kuna nende arendaja tööriistades on funktsioon Device Simulation.

Samamoodi toimib see ka iPhone'i seadmete puhul. Peate lihtsalt rippmenüüst õige valima.

Kuidas kasutada Inspect Elementi Windowsis

Tööriist Inspect Element ei ole tingimata OS-i, vaid brauseripõhine. See tähendab, et arendaja tööriistad on teie kasutatava brauseri, mitte tingimata Windowsi funktsioon. Saate siiski pääseda paneeli Kontrolli elementi olenemata sellest, millist brauserit eelistate.

Kui kasutate Windowsi operatsioonisüsteemi, kasutate tõenäoliselt ka Microsoft Edge'i brauserit. Vaadake, kuidas pääseda juurde Inspect Elementile MS Edge'is:

1. Avage veebisait, mida soovite kontrollida.

   

2. Puudutage brauseriakna nurgas kolme vertikaalset punkti.

   

3. Kerige alla ja valige Rohkem tööriistu.

   

4. Kliki Arendaja tööriistad.

   

Võite kasutada ka F12 funktsiooniklahvi, kui soovite elemendile Inspect Element kiiremini juurde pääseda. Samuti töötab veebilehel paremklõps ja valimine Kontrolli.

Inspect Elementi kasutamine Macis

Kui kasutate Maci, on teie valitud brauser tõenäoliselt Safari. Inspect Elements'i avamine Safaris erineb veidi kui Chrome'is ja Firefoxis. Kuid see on sama lihtne järgmiste sammudega:

1. Avage Safari brauser.
2. Kliki Safari päise vahekaardil.
3. Valige Eelistused rippmenüüst.
4. Klõpsake nuppu Täpsemalt hammasrattaikoon, mis asub ekraani ülaosas.
5. Märkige ruut, mis ütleb Kuva menüü Arendusmenüü menüüribal.

Nende sammude läbimine lubab teie brauseris funktsiooni Kontrolli elementi. Kui te esmalt funktsiooni Kontrolli elementi ei luba, ei näe te seda valikut veebisaidi avamisel.

Pärast selle sammu täitmist paremklõpsake mis tahes avatud veebilehel ja valige Kontrolli. Võite kasutada ka kiirklahvide käsku: CMD + Option + I (kontrollida).

Inspect Elementi kasutamine iPhone'is

Kas soovite kasutada funktsiooni Inspect Elements, et näha, kuidas veebilehe mobiiliversioon iPhone'is kuvatakse? Seda ja palju muud saate teha vaid mõne lihtsa sammuga. Kuid enne elemendi vaatamist peate selle lubama Veebiinspektor teie iOS-i seadme jaoks:

1. Minema Seaded.

   

2. Nüüd vali Safari.

   

3. Kerige alla ja puudutage nuppu Täpsem menüü.

   

4. Nüüd puudutage sisselülitamiseks lülitit Veebiinspektor.

   

Samuti peate veenduma, et teie Macis on menüü Arendamine lubatud.

1. Avage Safari.
2. Valige Safari ülemistest päistest.
3. Järgmisena klõpsake nuppu Eelistused.
4. Seejärel klõpsake nuppu Täpsemalt.
5. Märkige ruut, mis ütleb Kuva menüü Arendusmenüü menüüribal.

Pärast iOS-i mobiilseadme ja Maci lubamist näete oma Maci ülemisel ribal menüüd Arendus. Klõpsake sellel, et näha ühendatud iPhone'i ja seadmes aktiivset veebilehte. Veebilehe valimine avab ka teie Maci ekraanil sama lehe jaoks veebiinspektori akna.

Pidage siiski meeles, et need juhised töötavad ainult Safari jaoks, mis töötab Macis, mitte Safari jaoks Windowsis.

Kuidas kasutada kontrolli elementi Google'i vormides

Saate kasutada ka Google'i vormide kontrollielementi. Kui aga otsite vastuseid viktoriinile, pole teil õnne. Te ei leia vastuseid kodeeringusse. Saate vastuseid vaadata ainult siis, kui olete vormi looja või toimetaja. Mõlemal juhul näete ainult enda vastuseid, kui olete õpilane, kes vastab Google Formsis viktoriinile.

1. Saate vormil paremklõpsata ja valida Kontrollige et näha kogu vormi koodi.

Kuidas kasutada kontrollielementi, kui see on blokeeritud

Mõnikord avastate, et te ei saa veebilehte kontrollida ja valik Kontrolli on hallina, kui proovite sellel paremklõpsata. Võite arvata, et see on blokeeritud, kuid selle vältimiseks on mitu võimalust.

1. meetod – Lülitage Javascript välja

1. Mine sisse Seaded.

   

2. Otsing "JavaScript”.

   

3. Välja lülitama JavaScript.

   

2. meetod – juurdepääs arendaja tööriistadele kaugele

Kontrollimiseks paremklõpsake hiire parema nupuga, tehke järgmist.

1. Minema Seaded oma brauseris.

   

2. Valige Rohkem tööriistu.

   

3. Kerige alla ja klõpsake nuppu Arendaja tööriistad.

   

3. meetod – funktsiooniklahvi kasutamine

Võite proovida kasutada ka F12 funktsiooniklahv veebilehtedel, mis blokeerivad kontrollimiseks paremklõpsu.

Võimalik, et peate proovima kõiki neid meetodeid, enne kui leiate endale sobiva. Viimase abinõuna võite proovida vaadata ka lähtekoodi, sisestades selle view-source: [sisesta täielik URL].

Kuidas kasutada Inspect Elementi rakenduses Discord

Discordis oma kodeerimise kontrollimine on lihtne protsess. Kasutage lihtsalt Ctrl + tõstuklahv + I käsk või F12 klahvi Discordi lehel.

Inspect Elementi kasutamine kooli Chromebookis

Kui teie Chromebooki väljastas kool, hõlmab funktsiooni Kontrolli elementi kasutamine mõnda lihtsat toimingut.

1. Paremklõpsake või puudutage kahe sõrmega veebilehel ja valige Kontrollige.
2. Vajutage Ctrl + tõstuklahv + I.
3. Proovige ja kasutage meetodit view-source:[url], näiteks "view-source://www.wikipedia.com“, ilma jutumärkideta.

Mõned koolid ja organisatsioonid aga blokeerivad selle funktsiooni. Seega, kui see teie jaoks ei tööta, peate võib-olla võtma ühendust oma organisatsiooni või kooli administraatoriga.

Kuidas kasutada Inspect Elementi vastuste leidmiseks

Saate kasutada Inspect Elementi, et leida vastuseid mitmesugustele asjadele, näiteks:

1. Saidi kujunduse eelvaade mobiilseadmetes.
2. Uurige välja märksõnad, mida konkurendid kasutavad.
3. Kiiruskatsed.
4. Teksti muutmine veebilehel.
5. Otsige kiireid näiteid, et näidata arendajatele, mida vajate.

Kui käivitate paneeli Kontrolli elementi, näete kogu veebisaidi kodeeringut. See hõlmab kogu sellesse sisseehitatud JavaScripti, CSS-i ja HTML-koodi. See on nagu veebilehe lähtekoodi nägemine, välja arvatud juhul, kui saate koodi muuta. Lisaks näete reaalajas kõiki rakendatud muudatusi.

See tööriist muudab turundajate, disainerite ja arendajate jaoks hindamatuks kujunduse muudatuste vaatamise enne nende viimistlemist. Siiski ei kesta Inspect Elementiga kodeerimises muudatuste tegemine igavesti. Lehe uuesti laadimisel naaseb see vaikeolekusse.

Täiendavad KKK

Kuidas kasutada vastuste leidmiseks käsku Inspect Element?

Ainus viis vastuseid leida funktsiooni Inspect Element abil on see, kui veebisait avaldab selle kohe pärast esitamist. Sel juhul on vastused kodeeringus olemas.

Vastasel juhul vaatate lihtsalt viktoriini või testi kodeerimist, kui kasutate funktsiooni Kontrolli elementi, samuti kõiki teie esitatud vastuseid.

Kas Inspect Element on ebaseaduslik?

Ei, tööriist Inspect Element ei ole ebaseaduslik, see on mõeldud veebiarendajatele. Veebisaidi lähtekoodi vaatamine ei ole ebaseaduslik, see muutub probleemiks ainult siis, kui kasutate kogutud teavet ebaausatel eesmärkidel, näiteks ärakasutamise katsetel jne.

Kas on võimalik brauseris kontrolli elementi keelata?

Lühike vastus on ei.

Kontrolli elementi ei saa brauseris keelata. Kuid saate määrata parameetreid, mis takistavad kasutajatel teatud toiminguid, näiteks veebilehel paremklõpsamist, tegemast. Teatud sündmuste keelamiseks õigete skriptide seadistamiseks on Internetis arvukalt õpetusi. Siiski ei saa te elemendi kontrollimise funktsiooni täielikult keelata.

Õppige tundma veebilehe sisemust

Veebilehe funktsiooni Kontrolli elementi kontrollimine on tõenäoliselt arendaja tööriist, mida te ei teadnudki, et vajate – isegi kui te ise arendaja pole. Sellel on palju disaini- ja turundusrakendusi, mis muudavad teie veebisaidi sujuvamaks. Ja võib-olla annab teile eelise konkurendi ees.

Milleks te kontrollielementi kasutate? Rääkige meile sellest allpool olevas kommentaaride jaotises.