JavaScript-debuggaus

Ohjelmointikoodi saattaa sisältää syntaksivirheitä tai loogisia virheitä. Monet näistä virheistä on vaikea diagnosoida. Ikävä kyllä usein ohjelmointikoodi, erityisesti JavaScript-koodi, ei anna virheilmoitusta tai ilmoitusta sellaisessa muodossa, että virhe olisi helppo korjata.

Ohjelmointikoodin virheiden etsimistä (ja korjaamista) kutsutaan debuggaamiseksi ja tämän harjoituksen tarkoituksena on auttaa sinua JavaScript-virheenkorjausprosessissa.

Erilaisia virheenkorjausmenetelmiä

Työkalujen tunteminen voi vaikuttaa merkittävästi koodarin aikaansaavuuteen. Huolimatta JavaScriptin maineesta vaikeasti korjattavista bugeista, debuggaus-työkalujen hallinta auttaa, jolloin bugit korjaus vie vähemmän aikaa.

console.log()

Helpoin ja käytetyin tapa JavaScript-koodin virheenkorjaukseen on printata muuttujien arvoja selainkonsoliin. console.log() on se, mitä useimmiten käytetään tähän tarkoitukseen, mutta “console”-objektilla on monia muitakin hyödyllisiä funktioita.

Lue lisää:

1. https://developer.mozilla.org/en-US/docs/Web/API/console

2. https://blog.webdevsimplified.com/2022-03/console-methods/

Tai katso video:

Selaimen debuggeri ja debugger-komento

Kaikissa nykyaikaisissa selaimissa on sisäänrakennettu JavaScript-virheenkorjaus. Sisäänrakennetut debuggerit voivat kytkeä päälle ja pois päältä, jolloin virheistä on ilmoitettava käyttäjälle.

Debuggerilla voit myös asettaa keskeytyspisteitä (paikkoja, joissa koodin suoritus voi pysäytetään) ja tutkia muuttujia koodin suorittamisen aikana.

Virheenkorjauksen voi aktivoida selaimessa yleisimmin F12-näppäimellä ja valitset “Konsoli” virheenkorjausvalikossa.

Koodisi sisällä oleva debugger-avainsana pysäyttää JavaScriptin suorittamisen, ja kutsuu (jos saatavilla) virheenkorjaustoiminnon. Tällä on sama toiminto kuin keskeytyskohdan asettaminen debuggeriin. Jos virheenkorjausta ei ole saatavilla, debugger-komennolla ei ole vaikutusta.

Lue lisää:

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

2. https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html

tai katso video:

Virheenkorjaus VSCodessa

Luultavasti joustavin tapa korjata JavaScript-virheitä on tehdä se VSCodessa. Seuraava video näyttää kuinka se tehdään:

HUOMAA: VSCodeen täytyy asentaa LiveServer-laajennus, jotta tämä toimii!

Palautusta lähetetään...