ez a bemutató megtanítja az alapvető munkafolyamat hibakeresés minden JavaScript kérdés DevTools. Olvass tovább, vagy nézze meg az oktatóanyag videó verzióját, lent.

# 1.lépés: a hiba reprodukálása

a hibakeresés első lépése mindig egy olyan műveletsorozat megtalálása, amely következetesen reprodukálja a hibát.

1. Kattintson A Demo Megnyitása Gombra. A bemutató új lapon nyílik meg.

   nyílt bemutató

2. írja be a 5 értéket az 1.szám szövegmezőbe.

3. írja be a 1 értéket a 2.szám szövegmezőbe.

4. kattintson az 1. szám és a 2. szám hozzáadása elemre. A gomb alatti címke szerint 5 + 1 = 51. Az eredménynek 6 – nak kell lennie. Ezt a hibát fogod kijavítani.

   

   1.ábra. Az 5 + 1 eredménye 51. 6-nak kell lennie.

# 2. lépés: ismerkedjen meg a források panel UI

DevTools egy csomó különböző eszközök különböző feladatokat, mint például a változó CSS, profilalkotás oldal betöltési teljesítmény, és monitoring hálózati kéréseket. A források panelen lehet hibakeresni a Javascriptet.

1. nyissa meg a DevTools programot a Command+Option+I (Mac) vagy a Control+Shift+I (Windows, Linux) megnyomásával. Ez a parancsikon megnyitja a konzol panelt.

   

   2.ábra. A konzol panel

2. kattintson a források fülre.

   

   3.ábra. A források panel

A Sources panel felhasználói felülete 3 részből áll:

4.ábra. A források panel felhasználói felületének 3 része

1. a Fájlnavigátor ablaktábla. Minden fájl, amelyet az oldal kér, itt szerepel.
2. a kódszerkesztő ablaktábla. Miután kiválasztott egy fájlt a Fájlnavigátor ablaktáblában, itt megjelenik a fájl tartalma.
3. a JavaScript hibakeresési ablaktábla. Különböző eszközök az oldal JavaScript ellenőrzéséhez. Ha a DevTools ablak széles, ez az ablaktábla a kódszerkesztő ablaktábla jobb oldalán jelenik meg.

# 3. lépés: szüneteltesse a kódot törésponttal

egy ilyen probléma hibakeresésének általános módszere az, hogy sok console.log() utasítást illeszt be a kódba, hogy ellenőrizze az értékeket a szkript végrehajtásakor. Például:

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;
}

a console.log() módszer elvégezheti a munkát, de a töréspontok gyorsabban elvégezhetik. A töréspont lehetővé teszi, hogy szüneteltesse a kódot a végrehajtás közepén, és megvizsgálja az összes értéket az adott pillanatban. A töréspontoknak néhány előnye van a console.log() módszerrel szemben:

• a console.log() gombbal manuálisan kell megnyitnia a forráskódot, meg kell találnia a megfelelő kódot, be kell illesztenie a console.log() utasításokat, majd újra be kell töltenie az oldalt az üzenetek megtekintéséhez a konzolban. A töréspontok segítségével szüneteltetheti a vonatkozó kódot anélkül, hogy tudná, hogyan épül fel a kód.
• a console.log() utasításokban kifejezetten meg kell adnia az összes ellenőrizni kívánt értéket. A töréspontokkal a DevTools megmutatja az összes változó értékét abban az időben. Néha vannak olyan változók, amelyek befolyásolják a kódot, amelyekről még csak nem is tudsz.

röviden, a töréspontok segíthetnek a hibák gyorsabb megtalálásában és javításában, mint a console.log() módszer.

ha egy lépést hátra, és gondolja át, hogyan működik az alkalmazás, akkor lehet, hogy egy művelt hiszem, hogy a helytelen összeg (5 + 1 = 51) lesz kiszámítva a click esemény figyelő, amely kapcsolatban van az Add Number 1 és Number 2 gombot. Ezért valószínűleg szüneteltetni szeretné a kódot abban az időben, amikor a click hallgató végrehajtja. Az eseményfigyelő töréspontjai pontosan ezt teszik:

1. a JavaScript hibakeresés ablaktáblában kattintson az eseményfigyelő töréspontok elemre a szakasz kibontásához. A DevTools megjeleníti a bővíthető eseménykategóriák listáját, például az animációt és a vágólapot.

2. az Egéresemény-kategória mellett kattintson a Kibontás elemre. DevTools feltárja egy listát az egér események, mint a click and mousedown. Minden esemény mellett van egy jelölőnégyzet.

3. jelölje be a kattintás jelölőnégyzetet. DevTools most be van állítva, hogy automatikusan szünetelteti, ha bármilyen click esemény hallgató végrehajtja.

   

   5.ábra. A kattintás jelölőnégyzet engedélyezve van

4. vissza a demo, kattintson az Add Number 1 és Number 2 újra. A DevTools szünetelteti a demót, és kiemel egy sor kódot a források panelen. A DevTools-t szüneteltetni kell ezen a kódsoron:

   function onClick() {

   ha egy másik kódsoron szünetel, nyomja meg a parancsfájl végrehajtásának folytatása gombot, amíg a megfelelő sorban nem szünetel.

   Megjegyzés: Ha egy másik vonalon szünetelt, akkor van egy böngészőbővítménye, amely minden meglátogatott oldalon regisztrál egy click eseményfigyelőt. Szünetelt a kiterjesztés click hallgatója. Ha inkognitómódot használ a privát böngészéshez, amely letiltja az összes kiterjesztést, láthatja, hogy minden alkalommal szünetelteti a megfelelő kódsort.

az eseményfigyelő töréspontok csak egy a DevTools-ban elérhető sokféle töréspont közül. Érdemes megjegyezni az összes különféle típust, mert minden típus végső soron segít a különböző forgatókönyvek lehető leggyorsabb hibakeresésében. Lásd: szüneteltesse a kódot töréspontokkal, hogy megtudja, mikor és hogyan kell használni az egyes típusokat.

# 4.lépés: Lépjen át a kódon

a hibák egyik gyakori oka az, amikor egy szkript rossz sorrendben fut le. A kód átlépése lehetővé teszi, hogy végigmenjen a kód végrehajtásán, egy sorban egy időben, és pontosan kitalálja, hogy hol hajtja végre a végrehajtást a vártnál eltérő sorrendben. Próbálja ki most:

1. a Devtools források paneljén kattintson a lépés a következő funkcióhívásba elemre a onClick() funkció végrehajtásának lépéséhez, soronként. A DevTools kiemeli a következő kódsort:

   if (inputsAreEmpty()) {

2. kattintson a lépés a következő funkcióhívás fölé . A DevTools végrehajtja a inputsAreEmpty() parancsot anélkül, hogy belépne. Figyeljük meg, hogy DevTools kihagy néhány sornyi kódot. Ez azért van, mert a inputsAreEmpty() értéke false, így a if utasítás kódblokkja nem valósult meg.

ez a kód átlépésének alapötlete. Ha megnézzük a kódot get-started.js, akkor láthatjuk, hogy a hiba valószínűleg valahol a updateLabel() funkciót. Ahelyett, hogy átlépne minden kódsoron, használhat egy másik típusú töréspontot, hogy szüneteltesse a kódot közelebb a hiba valószínű helyéhez.

# 5. lépés: Kódsor töréspont beállítása

a kódsor töréspontok a leggyakoribb töréspontok. Ha van egy adott kódsor, amelyet szüneteltetni szeretne, használjon kódsor töréspontot:

1. nézze meg a kód utolsó sorátupdateLabel():

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

2. a kód bal oldalán látható az adott kódsor sorszáma, amely 32. Kattintson a 32-re. DevTools tesz egy kék ikon tetején 32. Ez azt jelenti, hogy ezen a vonalon van egy kódsor töréspont. DevTools most mindig megáll, mielőtt ez a sor a kód kerül végrehajtásra.

3. kattintson a parancsfájl végrehajtásának folytatása elemre. A szkript addig fut, amíg el nem éri a 32.Sort. A 29-es, 30-as és 31-es vonalakon a DevTools kiírja a addend1, addend2 és sum értékeket az egyes sorok pontosvesszőjétől jobbra.

   

   6.ábra. DevTools szünetel a line-of-kód töréspont on-line 32

# 6. lépés: Ellenőrizze a

változóértékeket a addend1, addend2 és sum értékek gyanúsnak tűnnek. Idézőjelekbe vannak csomagolva, ami azt jelenti, hogy húrok. Ez egy jó hipotézis a hiba okának magyarázatára. Itt az ideje, hogy több információt gyűjtsön. A DevTools sok eszközt kínál a változó értékek vizsgálatához.

# 1.módszer: a hatókör ablaktábla

ha szünetel egy kódsoron, a hatókör ablaktábla megmutatja, hogy jelenleg milyen helyi és globális változók vannak meghatározva, az egyes változók értékével együtt. Azt is mutatja, lezárás változók, ha alkalmazható. Kattintson duplán egy Változó értékre a szerkesztéshez. Ha nem szünetel egy kódsoron, a hatókör ablaktábla üres.

7.ábra. A hatókör ablaktábla

# 2. módszer: kifejezések figyelése

a kifejezések figyelése lap lehetővé teszi a változók értékeinek időbeli figyelését. Ahogy a neve is mutatja, A Watch kifejezések nem csak a változókra korlátozódnak. Bármely érvényes JavaScript kifejezést tárolhat egy óra kifejezésben. Próbálja ki most:

1. kattintson az óra fülre.

2. Kattintson A Kifejezés Hozzáadása Elemre.

3. Típus typeof sum.

4. Nyomja Meg Az Enter Billentyűt. DevTools mutatja typeof sum: "string". A kettősponttól jobbra található érték az óra kifejezésének eredménye.

   

   8.ábra. Az óra kifejezés ablaktábla (jobb alsó sarokban), a typeof sum óra kifejezés létrehozása után. Ha a DevTools ablak nagy, az óra kifejezés ablaktábla a jobb oldalon, az eseményfigyelő töréspontok ablaktábla felett található.

mint gyanítható, sum karakterláncként kerül kiértékelésre, amikor számnak kell lennie. Most megerősítette, hogy ez a hiba oka.

# 3. módszer: A konzol

a console.log() üzenetek megtekintése mellett a konzolt tetszőleges JavaScript utasítások kiértékelésére is használhatja. A hibakeresés szempontjából a konzol segítségével kipróbálhatja a hibák lehetséges javításait. Próbálja ki most:

1. ha nincs nyitva a Konzolfiók, nyomja meg az Escape gombot a megnyitásához. A DevTools ablak alján nyílik meg.

2. a konzolba írja be a parseInt(addend1) + parseInt(addend2)parancsot. Ez az utasítás azért működik, mert szünetel egy olyan kódsorban, ahol az addend1 és a addend2 hatókör van.

3. Nyomja Meg Az Enter Billentyűt. A DevTools kiértékeli az állítást, és kiírja a 6 értéket, ami az eredmény, amit a demó vár.

   

   9.ábra. A Konzolfiók, a parseInt(addend1) + parseInt(addend2) kiértékelése után.

# 7. lépés: javítás alkalmazása

megtalálta a hiba javítását. Csak annyit kell tennie, hogy kipróbálja a javítást a kód szerkesztésével és a demo újbóli futtatásával. A javítás alkalmazásához nem kell elhagynia a DevTools alkalmazást. A JavaScript kódot közvetlenül a DevTools felhasználói felületen szerkesztheti. Próbálja ki most:

1. kattintson a parancsfájl végrehajtásának folytatása elemre.
2. a kódszerkesztőben cserélje ki a 31., var sum = addend1 + addend2Sort var sum = parseInt(addend1) + parseInt(addend2) – re.
3. a módosítás mentéséhez nyomja meg a Command+S (Mac) vagy a Control+S (Windows, Linux) billentyűkombinációt.
4. kattintson a töréspontok kikapcsolása elemre. Kék színnel jelzi, hogy aktív. Amíg ez be van állítva, a DevTools figyelmen kívül hagyja a beállított töréspontokat.
5. próbálja ki a demót különböző értékekkel. A demo most kiszámítja helyesen.

Gratulálunk! Most már tudja, hogyan lehet a legtöbbet kihozni a Chrome DevTools-ból a JavaScript hibakeresésekor. Az ebben az oktatóanyagban megtanult eszközök és módszerek számtalan órát takaríthatnak meg.

ez az oktatóanyag csak két módot mutatott meg a töréspontok beállítására. A DevTools számos más módszert kínál, többek között:

• feltételes töréspontok, amelyek csak akkor aktiválódnak, ha az Ön által megadott feltétel igaz.
• töréspontok a fogott vagy nem fogott kivételeknél.
• XHR töréspontok, amelyek akkor aktiválódnak, amikor a kért URL megegyezik az Ön által megadott részstringekkel.

lásd: szüneteltesse a kódot töréspontokkal, hogy megtudja, mikor és hogyan kell használni az egyes típusokat.

van néhány kódléptető vezérlő, amelyeket nem magyaráztak el ebben az oktatóanyagban. További információkért lásd: lépés a kódsor felett.