Selain on kehittäjän kaveri! Tässä juttusarjassa käyn läpi selainten kehittäjätyökaluja ja miten niitä käytetään avuksi web-kehittäjän ja miksei suunnittelijankin töissä. Ensimmäisessä osassa teen yleiskatsauksen työkaluista esimerkkinä Google Chrome. Tulevissa osissa voin käsitellä yksittäisiä työkaluja ja niiden käyttöä työnkulussa.
Mitä ja miksi?
Selainten kehittäjätyökalut näyttävät mm. sivun rakenteeen sellaisena kuin selain on sen sivun lähdekoodista rakentanut. Elements välilehden näkymä ei siis ole sivun lähdekoodi vaan selaimen renderöimän sivun DOM rakenne. Työkalut mahdollistavat mm. sivun sisällön, dataliikenteen, tiedostojen, resurssien ja tapahtumien seuraamisen sekä analysoinnin. Kehittäjä työkaluilla voidaan mm. muokata sivun tyylejä ”lennossa” mikä helpottaa sivun testausta ja suunnittelua.
Käytä kehittäjätyökaluja sivun sisällön ja toiminnan analysointiin tai esimerkiksi JavaScript toiminnallisuuden debuggaamiseen.
Miten kehittäjätyökalut saa näkyviin
Vaihtoehtoja on useita.
- Valitse Google Chrome menu ja sieltä More tools > Developer tools
- Napsauta mitä tahansa elementtiä sivulla hiiren kakkospainikkeella ja valitse Inspect element (tarkastele elementtiä)
- Käytä näppäinoikotietä Cmd + Alt + i (Mac) tai Ctrl + Shift + i (Windows)
Suosittelen opiskelemaan näppäinoikotiet. Tässä, kuten kaikissa muissakin tehtävissä näppäimistöltä työskentely nopeuttaa ja tehostaa työnkulkua tuntuvasti. Kattava ellei täydellinen lista Chromen näppäinkomennoista löytyy Chromen kehittäjäsivustolta.
Kehittäjätyökalut ikkuna
Oletuksena selaimen alaosaan avautuva ikkuna sisältää useita työkaluja kehittäjän käyttöön. Työkalut on ryhmitelty aiheen ja käyttötarkoituksen mukaan omiin ”välilehtiin”. Kaiken kaikkiaan näitä ryhmiä on kahdeksan.
- Elements
- Network
- Sources
- Timeline
- Profiles
- Resources
- Audits
- Console
Lisäksi samasta valikosta voidaan valita sivun tarkastelu mobiilinäkymässä. Ikkuna on asemoitavissa selainikkunan alalaitaan, sivulle tai irralleen erilliseen ikkunaan. Valitse haluamasi haluamasi asemointi sivun tai tekemäsi toiminnan mukaan.
Mitä seuraavissa osissa?
Seuraavalla kerralla kerron miten hyödyntää Elements näkymän työkaluja. Kuinka hyödyntää selainta CSS tyylien testaamisessa, responsiivisten sivustojen suunnittelussa ja yleisessä webbikehityksessä tai hienojen verkkosivujen analysoinnissa. Myöhemmissä osissa annan vinkkejä muiden työkalunäkymien käytöstä.