Kehittäjät ja käyttöliittymäsuunnittelijat käyttävät Inspect Element -ominaisuutta verkkosivustojen muokkaamiseen verkossa muuttamatta lähdekoodia. Mutta kuinka tarkastaa elementtejä ilman verkkokehityskurssia?
Inspect Element on kätevä kehittäjätyökalu, joka tulee valmiiksi suosittujen verkkoselaimien mukana. Sinun tarvitsee vain tietää, kuinka työkalu otetaan käyttöön muutamalla napsautuksella, kun selaat verkkosivustoja.
Voit tehdä monia taikatemppuja, kuten muuttaa verkkosivuston asettelua, ottaa tekstittömiä kuvakaappauksia, vaihtaa fontteja, muokata numeroita ja paljon muuta.
Alta löydät tiiviin vaiheittaisen oppaan, jolla opit tarkastamaan elementtejä vaivattomasti.
Mikä on tarkastuselementti?
Inspect Element on web-kehitystyökalu, joka on saatavilla useimmissa verkkoselaimissa. Voit käyttää sitä minkä tahansa vierailemasi verkkosivuston käyttöliittymän lähdekoodin muokkaamiseen.
Muutokset, joita teet, tapahtuvat selaimesi hiekkalaatikossa. Et siis tee mitään muutoksia todelliseen verkkosivustoon. Myös tekemäsi pinnalliset muutokset katoavat, kun päivität sivun.
Tässä on joitain luovia tapoja käyttää sitä:
- Sinun on otettava kuvakaappaus verkkosivustolta, ja kuvan tekstit häiritsevät sinua. Käytä Tarkasta elementti -työkalua poistaaksesi kyseiset tekstit.
- Haluat pilata ystäviäsi näyttämällä heille nimesi New York Timesissa tai Washington Postissa. Inspect Element on paras tapa tehdä tämä.
- Testaa virheenkorjauskoodeja verkkosivustoilla ottamalla ne käyttöön reaaliajassa Inspect Element -työkalulla. Jos se toimii, voit muuttaa taustalähdekoodia.
- Digimarkkinoijana voit paljastaa kilpailijoiden avainsanat, SEO-otsikot, sisällönkuvauskentät jne. käyttämällä tätä mahtavaa verkkokehitystyökalua.
Kuinka tarkastaa elementit Windowsissa
Inspect Element -työkalun käyttäminen Windowsissa on naurettavan helppoa. Alta löydät vaiheittaisen oppaan elementtien tarkastamiseen eri Windows-selaimilla:
Google Chromen tarkastustyökalu
- Käytettäessä Google Chrome, oikealla painikkeella missä tahansa verkkosivustolla.
- Napsauta hiiren kakkospainikkeella pikavalikkoa.
- Alareunassa näet Tarkastaa.
- Klikkaus Tarkastaa tarkastellaksesi HTML- ja CSS-koodeja a oikeanpuoleinen paneeli.
Kuinka avaan Inspect Elementin Chromessa ilman hiiren oikeaa napsautusta?
Google Chrome for Windowsissa on joitain käteviä pikanäppäimiä Inspect Element -työkalun avaamiseen. Nämä pikanäppäimet ovat seuraavat:
- Ctrl + Siirtää + C
- Toimintonäppäin F12
Yllä olevat pikanäppäimet toimivat myös Mozilla for Windows -selaimessa.
Mozilla Inspector Tool
Mozilla-selaimessa prosessi on sama kuin Google Chromessa. Kuitenkin Tarkastaja ikkuna tulee näkyviin selaimen alareunaan oikean reunan sijaan, kuten Google Chromessa.
Microsoft Edge Inspect Tool
Yllättäen Microsoft Edgen Inspect Element toimii samalla tavalla kuin Google Chrome -selain. Tarkastustyökalu on käytettävissä hiiren kakkospainikkeella. Myös HTML- ja CSS-koodit näkyvät oikealla puolella, kuten Google Chrome.
Kuinka tarkastaa elementit Macissa
Käytätkö Google Chromea, Mozilla Firefoxia tai Microsoft Edgeä Applen Mac-tietokoneissa? Jos kyllä, voit ottaa Inspect Element -työkalun käyttöön noudattamalla yllä Windows-osiossa mainittuja vaiheita.
Mutta jos käytät oletusarvoista macOS-verkkoselainta, Safaria, Inspect Element -työkalun käyttäminen on hankala peli. Oletusarvoisesti Safari ei näytä Tarkastuselementtiä Macissa. Tässä on mitä sinun tulee tehdä:
Kuinka avata Inspect Element Macissa
Ensinnäkin sinun on aktivoitava kehittäjätyökalut Macin Safarissa. Näin:
- Juosta the Safari selain.
- Vieraile verkkosivustolla, jolla haluat tarkastella verkkoelementtejä.
- Valitse Safari Safari-selaimen ylävalikkopalkista.
- Klikkaus Asetukset avautuvasta kontekstivalikosta.
- Käytössä Asetukset-näyttö, valitse Pitkälle kehittynyt.
- Merkitse Näytä Kehitys valikko alareunassa Lisäasetukset näyttö.
Olet onnistuneesti ottanut kehittäjätyökalut käyttöön Safari for Macissa. Noudata nyt näitä ohjeita käyttääksesi Tarkasta elementtiä:
- missä tahansa verkkosivuston elementissä, kuten tekstissä tai kuvassa, oikealla painikkeella.
- Näkyviin tulee kontekstivalikko. Alareunassa näet Tarkastele elementtiä.
- Napsauta sitä avataksesi virheenkorjausosion verkkosivuston alla, jossa näkyy HTML ja CSS koodit.
Mitkä ovat tarkastuselementin avaimet?
Saatat etsiä pikanäppäimiä Inspect Elementille Macissa. Voit käyttää seuraavia:
- Komento + Siirtää + C
- paina Ohjaus -näppäintä ja valitse sitten mikä tahansa elementti.
- Napsauta ohjauslevyä kahdella sormella
Chromebookien osien tarkastaminen
Chromebook käyttää Google Chromea oletusselaimena. Tästä syystä, kun olet avannut minkä tahansa verkkosivuston, napsauta hiiren kakkospainikkeella löytääksesi Tarkista elementti -vaihtoehdon seuraavasta pikavalikosta.
Jos käytät Chromebookia töistä tai koulusta, saatat kysyä tämän kysymyksen:
Miksi en voi tarkastaa kouluni Chromebookia?
Useimmat koulujen ja yritysten järjestelmänvalvojat poistavat toimittamiensa Chromebookin lisäominaisuudet käytöstä työtä tai opiskelua varten. Koska kehittäjätyökalut ovat lisäominaisuuksia, koulusi tai työpaikkasi Chromebook ei todennäköisesti näytä Inspect Element -työkalua.
Kuinka tarkastaa elementit iPadissa/iPhonessa
Valitettavasti et voi käyttää Inspect Element -työkalua iPhonessa tai iPadissa ilman Macia.
iOS: ssä ja iPadOS: ssä on Web Inspector Safari-sovellukselle. Se toimii kuitenkin vain, jos yhdistät mobiililaitteen Maciin, jossa olet jo aktivoinut Safarin kehittäjätyökalut. Voit kokeilla alla olevia vaiheita:
- Avaa iPad/iPhone asetukset sovellus.
- Klikkaus Safari vasemmanpuoleisessa navigointiruudussa.
- Vieritä sitten alas oikealla puolella löytääksesi ja valitaksesi Pitkälle kehittynyt.
- Aktivoi kytkin kohtaan Verkkotarkastaja.
- Yhdistä nyt mobiililaite Maciin käyttämällä USB.
- Valtuuta iPhone/iPad Macissa.
- Avaa mikä tahansa verkkosivusto mobiililaitteella Safarissa.
- Suorita nyt Safari Macissa ja valitse Kehittää ylävalikkopalkissa.
- Etsi avautuvasta kontekstivalikosta mobiililaitteesi nimi.
- Vie hiiren osoitin mobiililaitteen päälle nähdäksesi kaikki avoimet verkkosivustot.
- Valitse nyt mikä tahansa verkkosivusto tarkastellaksesi HTML- ja CSS-lähdekoodia Macin Safari-selaimessa.
Johtopäätös
Olet tutkinut kaikkia mahdollisia tapoja käyttää Inspect Element -työkalua web-sivujen väliaikaiseen muokkaamiseen. Olet myös oppinut tarkastamaan elementtejä eri laitteille, kuten Macille, Windowsille, Chromebookille, iPadille ja iPhonelle.
Seuraavan kerran, kun sinun on muokattava verkkosivua huvin vuoksi tai ammatillisiin tarpeisiin, kokeile näitä menetelmiä. Rakastat varmasti näitä vaivatonta vaihetta muiden monimutkaisten menetelmien sijaan, jotka on selitetty muualla.
Älä unohda jättää kommentteja alle, jos yllä olevat vaiheet auttoivat sinua, mikä tahansa menetelmä, joka on mielestäsi haastava, tai salaisia vinkkejä Inspect Element -työkaluun.
Tarvitsetko verkkosivun painettuna viitteenä? Opi kuinka tallentaa verkkosivun nopeasti PDF-muodossa nyt!