Saanen esitellä yhden heittämällä hyödyllisimmistä työkaluista verkkosivustosi ongelmien paljastamiseen. Työkalu on ilmainen, ja löydät sen sisäänrakennettuna Chrome-selaimestasi.

Chromen kehittäjän työkalu on yksi kuningastyökaluista, jonka käyttöön kannattaa perehtyä. Työkalun sisäänrakennetut ominaisuudet tarjoavat suoran pääsyn niin sivustosi rakenteeseen, tyyleihin, tapahtumiin, kuin suorituskyvyn mittareihinkin. Ominaisuuksien avulla pystyt tarkastelemaan ja korjaamaan sivustossasi esiintyviä ongelmia nopeasti, sekä optimoimaan sivuston toimivuutta.

Kehittäjän työkalu ei siis ole vain ammattilaisten työväline, vaan myös erinomainen työväline kaikille, jotka haluavat syventää ymmärrystään verkkosivujen toiminnasta. Tässä artikkelissa kerron sinulle neljä syytä, miksi työkalu kannattaa valjastaa käyttöön heti!

💡 Kehittäjän työkalun saat avattua Chrome-selaimesta klikkaamalla kolmea pistettä selaimen yläkulmassa ⮕ Lisää työkaluja ⮕ Developer Tools

Saat raportin verkkosivusi suorituskyvystä muutamassa sekunnissa

Chromen kehittäjän työkalun Network-välilehti näyttää, kuinka nopeasti verkkosivusi latautuu, missä sivuston kohdissa syntyy viiveitä, ja mitkä resurssit kuormittavat eniten sivujasi. Se paljastaa esimerkiksi suuret tiedostot, joita olisi mahdollista optimoida suorituskykyisemmäksi. Network-välilehti myös näyttää, kuinka monta HTTP-pyyntöä* sivu tekee, mikä voi auttaa hahmottamaan, olisiko järkevää ladata niitä esimerkiksi lazy load -tekniikalla.

*Mikä on HTTP-pyyntö? Kun käyttäjä avaa verkkosivun, selain tekee HTTP(S)-pyyntöjä saadakseen kaiken tarvittavan sisällön. Tämä ei ole vain yksi pyyntö, vaan tyypillisesti kymmeniä, tai jopa satoja pyyntöjä. Näitä ovat esimerkiksi HTML-tiedosto (itse sivun rakenne), CSS-tiedostot (tyylit), JavaScript-tiedostot (toiminnallisuus), kuvat (logo, tuotekuvat, taustat), fontit, API-kutsut (esim. jos sivu hakee jotain dataa dynaamisesti, vaikkapa säätiedot erikseen pyydettäessä), sekä analytiikka- ja mainosskriptit.

Chrome kehittajän työkalun pääsivu. Tarkasteltava verkkosivu asettuu ruudun vasempaan reunaan, kehittäjän työkalun hallintapaneeli näkyy ruudun oikeassa reunassa. — *Miltä kehittäjän työkalu näyttää, kun avaat sen? Tarkasteltava verkkosivu asettuu vasempaan reunaan, kehittäjän työkalu oikealle puolelle.*

Performance-välilehti auttaa yhtälailla analysoimaan sivustosi suorituskykyä, mutta astetta syvällisemmin. Sen avulla voit seurata yksityiskohtaisemmin sivustosi elementtien toimintaa, ja missä kohtaa aikaa kuluu huomattavan paljon. Performance-välilehti näyttää sinulle myös tarkan aikajanan (=timeline) siitä mitä sivullasi tapahtuu. Sen avulla voit analysoida ja optimoida sivuston toimintaa niin, että käyttäjäkokemus olisi mahdollisimman nopea ja sulava eri kohdissa sivustoa.

Chromen kehittäjän työkalu antaa palautteen sivujesi SEO:sta

Vaikka Chromen kehittäjän työkalu ei varsinaisesti ole SEO-työkalu, tarjoaa se kuitenkin muutamia hyödyllisiä ominaisuuksia hakukoneoptimoinnin tarkasteluun. Lighthouse-työkalulla voit tarkistaa, käytetäänkö sivustollasi otsikkotägejä (H1, H2) loogisesti, sekä varmistaa toimiiko sivustosi responsiivisesti mobiililaitteella ja tietokoneella. Elements-osiossa pääset myös tarkistamaan, löytyykö sivustosi kuvista ALT-tekstit, eli kuvien tekstivastineet. ALT-tekstit auttavat hakukoneita ymmärtämään kuvien sisältöä, mikä voi myös parantaa sivuston näkyvyyttä. Lighthouse-työkalu analysoi siis sivustosi, ja laatii sinulle raportin siitä, noudattaako verkkosivusi hakukoneoptimoinnin perusohjeita.

Kehittäjän työkalu paljastaa, miltä verkkosivusi näyttää eri mobiililaitteilla

Chrome kehittäjän työkalun Device Toolbar -ominaisuudella voit simuloida eri laitteita ja näyttökokoja, sekä tarkistaa miltä verkkosivustosi näyttäisi erikokoisilla laitteilla (iPhone, Galaxy, iPad, Galaxy Tab..). Device Toolbar avautuu ruudun vasemmalle puolelle, kun käynnistät kehittäjän työkalun.

Voit halutessasi valita tietyn laitemallin (esimerkiksi kuvassa näkyvä iPhone 14 Pro Max), ja tarkistaa miten verkkosivustosi istuu kyseisen mallin näytöllä. Tarvittaessa voit määrittää myös täysin omat mitat, joilta tarkastella sivustosi toimivuutta.

Network-välilehden network throttling -ominaisuudella voit hidastaa verkkoyhteyttä, sekä testata sivustosi toimivuutta vaikkapa 3G-verkkoyhteydellä. Tällöin näet, kuinka hitaat verkkoyhteydet vaikuttavat sivustosi latautumiseen.

*Tältä verkkosivuni näyttää iPhone 14 Pro Max -laitteella. Työkalulla voit valita myös kustomoidut mitat.*

Kehittäjän työkalun avulla voit tarkastella muiden verkkosivujen sisältöä ja elementtejä

Kiinnostuitko jonkun muun verkkosivun fontista, väreistä, tai rakenteesta? Chromen kehittäjän työkalun avulla voit helposti nähdä, mitä tyylejä, tai luokkia muut verkkosivustot hyödyntävät. Työkalun avulla näet helposti, mitä väriyhdistelmiä taikka fontteja sivustolla on käytetty.

Mikäli haluat tarkastella jotain sivustolla esiintyvää elementtiä tarkemmin, klikkaa elements-välilehteä, ja valitse työkalussa kohta “select an element in the page to inspect it”. Tämän jälkeen vie hiiri minkä tahansa elementin päälle, jota haluat tarkastella tarkemmin. Elementti korostuu, ja sen HTML näkyy tällöin elements-välilehdellä. Oikealla näet myös kaikki CSS-tyylit, joita elementtiin sovelletaan.