JavaScript-virheenkorjaus


Sisällysluettelo

    Näytä sisällysluettelo


Virheitä voi (tulee) tapahtua aina, kun kirjoitat uuden tietokonekoodin.


Koodin virheenkorjaus

Ohjelmointikoodi saattaa sisältää syntaksivirheitä tai loogisia virheitä.

Monia näistä virheistä on vaikea diagnosoida.

Usein, kun ohjelmointikoodi sisältää virheitä, mitään ei tapahdu. On ei virheilmoituksia, etkä saa ohjeita, mistä etsiä virheitä.

Ohjelmointikoodin virheiden etsimistä (ja korjaamista) kutsutaan koodin virheenkorjaukseksi.


JavaScript-virheenkorjaajat

Virheenkorjaus ei ole helppoa. Mutta onneksi kaikissa nykyaikaisissa selaimissa on sisäänrakennettu JavaScript-debuggeri.

Sisäänrakennetut debuggerit voidaan ottaa käyttöön ja poistaa käytöstä, jolloin virheistä on ilmoitettava käyttäjä.

Debuggerilla voit myös asettaa keskeytyspisteitä (paikkoja, joissa koodi suoritetaan voidaan pysäyttää) ja tutkia muuttujia koodin suorittamisen aikana.

Normaalisti (muussa tapauksessa noudata tämän sivun alareunassa olevia ohjeita) aktivoit virheenkorjauksen selaimessasi käyttämällä F12-näppäintä ja valitse "Console" virheenkorjausvalikosta.


Console.log() -menetelmä

Jos selaimesi tukee virheenkorjausta, voit komennolla console.log() näytä JavaScript-arvot virheenkorjausikkunassa:

Esimerkki

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html> 

Vinkki: Lue lisää console.log()-menetelmästä JavaScript-konsoliviittauksesta.


Katkopisteiden asettaminen

Viankorjausikkunassa voit asettaa keskeytyskohtia JavaScript-koodiin.

Jokaisessa keskeytyskohdassa JavaScript lopettaa suorittamisen ja antaa sinun tutkia JavaScript-arvot.

Kun olet tutkinut arvot, voit jatkaa koodin suorittamista (yleensä toistopainike).



Virheenkorjausavainsana

debuggeri-avainsana pysäyttää JavaScriptin suorittamisen, ja kutsuu (jos saatavilla) virheenkorjaustoiminnon.

Tällä on sama toiminto kuin keskeytyskohdan asettamisella debuggerissa.

Jos virheenkorjausta ei ole saatavilla, virheenkorjauskäskyllä ei ole vaikutusta.

Kun debuggeri on käytössä, tämä koodi lopettaa suorittamisen ennen sitä suorittaa kolmannen rivin.

Esimerkki

let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Debugger</h2>

<p id="demo"></p>

<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>

<script>
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Tärkeimpien selainten virheenkorjaustyökalut

Normaalisti aktivoit virheenkorjauksen selaimessasi F12-näppäimellä ja valitset virheenkorjausvalikosta "Console".

Muussa tapauksessa toimi seuraavasti:

Kromi

  • Avaa selain.

  • Valitse valikosta "Lisää työkaluja".

  • Valitse työkaluista "Kehittäjätyökalut".

  • Valitse lopuksi Konsoli.

Firefox

  • Avaa selain.

  • Valitse valikosta "Web Developer".

  • Valitse lopuksi "Web Console".

Reuna

  • Avaa selain.

  • Valitse valikosta "Kehittäjätyökalut".

  • Valitse lopuksi "Console".

Ooppera

  • Avaa selain.

  • Valitse valikosta "Kehittäjä".

  • Valitse "Kehittäjä" -kohdasta "Kehittäjätyökalut".

  • Valitse lopuksi "Console".

Safari

  • Siirry päävalikosta kohtaan Safari, Preferences, Advanced.

  • Valitse "Ota käyttöön Näytä kehitysvalikko valikkorivillä".

  • Kun uusi vaihtoehto "Kehitä" ilmestyy valikkoon:
    Valitse Näytä virhe Konsoli".


Tiesitkö?

Virheenkorjaus on prosessi, jolla testataan, löydetään ja vähennetään tietokoneohjelmien virheitä.
Ensimmäinen tunnettu tietokonevika oli todellinen bugi (hyönteis), joka oli juuttunut elektroniikkaan.