Elementtien tarkastaminen Macissa, Windowsissa, iPhonessa ja iPadissa

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 on saatavana suosittujen verkkoselaimien mukana. Sinun tarvitsee vain tietää, miten 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 muutoksia varsinaiseen 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, hakukoneoptimoinnin 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

Elementtien tarkastaminen Windows Chrome -selaimessa

• Kun käytät Google Chromea , napsauta hiiren kakkospainikkeella mitä tahansa verkkosivuston kohtaa.
• Napsauta hiiren kakkospainikkeella pikavalikkoa.
• Alareunassa näkyy Tarkista .
• Napsauta Tarkista nähdäksesi HTML- ja CSS-koodit oikeanpuoleisessa paneelissa .

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 + Vaihto + C
• Toimintonäppäin F12

Yllä olevat pikanäppäimet toimivat myös Mozilla for Windows -selaimessa.

Mozilla Inspector Tool

Elementtien tarkastaminen Windows Mozilla -selaimessa

Mozilla-selaimessa prosessi on sama kuin Google Chromessa. Tarkastaja- ikkuna tulee kuitenkin näkyviin selaimen alareunaan oikean reunan sijaan, kuten Google Chromessa.

Microsoft Edge Inspect Tool

Kuinka tarkastaa elementit Windows Edge -selaimessa

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:

• Suorita Safari -selain .
• Vieraile verkkosivustolla, jolla haluat tarkastella verkkoelementtejä.
• Valitse Safari Safari-selaimen ylävalikkopalkista.
• Napsauta Asetukset avautuvasta pikavalikosta .
• Valitse Asetukset- näytöstä Lisäasetukset .
• Valitse Näytä kehitysvalikko Lisäasetukset- näytön alareunassa .

Kehittäjätyökalut on otettu käyttöön Safari for Macissa onnistuneesti. Noudata nyt näitä ohjeita käyttääksesi Tarkasta elementtiä:

• Napsauta hiiren kakkospainikkeella missä tahansa verkkosivuston elementissä, kuten tekstissä tai kuvassa .
• Näkyviin tulee kontekstivalikko. Alareunassa näkyy Tarkista elementti .
• Napsauta sitä avataksesi virheenkorjausosion verkkosivuston alla, joka näyttää HTML- ja CSS- koodit.

Mitkä ovat tarkastuselementin avaimet?

Saatat etsiä pikanäppäimiä Inspect Elementille Macissa. Voit käyttää seuraavia:

• Komento + Vaihto + C
• Paina Control- 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 iPadin/iPhonen Asetukset -sovellus.
• Napsauta vasemman reunan navigointiruudussa Safari .

Safari-asetusten avaaminen iPadissa tai iPhonessa

• Vieritä sitten alas oikealla puolella löytääksesi ja valitaksesi Lisäasetukset .

Web Inspectorin aktivointi iPadissa ja iPhonessa

• Aktivoi Web Inspectorin kytkin .
• Liitä nyt mobiililaite Maciin USB:n avulla .
• Valtuuta iPhone/iPad Macissa.
• Avaa mikä tahansa verkkosivusto mobiililaitteella Safarissa.
• Suorita nyt Safari Macissa ja valitse ylävalikkopalkista Kehitä .
• 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 laitteissa, kuten Macissa, Windowsissa, Chromebookissa, iPadissa ja iPhonessa.

Seuraavan kerran, kun sinun on muokattava verkkosivua huvin vuoksi tai ammatillisiin tarpeisiin, kokeile näitä menetelmiä. Tulet varmasti rakastamaan 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ökalusta.

Tarvitsetko verkkosivun painettuna referenssinä? Opi tallentamaan verkkosivu nopeasti PDF-muodossa nyt!