Parancsol a Javascript konzolra

Parancsol a Javascript konzolra

Hasznos trükkök a hibakereséshez, a formázáshoz és a hatékonysághoz

A konzol az egyik első eszköz, amelyet a fejlesztők megismerhetnek. A konzol az az eszköz, amelyet a fejlesztők a saját alkalmazások hibakeresésénél használnak. Az eszköz törvénye kimondja, hogy a túlzott önbizalom kialakítása egy megszokott eszközben könnyű.

"Feltételezem, hogy csábító, ha az egyetlen eszközed egy kalapács, akkor mindent úgy kezelj, mintha egy köröm lenne." -Maslow

Ugyanez az ötlet alkalmazható a konzolra is. Egy olyan ökoszisztémában, ahol az eszközök, a billentyűparancsok és az API áramlása, mint a tej és a méz az ígért földön, nehéz igazolni, ha új kalapácsot veszünk fel, amikor a régi jól működik. Higgye el nekem, hogy a kalapácsának hátulján lévő szálak nem csak a körmök kitépésére szolgálnak.

A következőkben a legegyszerűbb trükköket találtam a konzol hibakeresésére.

# 1: Érvek betakarása

Ha a console.log(z) {} argumentumba beillesztett argumentumot becsomagolja, akkor a naplózandó adatokat objektum formában adja ki. Az objektumnak szép neve lesz, hogy megmondja, mi volt az, amit megpróbált kiadni.

Ahelyett, hogy egy csomó objektumot látna hasonló mezőkkel, például azonosító és név a konzolján, így:

Az így kinyomtatott adatok előtt megkapja a változó nevét:

# 2: Adatok másolása a vágólapra

A konzolon naplózott adatokat átmásolhatja a számítógép vágólapjára. Hasznosnak találom ezt, ha egy objektumot a REPL-ben szeretne manipulálni, vagy a hibakeresés során előhívott adatokat szeretne kihúzni.

Kattintson a jobb gombbal a másolni kívánt adatok mellett, és válassza a „Tárolás globális változóként” lehetőséget. Ez ideiglenes névvel menti az adatokat a konzol változójaként. (Ha először teszed meg egy konzolablakban, akkor az lesz temp1.) Ezután argumentumként használhatod copy()a nevet behelyező parancsot temp1. Ez átmásolja a vágólapra tárolt adatokat, amelyeket beilleszthet, mint bármi más, amit másol.

Különösen hasznos, ha egy adatbázis-lekérdezés nem ad vissza olyan adatokat, amelyek megfelelnek az adatkezelés módjának a kezelőfelületen. Megmutathatja az adatok mutációját vagy átalakítását.

# 3: Rövidzárlatú kifejezések

Ha egy kifejezést rövidzárlattal ||zárol egy , akkor sokkal gyorsabban módosíthatja a kódot vagy hozzáadhatja a hibakeresési utasításokat. Ez különösen hasznos egy egyenes zsír nyíl funkcióknál, ahol meg szeretné nézni, hogy milyen adatokat kap érvként.

// THISsomeFunction = data => ( )
// BECOMES...someFunction = data => console.log(data) || ( )
// RATHER THAN...someFunction = data => { console.log(data) return ( )}

Kihagyja, hogy az egész funkciót göndör zárójelbe zárja, és visszatérést ad hozzá. Ez olyan érzés, mintha nem lenne akkora probléma, amíg nem optimalizálod a teljesítményt, és ezerszer megteszed, hogy megpróbálja kitalálni, milyen súlyos React bűnt követtél el.

# 4: Napló, hiba, figyelmeztetés

Ezenkívül console.log()a konzolnak számos más funkciója van, amelyek különböző előre meghatározott formátumokban nyomtatnak adatokat a konzolba. Ezek között vannak:

  • console.log()
  • console.warn()
  • console.error()

# 5: Egyéni formázás a konzol kimenetéhez

Akkor ne csak végrehajtja a beépített formázzuk console.log, warnés error. Az előadó szerepét ott játszhatja el, ahol a konzol a vászon!

Esetleg próbáljon egy szép tablettát kinyomtatni a kimenet köré, amelyet hangsúlyozni szeretne:

Itt van ez a részlet:

Tárolhat CSS-t is, hogy stílusként használhassa a változóban a kimenetre. Szivárványfoltokkal punkozhatja munkatársait, hogy nyomon kövesse mindazt, amit produkál. Ha azt szeretné, hogy humungous szivárványok kövessenek mindent, próbálkozzon ezzel:

# 6: A JSON nyomtatása táblázatként

Sokak tudta nélkül a konzol beépített módszerrel táblázatos adatokat nyomtat táblázatos formátumban. Ez nagyszerű lehet a JSON-adatok gyors áttekintéséhez.

# 7: Könnyű számlálás

A console.count()módszer valóban egyszerűvé teheti annak nyomon követését, hogy hányszor ért el egy pontot a kódjában. A kódot már nem kell növekvő változókba bonyolítania.

Pro tipp: a „szám” helyébe egy változó címkéje léphet, és ez meg fogja számolni, hogy az adott címkével való számlálási módszert hányszor érte el.

Ezt hasznosnak találtam, amikor megpróbáltam kijavítani a versenykörülményeket, vagy felesleges újrarenderelni a React alkalmazásban.

# 8: A DOM elemek használata

Az Elements fülön kiválaszthat egy DOM elemet, majd a gombbal érheti el $0. A böngésző valóban olyan előzményeket fog tárolni, $0amelyek az aktuális választást képviselik. $1az előző kiválasztást jelöli. $2a második utolsó kiválasztás és így tovább legfeljebb 5 elem.

Felteheti magának a kérdést: mikor akarom valaha megváltoztatni az alkalmazás belsőHTML-jét a konzolról? És a válasz valószínűleg csak akkor lenne, ha egy nagyon egyszerű GIF-példát szeretne egy blogbejegyzéshez. De ennek is megvannak a használati esetei.

# 9: A hibakereső nyilatkozat

Ha valaha is hozzáadott egy console.log-ot, belépett a böngésző eszközeibe, és hozzáadott egy töréspontot, hogy lássa, mi történik a kód elérésekor, szabadítsa fel magát az debuggerutasítással.

Ha hozzáad debuggeregy sort a Javascript-hez, a böngésző leáll, megnyitja a hibakereső eszközöket és szünetelteti a végrehajtást.

Bár ez nem konzolfunkció, nagyon jó dolog tudni. Az információk naplózása a konzolra nem olyan hatékony vagy hatékony, mint a böngészőkbe épített hibakeresési eszközök (például a Chrome Források lapja vagy a Firefox Debugger lapja). A hibakeresés további javítása érdekében keresse meg azokat az erőforrásokat, amelyek elmélyülnek ezekben az eszközökben.

A konzol azonban továbbra is nagyon gyors és hatékony módja annak, hogy az alkalmazások áramlását meg lehessen tekinteni azokban az alkalmazásokban, ahol sokféle életciklus-módszer és újrarendezés indít, és használatuk javításával Ön is jobb fejlesztővé válik.

Köszönöm, hogy elolvasta!

Ha vannak saját tippjeid, kérlek oszd meg! Szívesen értesülnék rólad itt a megjegyzésekben, a Twitteren vagy e-mailben.

Ha érdekesnek vagy hasznosnak találta az olvasottakat, nyugodtan hagyjon egy-két tapsot, iratkozzon fel a jövőbeni frissítésekre, vagy retweetelje / ossza meg ezt a tweetet:?