Különleges logok…

2019. január 6.

Ha írtál már életedben JavaScript kódot, akkor szinte biztosra veszem, hogy a console.log()-ot vagy a console.info()-t használtad már. Ugye?

Bár a végleges kódba nem feltétlenül fordulnak bele, fejlesztés és hibajavítás közben nagyon jól tudnak jönni az ott-ott hagyott logok.

Általában elég unalmasak tudnak lenni, és ha elég ideig nem takarítod őket, akkor nagyon hamar el lehet köztük veszni… Pont ez történt velem is, így hát úgy döntöttem, kicsit rendet csapok köztük és rendszerezem őket.

Hibák, hibák mindenhol…

A legelső dolog, ami feltűnt, hogy mindegy volt, hogy épp hibát logoltam, vagy csak valami random változó értékét akartam megtudni, mindegyik sima, egyforma színű volt.

Bevezettem, hogy például ha egy elkapott hibát akarok logolni, akkor legalább azok legyenek máshogy formázva. Erre nagyon jó a console.error()!



Figyelem!

És persze volt, amit csak szerettem volna, hogy kitűnjön a többi közül vagy ha épp nem biztos, hogy 100%-ban jó, ha az történik épp, ami történik… Erre van a console.warn().

Színezés

És talán itt kezd a dolog érdekessé válni, mert az eddigieket simán lehet, hogy ismeted, sőt néhanapján még használtad is. A fentieken túl én többet akartam! Jó, lehet, bevallom, kicsit túlzásba tudok esni néha… De mi lenne, ha egy kicsit kiszíneznénk a dolgokat…?

Akarom mondani, tudtad, hogy formázást is át lehet adni a függvényeknek?

console.log('%c%s','color: white; background: #8bc34a; font-family: cursive; padding: 5px','na ugye milyen rettentesen néz ki?')

Itt a %c volt segítségemre, és amint látjátok, ide bármilyen CSS szabályt beírhatok, persze vannak korlátai… 🙂 És mindez egyáltalán azért működhet, mert alkalmazható a szöveg-helyettesítés, de ebbe nem mennék bele részletesen, inkább linkelek nektek egy referenciát.

Sőt ez a színezés arra is nagyon jó tud lenni, ha egy saját logoló rendszert szeretnénk összedobni. Persze nem egy nagy, bonyolult valamire gondolok, csak valami ilyesmire:

function log(message, color) {
  switch (color) {
    case 'success':  
      color = 'green'
      break
    case 'info':     
      color = 'blue'  
      break;
    case 'error':   
      color = 'red'   
      break;
    case 'warning':  
      color = 'orange' 
      break;
    default: 
      color = color
  }
  console.log(`%c${message}`, `color:${color}`)
}

Táblázat

Ami még szokott zavarni, az az, ha logolok egy objektumot vagy listát és le kell nyitnom a nyilacskával, hogy láthassam a “tartalmat”. Pont milyen jó, hogy létezik a táblázatos megjelenítés, a console.table(), ami az iterálható dolgok megjelenítésére tökéletes!

És ezen a ponton mondanám, azt, hogy én főként a megjelenítési részével foglalkoztam, de ezeken túl is a console még egy csomó mindent tud! Számolja a hívásokat a count-tal, vagy időt mér… Fedezd fel ezeket a hasznos metódusokat! 🙂


Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük