tämä opetusohjelma opettaa sinulle perus-työnkulun minkä tahansa JavaScript-ongelman virheenkorjaukseen Devtoolsissa. Lue, tai katso videoversio tämän opetusohjelman, alla.

# Vaihe 1: Toista vika

sellaisten toimintojen löytäminen, jotka jatkuvasti toistavat virheenkorjausta, on aina ensimmäinen vaihe virheenkorjauksessa.

1. Napsauta Avaa Demo. Demo avautuu uuteen välilehteen.

   avaa Demo

2. merkitään 5 tekstiruutuun numero 1.

3. merkitään 1 tekstiruutuun numero 2.

4. napsauta Lisää numero 1 ja numero 2. Napin alla olevassa etiketissä lukee 5 + 1 = 51. Tuloksen pitäisi olla 6. Tämä on vika, jonka korjaat.

   

   Kuva 1. 5 + 1: n tulos on 51. Sen pitäisi olla 6.

# Vaihe 2: Tutustu Lähdekoodipaneelin käyttöliittymään

DevTools tarjoaa paljon erilaisia työkaluja eri tehtäviin, kuten CSS: n muuttamiseen, sivukuormituksen suorituskyvyn profilointiin ja verkkopyyntöjen seurantaan. Lähteet paneeli on, jossa voit debug JavaScript.

1. avaa DevTools painamalla Command+Option + I (Mac) tai Control+Shift+I (Windows, Linux). Tämä pikanäppäin avaa Konsolipaneelin.

   

   kuva 2. Konsolipaneeli

2. Napsauta lähteet-välilehteä.

   

   kuva 3. The Sources panel

Sources panel UI: ssa on 3 osaa:

Kuva 4. Lähdepaneelin 3 osaa UI

1. Tiedostonavigaattoripaneeli. Kaikki sivun pyytämät tiedostot on lueteltu tässä.
2. Koodieditoripaneeli. Kun tiedosto on valittu Tiedostonavigaattoripaneelista, tiedoston sisältö näkyy tässä.
3. JavaScript-Vianetsintäpaneeli. Erilaisia työkaluja tarkistaa sivun JavaScript. Jos DevTools-ikkuna on leveä, tämä paneeli näkyy Koodieditoripaneelin oikealla puolella.

# Vaihe 3: keskeytä koodi, jonka keskeytyspiste on

yleinen tapa tämän kaltaisen ongelman vianetsintään on lisätä paljon console.log() lausekkeita koodiin, jotta voidaan tarkastaa arvot skriptin suorittaessa. Esimerkiksi:

function updateLabel() {
var addend1 = getNumber1();
console.log('addend1:', addend1);
var addend2 = getNumber2();
console.log('addend2:', addend2);
var sum = addend1 + addend2;
console.log('sum:', sum);
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

console.log() – menetelmällä voi saada homman hoidettua, mutta breakpoints-menetelmällä sen voi tehdä nopeammin. Keskeytyspisteen avulla voit keskeyttää koodin kesken sen suorittamisen ja tutkia kaikki arvot sillä hetkellä. Raja-arvoilla on muutamia etuja console.log() – menetelmään verrattuna:

• kanssa console.log(), sinun täytyy avata lähdekoodi manuaalisesti, löytää asiaankuuluva koodi, lisätä console.log() – lauseet ja sitten ladata sivu uudelleen, jotta näet konsolissa olevat viestit. Keskeytyspisteiden avulla voit keskeyttää kyseisen koodin tietämättä edes koodin rakennetta.
• console.log() lausekkeissa tulee erikseen määritellä jokainen arvo, jonka haluaa tarkastaa. Keskeytyspisteillä DevTools näyttää kaikkien muuttujien arvot kyseisellä hetkellä. Joskus koodiisi vaikuttaa muuttujia, joista et ole edes tietoinen.

lyhyesti sanottuna keskeytyspisteet voivat auttaa sinua löytämään ja korjaamaan vikoja nopeammin kuin console.log() – menetelmä.

jos ottaa askeleen taaksepäin ja miettii, miten sovellus toimii, voi tehdä valistuneen arvauksen, että virheellinen summa (5 + 1 = 51) lasketaan click Tapahtumakuuntelija, joka liittyy Lisää numero 1 ja numero 2-nappiin. Siksi haluat todennäköisesti keskeyttää koodin siihen aikaan, kun click kuuntelija suorittaa. Tapahtuma kuuntelija Keskeytyspisteet voit tehdä juuri niin:

1. Napsauta JavaScript-Vianetsintäruudussa Event Listener Breakpoints laajentaaksesi osiota. DevTools paljastaa listan laajennettavista tapahtumakategorioista, kuten animaatiosta ja leikepöydästä.

2. Hiiritapahtuma-kategorian vieressä klikkaa Laajenna . DevTools paljastaa listan hiiren tapahtumista, kuten click ja mousedown. Jokainen tapahtuma on valintaruutu vieressä.

3. Valitse Valitse-valintaruutu. DevTools on nyt asetettu automaattisesti pysähtymään, kun joku click tapahtuman kuuntelija suorittaa.

   

   kuva 5. Valitse valintaruutu on käytössä

4. Takaisin demo, valitse Lisää numero 1 ja numero 2 uudelleen. DevTools keskeyttää demon ja korostaa koodiriviä Lähdekoodipaneelissa. DevTools on pysäytettävä tällä koodirivillä:

   function onClick() {

   jos olet tauolla toisella koodirivillä, paina Resume Script Execution , kunnes olet tauolla oikealla rivillä.

   Huomaa: Jos olet tauolla eri rivillä, sinulla on selainlaajennus, joka rekisteröi click tapahtuman kuuntelijan jokaisella sivulla, jolla vierailet. Pidennyksen click kuuntelija. Jos käytät Incognito-tilaa selataksesi yksityisesti, joka poistaa kaikki laajennukset käytöstä, voit nähdä, että keskeytät oikean koodirivin joka kerta.

Event Listener Breakpoints on vain yksi monista devtoolsin tarjoamista keskeytyspisteistä. On syytä muistaa kaikki eri tyypit, koska jokainen tyyppi auttaa sinua lopulta debug eri skenaarioita mahdollisimman nopeasti. Katso keskeytä koodisi Keskeytyspisteiden avulla, milloin ja miten kutakin tyyppiä käytetään.

# Vaihe 4: astu koodin läpi

yksi yleinen vikojen syy on, kun skripti suoritetaan väärässä järjestyksessä. Astumalla koodin avulla voit kävellä koodin suorittamisen, yksi rivi kerrallaan, ja selvittää tarkalleen, missä se suoritetaan eri järjestyksessä kuin odotit. Kokeile nyt:

1. valitse Devtoolsin Sources-paneelissa Step into next function call to step through the execution of the onClick() function, yksi rivi kerrallaan. DevTools korostaa seuraavaa koodiriviä:

   if (inputsAreEmpty()) {

2. Napsauta Step over next function call . DevTools suorittaa inputsAreEmpty() astumatta siihen. DevTools ohittaa muutaman rivin koodia. Tämä johtuu siitä, että inputsAreEmpty() arvioitiin epätosiksi, joten if lausekkeen koodilohko ei toteutunut.

se on koodin läpikäymisen perusidea. Jos katsoo koodia get-started.js, huomaa, että vika on todennäköisesti jossain updateLabel() funktiossa. Sen sijaan, että astuisit jokaisen koodirivin läpi, voit käyttää toisenlaista keskeytyspistettä pysäyttääksesi koodin lähempänä vian todennäköistä sijaintia.

# Vaihe 5: Aseta koodirivi

koodirivi on yleisin keskeytyspistetyyppi. Kun sinulla on tietty koodirivi, jonka haluat keskeyttää, käytä koodin keskeytyspistettä:

1. Katso viimeinen rivi koodia updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

2. koodin vasemmalla puolella näkyy kyseisen koodirivin rivinumero, joka on 32. Klikkaa 32. DevTools laittaa sinisen ikonin päälle 32. Tämä tarkoittaa, että tällä rivillä on koodirivi. DevTools pysähtyy nyt aina ennen kuin tämä koodirivi suoritetaan.

3. napsauta Jatka komentosarjan suoritusta . Komentosarja jatkuu, kunnes se saavuttaa linjan 32. Riveillä 29, 30 ja 31 DevTools tulostaa arvot addend1, addend2 ja sum jokaisen rivin puolipisteen oikealle puolelle.

   

   kuva 6. DevTools pitää taukoja koodirivillä 32

# Vaihe 6: Tarkista muuttujan arvot

arvot addend1, addend2 ja sum näyttävät epäilyttäviltä. Ne on kääritty lainausmerkkeihin, eli ne ovat naruja. Tämä on hyvä hypoteesi vian syyn selittämiseksi. Nyt on aika kerätä lisää tietoa. DevTools tarjoaa paljon työkaluja muuttujien arvojen tutkimiseen.

# menetelmä 1: Soveltamisalapaneeli

kun olet keskeytetty koodirivillä, Soveltamisalapaneeli näyttää, mitä paikallisia ja globaaleja muuttujia tällä hetkellä määritellään, sekä kunkin muuttujan arvon. Siinä esitetään tarvittaessa myös sulkemismuuttujat. Kaksoisnapsauta muuttujan arvoa muokataksesi sitä. Kun et ole tauolla koodirivillä, Tutkapaneeli on tyhjä.

Kuva 7. Laajuusruutu

# Menetelmä 2: kellon lausekkeet

kellon lausekkeet-välilehdellä voi seurata muuttujien arvoja ajan mittaan. Kuten nimestä voi päätellä, Katso lausekkeet eivät rajoitu vain muuttujia. Voit tallentaa minkä tahansa kelvollisen JavaScript-lausekkeen Kellolausekkeeseen. Kokeile nyt:

1. Napsauta Watch-välilehteä.

2. Napsauta Lisää Lauseke .

3. Tyyppi typeof sum.

4. Paina Enter. DevTools näyttää typeof sum: "string". Arvo oikealle kaksoispiste on seurausta katsella ilmaisu.

   

   Kuva 8. Kellon Lausekeruutu (alhaalla oikealla), kun on luotu typeof sum kellon lauseke. Jos DevTools-ikkuna on suuri, kellon Lausekeruutu on oikealla, Tapahtumakuuntelijan Keskeytyspisteruudun yläpuolella.

kuten epäiltiin, sum arvioidaan jonoksi, kun sen pitäisi olla numero. Olette nyt vahvistaneet, että tämä on vian syy.

# metodi 3: Konsoli

console.log() viestien katsomisen lisäksi konsolin avulla voi myös arvioida mielivaltaisia JavaScript-väittämiä. Mitä virheenkorjaus, voit käyttää konsolia testata mahdollisia korjauksia vikoja. Kokeile nyt:

1. jos Konsolilaatikko ei ole auki, avaa se painamalla Escape. Se avautuu DevTools-ikkunan alareunassa.

2. konsolissa tyyppi parseInt(addend1) + parseInt(addend2). Tämä lause toimii, koska olet tauolla koodirivillä, jossa addend1 ja addend2 ovat laajuudessa.

3. Paina Enter. DevTools arvioi lausuman ja tulostaa 6, minkä tuloksen Demon odotetaan tuottavan.

   

   Kuva 9. Konsolin laatikko, arvioituaan parseInt(addend1) + parseInt(addend2).

# Vaihe 7: Aseta korjaus

olet löytänyt korjauksen vialle. Kaikki mitä on jäljellä on kokeilla korjata muokkaamalla koodia ja uudelleen käynnissä demo. Sinun ei tarvitse jättää DevTools soveltaa korjata. Voit muokata JavaScript-koodia suoraan DevTools-käyttöliittymässä. Kokeile nyt:

1. napsauta Jatka komentosarjan suoritusta .
2. korvaa koodieditorissa rivi 31, var sum = addend1 + addend2, jossa on var sum = parseInt(addend1) + parseInt(addend2).
3. paina Command+s (Mac) tai Control+S (Windows, Linux) tallentaaksesi muutoksesi.
4. Napsauta deaktivoi keskeytyspisteet . Se muuttuu siniseksi osoittaakseen, että se on aktiivinen. Vaikka tämä on asetettu, DevTools ei huomioi asettamiasi keskeytyspisteitä.
5. kokeile demoa eri arvoilla. Demo laskee nyt oikein.

Onneksi olkoon! Nyt tiedät, miten hyödyntää Chrome DevTools kun virheenkorjaus JavaScript. Työkalut ja menetelmät opit tässä opetusohjelmassa voi säästää lukemattomia tunteja.

tämä opetusohjelma näytti vain kaksi tapaa asettaa raja-arvot. DevTools tarjoaa monia muita tapoja, kuten:

• ehdolliset raja-arvot, jotka aktivoituvat vasta, kun antamasi ehto on tosi.
• raja-arvot pyydetyissä tai luvattomissa poikkeuksissa.
• XHR-raja-arvot, jotka käynnistyvät, kun Pyydetty URL vastaa antamaasi substraattia.

Katso keskeytä koodisi Keskeytyspisteillä, jotta opit, milloin ja miten kutakin tyyppiä käytetään.

tässä opetusohjelmassa ei selitetty paria koodin askeltamisohjainta. Lisätietoja on ohjeaiheessa askel koodin yli.