7.2. Selaimen kehittäjäntyökalu

Testausta selaimessa

Googlen Chrome- että Firefox-selaimessa on olemassa hyödyllinen työkalu sivuston kehittäjälle. Työkalu tarkastelee sivun html-koodia ja elementtiin liittyvää CSS-koodia. Työkalussa voi myös asettaa uusia tai muokata olemassa olevia CSS-määrittelyjä. Muutokset eivät tallennu mihinkään, vaan kun sivu ladataan uudelleen painamalla F5-painiketta tai selaimen Refresh-painiketta sivu latautuu uudelleen palvelimelta tai selaimen välimuistista ja asetetut muutokset menetetään.

Voit siis avata verkkosivulta kehittäjän työkalut klikkaamalla selaimessa jonkin sivulla olevan elementin päällä hiiren kakkospainiketta . Valitse avautuvasta valikosta Tarkista(Inspect) Chrome-selaimessa. Mozilla Firefox-selaimessa vastaava toiminto on nimetty Tarkastele (Inspect Element).

Apple tietokoneissa käytettävä Safari-selaimessa on myös erittäin kyvykäs kehittäjäntyökalu nimeltä Web-tarkastaja (Web Inspector) mutta se ei ole oletusarvoisesti päällä vaan se on aktivoitava selaimen asetuksista.
Voit aktivoida Safarin kehittäjäntyökalun seuraavasti:

1. Avaa Safari-selain ja valitse yläpalkista Safari/Asetukset… (Settings).
2. Siirry Lisävalinnat (Advanced) -välilehdelle.
3. Ruksaa alareunasta kohta: Näytä ominaisuudet verkkokehittäjille (Show features for web developers).
   • HUOM: Vanhemmissa MacOS-versioissa teksti voi olla ”Näytä Kehitys-valikko valikkorivillä”.

Google Chromen hallintapaneeli

Tarkastellaan pintapuolisesti Googlen kehittäjätyökalua, jonka käyttöliittymä koostuu kuvien mukaisista paneeleista.

Hallintapaneelissa muotoilemisessa tarvittavat osat ovat seuraavat:

1. Sivun lähdekoodi eli html-koodaus
2. CSS-muotoilut, jos näkyvissä Styles-välilehti.
3. Tätä alinta paneelia ei muotoilutarkoituksessa tarvita, joten voit sulkea sen.
4. Sivunäkymän hallintapaneeli, jossa yllä vasemmalla valittavissa näyttölaitteen asetus ja sen oikealla puolella näkymän resoluutio pikseleinä. Eriväriset viivat alempana ovat sivulla käytössä olevia mediamäärittelyjä.

CSS-muotoilujen paneeli

Kun viet hiiren CSS-hallintapaneelin päälle, jonkin määrityksen päälle voit nähdä kuinka jokaisen määritteen eteen ilmestyy täppä. Jos klikkaat täpän pois, kyseinen määäritys poistuu käytöstä sivun esikatselussa selaimen vasemmalla puolella.

Voit myös lisätä uuden määritteen klikkaamalla jonkin määriterivin lopussa puolipisteen jälkeen. Määritteen arvon muuttaminen tapahtuu klikkaamalla arvon päällä, jolloin arvo muuttuu harmaataustaiseksi. Nyt voit asettaa määritykselle uuden arvon.

Harjoitus

Tehdään pieni harjoitus aiheesta. Klikkaa allaolevan elementin päällä hiiren oikealla painikkeella ja avaa kehittäjän työkalu edellisen ohjeen mukaisesti.

• Muuta ”ON HAUSKAA” tekstin väri vihreäksi asettamalla tekstin color-määrityksen arvoksi Green
• Muuta taustan vihreän laatikon taustaväri (background-color) keltaiseksi asettamalla arvon määritteelksi yellow
• Poista tekstin ”SIVUJEN RAKENTELU” alleviivaus (text-decoration) asettamalla arvoksi none.
• Muuta edellisen tekstin asetus SUURAAKKOSISTA muotoon ”Sivujen Rakentelu” asettamalla CSS-määrittelylle text-transform arvo Capitalize.