Modul 7

Kap 7.7 - Testa i webbläsaren

Testning gör att du hittar problem innan användaren gör det.

Mål

  • Testa layout i olika skärmbredder.
  • Använda konsol och Network för felsökning.
  • Kontrollera länkar, formulär och tangentbordsnavigering.

Responsivt läge

Öppna utvecklarverktygen och testa sidan i smal, mellanbred och bred vy. Leta efter överlappande text, för breda bilder, trasiga menyer och innehåll som hamnar i fel ordning.

Öppna Inspektera i Chrome

Med utvecklarverktygen menas Chromes verktyg som öppnas med Inspektera. De kallas också DevTools.

  1. Öppna sidan i Chrome.
  2. Högerklicka någonstans på sidan.
  3. Välj Inspektera.
  4. Nu öppnas en panel med flikar som Elements, Console och Network.

Du kan också öppna samma verktyg med F12, Ctrl + Shift + I eller på Mac Cmd + Option + I.

Guide: testa responsivt läge

  1. Öppna Inspektera.
  2. Klicka på ikonen som ser ut som en mobil och surfplatta.
  3. Välj en mobilstorlek eller dra själv i sidans bredd.
  4. Testa smal, mellanbred och bred vy.
  5. Leta efter text som överlappar, bilder som blir för breda och menyer som inte går att använda.

Konsol och Network

Konsolen visar JavaScript-fel och ibland saknade resurser. Network visar vilka filer som laddas och om någon fil ger 404.

Guide: öppna Konsol

Console, eller Konsol, visar felmeddelanden och varningar från sidan. Det är ofta första platsen du tittar om JavaScript inte fungerar.

  1. Öppna Inspektera.
  2. Klicka på fliken Console.
  3. Ladda om sidan.
  4. Leta efter röda felmeddelanden.
  5. Läs om felmeddelandet nämner ett filnamn eller radnummer.

Vanliga fel är att en JavaScript-fil saknas, att ett element inte hittas eller att en variabel har fel namn.

Guide: öppna Network

Network visar vilka filer sidan laddar: HTML, CSS, JavaScript, bilder, ljud, video och externa resurser.

  1. Öppna Inspektera.
  2. Klicka på fliken Network.
  3. Ladda om sidan medan Network är öppet.
  4. Titta på kolumnen Status.
  5. Om du ser 404 betyder det att filen inte hittas.
  6. Titta på kolumnen Size för att se stora filer.

Om en bild inte syns på sidan kan Network visa om sökvägen är fel. Kontrollera mapp, filnamn, stora och små bokstäver samt filändelse.

Guide: testa utan cache

Ibland visar webbläsaren en gammal version av CSS eller JavaScript. Då kan cache störa felsökningen.

  1. Öppna Network.
  2. Kryssa i Disable cache.
  3. Låt Inspektera vara öppet.
  4. Ladda om sidan.

Nu hämtar webbläsaren filerna på nytt medan utvecklarverktygen är öppna.

Testa användning

Klicka igenom länkar, skicka formulär med testdata och navigera med tangentbord. Kontrollera också att fokus syns och att felmeddelanden är begripliga.

Snabb testchecklista

  • Fungerar sidan i mobil, mellanbred och bred vy?
  • Finns det röda fel i Console?
  • Finns det saknade filer med 404 i Network?
  • Är några bilder eller videor onödigt stora?
  • Fungerar alla länkar?
  • Går det att använda sidan med tangentbord?
  • Syns fokusmarkeringen när du trycker Tab?