mit keres?
összetett webes alkalmazás létrehozása, valószínűleg találkozott azzal a ténnyel, hogy valami nem a tervek szerint működött. Órákat töltött azzal, hogy hibát keresett a kódjában, majd az interneten segítséget keresett a probléma megoldásához. Hogy megkönnyítsük az Ön számára, ebben a cikkben elmagyarázunk néhány hatékony technikát a webes alkalmazások hibakeresésére, amelyek jelentősen csökkentik a hibakeresés fájdalmát és lerövidítik a problémák észlelésének idejét.
konzol.log
először is, egy általánosan használt javascript módszer konzol.napló. Beilleszthet egy módszert a kódba az adott változóval. A kódfuttatás során az alkalmazás visszaadja a konzolban a metódusban megadott változók értékét. Ez a legegyszerűbb módja annak ellenőrzésére, hogy a program visszaadja-e a várt értéket.
sajnos ez nem túl hatékony hibakeresési módszer. Egy ilyen megközelítés t nem teszi lehetővé számunkra, hogy a haladás a kódfuttatás (kivéve, ha be konzolt.jelentkezzen be néhány soronként, de akkor a konzolba dobott adatmennyiség olvashatatlan lesz, és csak rendetlenséget okozunk a kódban.) Ezenkívül csak az átadott változót adja vissza, feltéve, hogy az alkalmazás nem dob hibát a kód végrehajtása közben.
tipp no. 1
ha sok konzol.a naplók a nevet egy karakterláncba és a következő változóba teszik,pl.log(‘változó’, változó).
Chrome DevTools (forrás lap)
a webes alkalmazások hibakeresésének hatékonyabb módja a Chrome DevTools és a forrás lap használata. Mielőtt elkezdenénk a hibakeresést a forrás lapon, hozzá kell adnunk a node_modules-t a fekete bokszhoz. Ezt a szabályt úgy adjuk hozzá, hogy a töréspontok áthaladásakor ne jelenítsen meg külső csomagokból származó fájlokat, ami megnehezíti a hibakeresést. Meg kell nyitnunk a beállításokat a Chrome-ban.
amikor node_modules-t ad hozzá a fekete bokszhoz, akkor a forrás fülre léphetünk. Tegyük fel, hogy valós időben szeretné követni a függvény folyamatát, és ellenőrizni a kimeneteket. Nyomja meg a Ctrl + O billentyűkombinációt a forrás lapon, és adja meg a forrásfájl nevét. Ezután tegye a töréspontokat az érdeklődő kódsorokra, és elkezdheti végrehajtani a folyamatot a böngészőben. Amikor a kiválasztott sorok elkezdik a feldolgozást, a böngésző leállítja a kód végrehajtását. Lásd az alábbi képernyőképet.
mint látható, az aktuális kódsor, ahol a böngésző leállt, kék háttérrel rendelkezik. A jobb oldalon van egy bár, ahol a parancsnoki központunk található. Itt van a rövid bevezetőnk.
vezérlők
a sáv tetején található a vezérlők szakasz. Összpontosítsunk a döntő elemekre. Az első Folytatásvezérlés a következő megjelölt töréspontra visz minket a végrehajtandó kód hatókörén belül. A következő függvényhívás második vezérlési lépése a végrehajtandó kód következő sorához vezet. Az utolsó Deactive töréspontok vezérlője deaktiválja a kiválasztott töréspontokat. Hasznos vezérlés, ha sok töréspontot választunk ki, és egy ideig vissza akarunk térni az alkalmazás kattintásához anélkül, hogy minden töréspontnál megállnánk.
hatókörök
alább van egy hatókör szakasz. Többféle hatókörünk van: Helyi (az aktuálisan végrehajtott függvény), valamint bezárások attól függően, hogy milyen hatókörben vagyunk (például az aktuálisan végrehajtott függvény szülője vagy egy összetevő). Ezen hatókörök mindegyikében a böngésző megmutatja nekünk a bennük előforduló összes változót.
töréspontok
az utolsó rész tárgyalt töréspontok. Megmutatja, hogy milyen töréspontok és milyen fájlok vannak jelölve. A jelölőnégyzetek használatával könnyen deaktiválhatjuk és újraaktiválhatjuk őket.
tippek száma. 2-5
- ha változhatatlant használ.js a projektben telepítse a Megváltoztathatatlant.js Object Formatter plugin és aktiválja azt a böngésző beállításait. Ez jelentősen leegyszerűsíti a megváltoztathatatlan objektumok hibakeresését.
- ha nem használja a változhatatlan.js a projektben, és használja a Visual Studio kódot IDE, azt javasoljuk, telepítése és konfigurálása Debugger Chrome (VSC nincs megváltoztathatatlan.js formázás plugin). Ez még tovább egyszerűsíti a hibakeresést, és gyorsabb kódváltozásokat tesz lehetővé.
- ha a forrás lap nem jeleníti meg a helyi fájlokat, ellenőrizze a forrástérképet a projektben.
- ha a böngésző leáll egy törésponton, akkor hozzáférhet a változókhoz a konzolban is.
React fejlesztői eszközök
a React fejlesztői eszközök szintén hasznos megoldások. Az ilyen eszközök lehetővé teszik, hogy könnyedén megtekinthesse a React fa szerkezetét a projektben, az állapotokat és a komponens kellékeit. Az elem kiválasztása az oldalon az ellenőrzéshez funkció hatékony, különösen akkor, ha nem ismeri az egész projektet. Segít megtalálni a frissítendő összetevőt.
tipp száma 6
ha Vue-t használ. js, használhatod a Vue-t.js devtools. A kiterjesztés hasonló funkciókkal és hozzáféréssel rendelkezik a Vuex-hez (A Redux megfelelője a react-ben).
Redux DevTools
ha Reduxot használ a projektben, akkor a Redux DevTools kötelező. Egy ilyen megoldás lehetővé teszi a műveletek teljes folyamatának nyomon követését, az állapotváltozásokat, a hasznos terhelést, valamint az aktuális tároló megtekintését minden végrehajtott művelet után. Ha valami nem működik úgy, ahogy feltételezzük, és minden rendben van a kódban, érdemes megfontolni, hogy milyen műveleteket küldünk, milyen hasznos teherrel. Néha vannak olyan egyszerű hibák, mint például az állandó másolása a fenti műveletből, átnevezés az érték megváltoztatása nélkül, majd valami teljesen más hívás. Az alábbiakban egy gif mutatja a legfontosabb Redux DevTools funkciókat.
tipp száma. 7
ha az alkalmazás nagyszámú műveletet futtat, előfordulhat, hogy a bővítmény nem működik megfelelően, mivel nincs elegendő memória a sok művelet feldolgozásához. Megpróbálhatja konfigurálni a kiterjesztési opciókban (ebben az esetben a maxAge opcióban.)
Fiddler
az utolsó eszköz, amelyet szeretnénk bemutatni, a Fiddler. Az eszközt a hálózati forgalom kezelésére hozták létre. Ez rendkívül hasznos, ha van néhány termelési hiba, és nem tudjuk másolni a termelési adatokat egy alacsonyabb környezet hibakeresés helyben. Ilyen helyzetben a helyi környezetben a termelési adatokhoz való hozzáférés érdekében a forgalmat az automatikus válasz lapon állítjuk be. Amikor megnyitja az oldalt, ahelyett, hogy letöltené a JS fájlt a szerverről, a Fidler összekapcsolja a helyben épített termelési fájlt. A további hibakeresés a chrome dev tools forrás lapon történik. Az alábbiakban egy képernyőkép látható a forgalom átirányításának beállításával a helyi fájlra. A program lehetővé teszi a mock végpontok.
tipp no. 8
ha egyszerűen és gyorsan szeretné létrehozni a végpontok gúnyolódását, használhat egy mock moon programot.
egy webes alkalmazás agilis hibakeresésének összefoglalása
sokunk számára a webes alkalmazások hibakeresésének folyamata fejfájással és a számítógép előtt töltött hosszú órákkal jár. Ez a folyamat azonban lerövidíthető és kellemesebbé tehető, ha megfelelő eszközökkel és know-how-val rendelkezik azok használatához. Gyakran a keze ügyében vannak ingyen. Megosztottuk Önnel a legfontosabb és leghasznosabb eszközöket, amelyeket naponta használunk.