PresentationerSlide 1/1

Modul 7 · Kapitel 7.7

Testa i webbläsaren

Hitta problemen innan användaren gör det.

Mål

Efter kapitlet ska du kunna...

  • testa layout i olika skärmbredder
  • använda Console och Network
  • kontrollera länkar och formulär
  • testa tangentbordsnavigering och fokus

Responsivt läge

Testa minst tre bredder

SmalMobil
MellanbredSurfplatta eller mindre fönster
BredLaptop eller stor skärm

Leta aktivt

Vanliga responsiva problem

Text överlappar annat innehåll.
Bilder blir bredare än sidan.
Menyer går inte att använda.
Innehåll hamnar i fel ordning.

DevTools

Öppna Inspektera i Chrome

  1. Öppna sidan.
  2. Högerklicka.
  3. Välj Inspektera.

På Mac kan du även trycka ⌘ + ⌥ + I.

Tre viktiga flikar

Välj verktyg efter problemet

ElementsConsoleNetwork
  • Elements: undersök HTML och CSS.
  • Console: läs fel och varningar.
  • Network: kontrollera filer och laddning.

Responsivt läge

Arbetsgång

  1. Öppna Inspektera.
  2. Klicka på mobil- och surfplatteikonen.
  3. Välj en enhet eller dra bredden.
  4. Testa smal, mellanbred och bred vy.
  5. Notera varje problem du hittar.

Interaktiv viewport

Dra sidans bredd

Bred layout med två kolumner.

Min webbplats
StartProjektKontakt
Rubrik och brödtext ligger i huvudkolumnen.
Bild
Footer

Console

Första platsen när JavaScript inte fungerar

Console visar felmeddelanden och varningar från sidan.

Läs särskilt filnamn, radnummer och texten i det röda felet.

Öppna Console

Arbetsgång

  1. Öppna Inspektera.
  2. Välj fliken Console.
  3. Ladda om sidan.
  4. Leta efter röda meddelanden.
  5. Läs filnamn och radnummer.

Vanliga JavaScript-fel

Tre saker att kontrollera

JavaScript-filen saknas.
Ett element hittas inte.
En variabel har fel namn.

Simulerad Console

Ladda om och läs felet

Console

Console är tom.

Network

Se varje fil som sidan laddar

HTML
CSS
JavaScript
Bilder
Ljud och video
Externa resurser

Öppna Network

Arbetsgång

  1. Öppna Inspektera.
  2. Välj Network.
  3. Ladda om medan panelen är öppen.
  4. Kontrollera Status.
  5. Kontrollera Size.

Status 404

Filen hittades inte

NameStatusType
style.css200stylesheet
hero.webp404webp

Kontrollera mapp, filnamn, stora och små bokstäver samt filändelse.

Kolumnen Size

Hitta onödigt stora filer

NameTypeSize
hero.webpwebp4,8 MB
style.cssstylesheet24 kB
main.jsscript18 kB

Stora bilder och videor behöver ofta optimeras.

Cache

Testa med nyhämtade filer

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

Då hämtas CSS och JavaScript på nytt under testet.

Testa användningen

Gör det användaren gör

  • Klicka igenom länkar.
  • Skicka formulär med testdata.
  • Navigera med tangentbord.
  • Kontrollera synligt fokus.
  • Läs felmeddelanden.

Interaktivt tangentbordstest

Tryck Tab direkt

Fortsätt trycka Tab. Den orange markeringen ska följa fokus.

Formulär och länkar

Testa både rätt och fel

TestKontrollera
Giltig formulärdataKan formuläret skickas?
Felaktig eller saknad dataÄr återkopplingen begriplig?
Varje länkÖppnas rätt sida utan 404?

Snabb testchecklista

Före publicering

  • Smal, mellanbred och bred vy fungerar.
  • Console saknar röda fel.
  • Network saknar 404.
  • Mediafiler har rimlig storlek.
  • Alla länkar fungerar.
  • Tangentbord och fokus fungerar.

Sammanfattning

En enkel testordning

  1. Ändra viewportens bredd.
  2. Läs Console.
  3. Kontrollera Network.
  4. Testa utan cache.
  5. Klicka, tabba och skicka formulär.
  6. Rätta en sak i taget och testa igen.