Tässä artikkelissa näytämme, kuinka voit ottaa kuvakaappauksia tietyistä verkkosivun elementeistä tai koko verkkosivusta Google Chromen kehittäjätyökalujen avulla.
Sisällön aihe:
- Avaa Google Chromen kehittäjätyökalut
- Tietyn elementin valitseminen verkkosivulta Google Chromen kehittäjätyökalujen avulla
- Kuvakaappausten ottaminen verkkosivun elementeistä Google Chromen kehittäjätyökaluilla
- Kuvakaappausten ottaminen koko verkkosivusta Google Chromen kehittäjätyökaluilla
- Johtopäätös
- Viitteet
Avaa Google Chromen kehittäjätyökalut
Avaa Google Chromen kehittäjätyökalut käynnistämällä Google Chrome, käymällä verkkosivulla, josta haluat ottaa kuvakaappauksia, ja painamalla
Jos tarvitset apua Google Chromen kehittäjätyökalujen avaamisessa, lue artikkeli aiheesta Kuinka avata Google Chromen kehittäjätyökalut .
Tietyn elementin valitseminen verkkosivulta Google Chromen kehittäjätyökalujen avulla
Jos haluat ottaa kuvakaappauksia tietystä Web-sivun elementistä Google Chrome Developer Toolsin avulla, sinun on voitava valita elementti, josta haluat ottaa kuvakaappauksia verkkosivulta.
Voit valita elementin verkkosivulta Google Chromen kehittäjätyökalujen Elementit-välilehdeltä.
Voit myös käyttää Google Chromen kehittäjätyökalujen 'Tarkista'-työkalua valitaksesi elementin verkkosivulta.
Käytä tarkastustyökalua napsauttamalla
Google Chromen kehittäjätyökalujen vasemmasta yläkulmasta.
Valitse elementti, josta haluat ottaa kuvakaappauksen verkkosivulta. Kun elementti on valittu, HTML-koodiosion pitäisi myös valita automaattisesti 'Elementit'-välilehdeltä.
Kuvakaappausten ottaminen verkkosivun elementeistä Google Chromen kehittäjätyökaluilla
Ota kuvakaappaus valitusta verkkosivun elementistä napsauttamalla hiiren kakkospainikkeella (RMB) valittua HTML-emäelementtiä 'Elementit' -välilehdeltä ja napsauttamalla 'Capture node screenshot'.
Kuvakaappaus valitusta verkkosivun elementistä tulee ottaa ja tallentaa tietokoneellesi.
Kuten näet, kuvakaappaus valitusta verkkosivun elementistä on otettu onnistuneesti.
Yritetään ottaa kuvakaappaus toisesta verkkosivun elementistä Google Chromen kehittäjätyökalujen avulla.
Valitse sisällysluettelo jostakin LinuxHint-artikkelista, napsauta sitä hiiren kakkospainikkeella (RMB) ja napsauta 'Capture node screenshot' -kuvaketta ottaaksesi kuvakaappauksen aivan kuten teimme äskettäin.
Kuvakaappaus on nyt otettu ja tallennettu.
Kuten näet, kuvakaappaus vain sisällysluettelosta otetaan.
Kuvakaappausten ottaminen koko verkkosivusta Google Chromen kehittäjätyökaluilla
Ota kuvakaappaus koko verkkosivusta siirtymällä Google Chromen kehittäjätyökalujen Elements-välilehteen. Vieritä ylös ja valitse html-tunniste. Tämä valitsee koko verkkosivun.
Napsauta nyt hiiren kakkospainikkeella (RMB) html-tunnistetta ja napsauta 'Capture node screenshot'.
Koko verkkosivun kuvakaappaus tulee ottaa ja tallentaa tietokoneellesi.
Kuten näet, koko verkkosivun kuvakaappaus on otettu onnistuneesti.
Johtopäätös
Näimme sinulle, kuinka voit avata Google Chromen kehittäjätyökalut. Näimme myös, kuinka voit valita tiettyjä verkkosivun elementtejä Google Chrome Developer Toolsin tarkastustyökalulla ja kuinka ottaa kuvakaappauksia tietyistä verkkosivun elementeistä ja koko verkkosivusta Google Chrome Developer Tools -työkalujen avulla.