Slik behandler Bugs med en Debugger i din HTML5 spill

January 24  by Eliza

Når du skriver looper og forhold, kan ting gå ganske dårlig i HTML-spill kode og en debugger kan være nødvendig. Noen ganger er det veldig vanskelig å si hva som skjer. Heldigvis moderne nettlesere har noen fine verktøy som hjelper du ser på koden mer nøye.

En debugger er et spesielt verktøy som lar deg kjøre et program i "slow motion", flytte en linje av gangen, slik at du kan se nøyaktig hva som skjer. Google Chrome har en innebygd debugger, så la oss begynne med den.

For å se hvordan en debugger fungerer, gjør du følgende:

  1. Laste inn en side i Chrome.

    Du kan legge til en debugger til de fleste nettlesere, men Chrome har en innebygd, så start med den. Du vil laste forLoops.html side fordi sløyfer er en vanlig kilde til feil.

  2. Åpne Developer Tools vinduet.

    Hvis du høyreklikke hvor som helst på siden og velger Undersøk Element, du får en fantastisk debugging verktøy.

    Slik behandler Bugs med en Debugger i din HTML5 spill

  3. Inspisere side med kategorien Elements.

    Standard kategorien viser deg siden i en disposisjonsvisning, slik at du kan se strukturen på siden din. Hvis du klikker på et element i disposisjonen, kan du se hva stiler er tilknyttet elementet. Selve elementet er også markert på hovedsiden, slik at du kan se nøyaktig hvor alt er. Dette kan være svært nyttig for å sjekke din HTML og CSS.

  4. Se på fanen Console.

    Helst koden din ikke fungerer som forventet, se på fanen Console. Ofte vil det være en feilmelding her som forklarer hva som går galt.

  5. Gå til kategorien Scripts.

    Utvikleren verktøyet har en egen fane for å arbeide med Javascript-kode. Velg fanen skript for å se hele kode på en gang. Hvis siden trekker i eksterne Javascript-filer, vil du være i stand til å velge dem her også.

  6. Still et stoppunkt.

    Vanligvis, du la programmet starter i normal hastighet og bremse ned rett før du kommer til en problemfri sted. I dette tilfellet, er du interessert i tellingen () -funksjonen, så klikk på den første linjen (17) av den funksjonen i koden vinduet. (Det er mer pålitelig å klikke på den første linjen i funksjonen enn linjen som erklærer det, så klikk linje 17 i stedet for linje 16.)

  7. Oppdatere siden.

    I hovedleseren, klikker du Oppdater eller trykk F5 for å oppdatere siden. Siden kan i utgangspunktet være blank. Det er greit - det betyr at programmet har stanset når det oppstått funksjonen.

  8. Tre inn i neste linje.

    På utvikler verktøy er en rekke knapper på toppen av høyre kolonne. Klikk på Gå inn i neste linje knappen, som ser ut som en pil ned med en prikk under den. Du kan også trykke på F11-tasten for å aktivere kommandoen.

  9. Din side er nå i gang.

    Hvis du ser tilbake på hovedsiden, bør du se det er nå oppe og går. Ingenting skjer ennå fordi du ikke har aktivert noen av knappene.

  10. Klikk greven knappen.

    Greven knappen skal aktivere koden i tellingen funksjon. Klikk på denne knappen for å se om det er det som skjer.

  11. Kode skal nå være stanset på linje 17.

    Tilbake i koden vinduet, er linje 17 nå markert. Det betyr at nettleseren er satt på pause, og når du aktiverer Step-knappen, utfører uthevet kode.

  12. Trinn et par ganger.

    Bruk F11-tasten eller Gå inn i neste linje-knappen for å gå fram et par ganger. Se hvordan høydepunktet beveger seg rundt slik at du faktisk kan se løkken skjer. Dette er svært nyttig når koden ikke oppfører seg ordentlig fordi det tillater deg å se nøyaktig hvordan prosessoren er på vei gjennom koden din.

  13. Hold markøren over variabelen i i koden.

    Når du er i feilsøkingsmodus, kan du holder musen over en variabel i koden vinduet, og du vil se hva den nåværende verdien av denne variabelen er. Ofte når koden fungerer dårlig, er det fordi en variabel ikke gjør hva du tror det er.

  14. Legg en klokke uttrykk for å forenkle å se på variabler.

    Hvis du tror sløyfen er ikke oppfører seg, kan du legge en klokke uttrykk for å gjøre debugging enklere. Rett under trinn knappene du vil se en fane som heter ur uttrykk. Klikk på plusstegnet for å legge et nytt uttrykk. Type I og trykk på Enter.

  15. Fortsett å tråkke gjennom koden.

    Nå kan du fortsette å gå gjennom koden og se hva som skjer til variabelen. Dette er utrolig nyttig når koden ikke fungerer slik du vil ha det til.

Debugger innebygd i Chrome er en av de beste der ute, men det er ikke det eneste valget. Hvis du bruker Firefox, legger den utmerkede Firebug forlengelse samme funksjonalitet til Firefox.

Safari har en lignende web Inspektør verktøy innebygd, og selv IE9 har endelig en anstendig debugger kalt F12. Alt arbeid i omtrent samme måte. Vanligvis, skjønt, krasjer en Javascript-feil alle nettlesere, så velg en du liker for innledende testing og deretter bruke andre nettleserspesifikke verktøy bare når det er nødvendig.