Kuvakaappaustyökalu tallentaa korkealaatuisia kuvia mistä tahansa verkkosivusta kahdessa tilassa: näkyvä alue (täsmälleen se, mitä näet selainikkunassa) tai koko sivu (koko sivu ylhäältä alas, myös fold-rajan alla oleva sisältö). Kuvakaappaukset tallennetaan korkearesoluutioisina PNG-tiedostoina ja ladataan välittömästi laitteellesi — ei pilvilatauksia, ei tilejä, ei odottelua.
Selaimen omat kuvakaappaukset (käyttöjärjestelmätason työkaluilla kuten Cmd+Shift+4 tai Kaappaustyökalu) tallentavat koko näytön, mukaan lukien selaimen käyttöliittymän, työkalupalkit ja muut ikkunat. Ne eivät pysty kaappaamaan sisältöä, joka jää näkyvän alueen alapuolelle. DevSuiten Screenshot-työkalu ratkaisee molemmat ongelmat — se kaappaa vain verkkosivun sisällön (ei selaimen käyttöliittymää) ja pystyy vierittämään koko sivun läpi luodakseen saumattoman koko sivun kuvan.
Näkyvän alueen tila käyttää Chromen omaa capture-API:a pikselintarkkaan tarkkuuteen. Koko sivun tila vierittää sivua automaattisesti, kaappaa jokaisen näkymäruudun ja liittää ne yhteen yhdeksi jatkuvaksi kuvaksi. Lopputulos on täysresoluutioinen PNG-kuva (näyttösi device pixel ration mukaisesti), joten kuvakaappaukset ovat terävän näköisiä Retina- ja muilla high-DPI-näytöillä.
Kiinteät ja sticky-elementit (otsikkopalkit, evästebannerit, chat-widgetit) käsitellään automaattisesti koko sivun kaappauksen aikana: koska työkalu vierittää oikeaa sivua sen sijaan, että se koostaisi kuvaruutuja headless-renderöijästä, mihin tahansa näkymään kiinnitetty elementti kaapataan vain kerran oikeassa kohdassaan sen sijaan, että se toistuisi jokaisessa ruudussa. Lazy-loadatut kuvat ja sisältö, joka renderöityy vasta kun se vieritetään näkyviin, laukeavat luonnollisesti kaappauksen vierittäessä niiden ohi, joten lopullinen kuva vastaa sitä, mitä oikea kävijä näkisi — ei tyhjää placeholder-ruudukkoa — mikä on tärkeää erityisesti kuvapainotteisille laskeutumissivuille ja pitkille artikkeleille.
Kaappaa täsmälleen se, mikä näkyy selaimen viewportissa — tarkka suorakaide siitä sisällöstä, jonka käyttäjä näkee. Ei selaimen kehystä, ei työkalupalkkeja, ei vierityspalkkeja. Pelkkä puhdas verkkosivun sisältö sellaisena kuin se näkyy ruudulla. Yksi napsautus, välitön kaappaus.
Kaappaa koko sivu ylhäältä alas, mukaan lukien kaikki fold-rajan alla oleva sisältö. Työkalu vierittää sivua automaattisesti, kaappaa jokaisen osion ja yhdistää ruudut yhdeksi saumattomaksi, yhtenäiseksi kuvaksi. Toimii minkä pituisilla sivuilla tahansa.
Kuvakaappaukset kaapataan näyttösi natiivin pikselisuhteen mukaisesti (2x Retina-näytöillä, 1,5x joillakin Windows-näytöillä). Tuloksena on terävä, korkearesoluutioinen kuva, joka näyttää tarkkana myös lähennettynä — ei sitä sumeutta, jota käyttöjärjestelmän kuvakaappaustyökalut tuottavat.
Kaapattu kuva tallennetaan häviöttömänä PNG-tiedostona ja ladataan suoraan laitteellesi heti. Ei pilvilatausta, ei odottelua käsittelyä varten, ei tiliä tarvita. Tiedosto ilmestyy lataukset-kansioon sekunneissa.
Kaappaus sisältää ainoastaan verkkosivun sisällön — ei selaimen välilehtiä, osoitepalkkia, kirjanmerkkipalkkia tai laajennusten työkalupalkkia. Lopputulos näyttää täsmälleen siltä kuin sivu näyttäisi ilman selaimen UI:ta.
Kaappaa minkä tahansa verkkosivun riippumatta siitä, miten se on rakennettu — staattinen HTML, SPAs (React, Vue), laiskasti ladatut kuvat, loputon vieritys, kiinteät otsikot ja fixed-position-elementit. Koko sivun tila käsittelee ne kaikki.
Kaappaa kokosivu-kuvakaappauksia suunnittelemistasi tai kehittämistäsi verkkosivuista portfoliotasi varten. Koko sivun tila antaa sinulle täydellisen, saumattoman kuvan, joka esittää koko sivun suunnittelun — täydellinen Behanceen, Dribbleen tai portfolio-tapaustutkimuksiin.
Virhettä raportoidessa kuvakaappaus kertoo enemmän kuin tuhat sanaa. Kaappaa täsmällinen viewport, joka näyttää ongelman, tai koko sivun kuvakaappaus, joka osoittaa, miten virhe vaikuttaa koko ulkoasuun. Liitä se GitHub-issueen tai Jira-tikettiin.
Kaappaa staging-sivuston nykyinen tila sidosryhmien katselmointia varten. Kokosivu-kuvakaappaukset antavat asiakkaille mahdollisuuden nähdä koko suunnittelun ilman, että heidän tarvitsee vierailla sivustolla itse — hyödyllinen ei-teknisten sidosryhmien katselmoinneissa.
Ota kuvakaappaus ennen muutosten tekemistä, sitten toinen muutosten jälkeen. Vertaile kahta kuvaa vierekkäin varmistaaksesi, että CSS- tai ulkoasumuutoksesi näyttävät oikeilta koko sivulla — ei vain siinä osiossa, johon keskityit.
Luo siistejä, ammattimaisia kuvia verkkosivuista blogikirjoituksia, tviittejä tai esityksiä varten. Työkalupalkiton, selainkehyksetön lopputulos näyttää viimeistellyltä ja ammattimaiselta — selaimen UI:ta ei tarvitse rajata pois.
Avaa DevSuite Pro:n telakka tai ponnahdusikkuna ja napsauta kuvakaappauksen kuvaketta. Näkyviin tulee tilanvalitsin kahdella vaihtoehdolla: "Näkyvä alue" ja "Koko sivu".
Napsauta "Näkyvä alue" kaapataksesi nykyisen viewportin (sen, mitä näet juuri nyt), tai "Koko sivu" kaapataksesi koko sivun ylhäältä alas.
Näkyvän alueen kaappaukset ovat välittömiä (alle sekunti). Koko sivun kaappaukset vievät muutaman sekunnin, kun työkalu vierittää sivua ja yhdistää ruudut. Edistymistilaitin näyttää kaappauksen tilan.
Kaapattu kuva ladataan automaattisesti PNG-tiedostona. Tarkista selaimesi lataukset-kansio — tiedosto on nimetty sivun otsikon ja aikaleiman mukaan.
Työkalu pysyy aktiivisena jokaisen kaappauksen jälkeen. Ota lisää kuvakaappauksia samoilta tai eri sivuilta ilman uudelleenaktivointia. Vieritä, tee muutoksia ja kaappaa uudelleen.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 64 kehittäjätyökalua selaimellesi.
