Sok fejlesztő nem használ hibakeresőt fejlesztés közben. Ehelyett régi barátjukra hagyatkoznak console.log().
Fontos megjegyezni, hogy a konzol megmutatja az objektum értékét, amelyet kiértékelnek a konzol első bővítésének idején.
Először hadd tisztázzam, mit értek a bővítés alatt. Amikor console.logegy objektumot (amely tömböket is lefed), az objektum értéke összeomlik. Például:
console.log( "users: ", [{name: "John"}]);
A böngésző konzolja így fog kinézni:
Ezután, amikor a háromszögre kattint, az objektum kibővül. Pontosan ekkor kiértékeli és megjeleníti az objektum értékét.
Merüljünk el jobban ebben, és nézzünk meg egy példát:
Az 1. vonalon egy új usersváltozót inicializálunk , amely egy objektum tömb.
A 6. sorban a usersváltozó értékét írjuk a konzolra.
Ezután iterálunk users, ellenőrizzük, hogy a felhasználó érvényes-e, és a visszatéréstől függően letiltjuk a felhasználót. Az érvelés kedvéért tegyük fel, hogy a validateUser()visszatérések falseés a 10. sor kódja végrehajtásra kerül.
Annak ellenére, hogy mapteremt egy új tömböt, változik a usertárgy is változik a usertárgy a userstömbben. Változik, mert ugyanaz a hivatkozás. (A történések jobb magyarázatához nézze meg ezt a cikket).
A kérdés az: mi fog megjelenni a konzolon, amelyet a 6. vonalon hívnak?
Amikor megnyitjuk ezt a példát a Chrome-ban és a Firefoxban, az objektum összeomlik. Majd a bővítéskor látjuk az értékeket:
Az Enabled falseértékre van állítva , annak ellenére, hogy az érték truea kimenet időpontjában volt. Ennek oka az, hogy az objektum értékét először értékelik, amikor rákattintunk az objektum kibontására (lusta olvasás).
Vessünk egy pillantást a Safarira:
Hm, engedélyezve értéke true. Tehát láthatjuk, hogy vannak ellentmondások a böngészők között. A Safari megpróbálja automatikusan kibővíteni az objektumot. Ha az objektum / tömb túl nagy, összeomlik és ugyanúgy fog viselkedni, mint a Chrome és a Firefox.
Ennek egyik megkerülési módja JSON.stringify(),pl
console.log("users", JSON.stringify(users, null, 2));
amely a következő kimenetet produkálja a konzolra:
Sajnos ezzel a megközelítéssel nem lehet kibővíteni / összecsukni az objektumot. Az érték nem lesz mutálva.
Nagy rajongója vagyok a funkcionális programozási paradigmának és a megváltoztathatatlan változóknak. Az objektum módosításához létrehoz egy klónt, amelyet ezután módosít. Ebben az esetben nem tapasztalna ilyenfajta „problémát”. Így írhatnánk ilyesmit:
A térképfunkcióban most klónozzuk a módosított és visszaadott felhasználói objektumot.
Ha betartja az objektummutációt, Zoran Jambor újabb okos megoldást adott hozzá:
console.log("users", ...users);
Tehát a felhasználói tömb megsemmisült, és az objektumok listája megjelenik a konzolon:
De itt is vigyáznunk kell. Ha az objektum értéke mutált, a konzol kimenete megváltozik a bővítéskor:
Abban az esetben, ha teljesen biztos akar lenni abban, hogy a naplózott objektumnak ugyanaz az értéke, mint a konzol.log során, akkor mély klónot kell készítenie róla. Például a következő segítő funkciót használhatjuk a konzolra történő közvetlen írás helyett:
A 3. vonalon valóban létrehozunk egy mély klónot az objektumból, amely a következő kimenetet adja:
Most az objektum értéke nem változik a bővítés során.
Hibakeresőt használ, ha töréspontot ad a 6. sorhoz, a végrehajtás szünetel. Látni fogja az aktuális objektum értékét. Ha a konzolt részesíti előnyben legtöbbször, ne feledje, hogy az objektum / tömb kiértékelése megtörtént az első bővítéskor.
A böngésző hibakeresőjének használatáról olvassa el ezt a nagyszerű cikket.
Köszönöm, hogy elolvasta. Kérjük, ossza meg mindazokkal, akik hasznosnak találják, és küldjön visszajelzést. (Ez az első történetem a Medium-on, és szeretnék folytatni az írást, és jobbá válnék benne).