A konzol kimenetének JavaScript-formázásának módjai – CloudSavvy IT

A JavaScript fejlesztői ismerik az alázatosakat console.log() funkció. Bár a konzol naplózása egyszerűnek tűnhet, sokkal több érhető el a console tárgy. Nézzük meg, hogyan fejlesztheti a naplóüzeneteket a speciális formázással.

Az alapok

Összefoglaljuk a leggyakrabban használt konzolfunkciókat:

• console.log(data, ...args) – Naplók data a konzolhoz. A többi elfogadott argumentum is ugyanazon a soron fog megjelenni.
• console.info(data, ...args) – Egyenértékű console.log() de általában hangsúlyozott formázással – a Chrome például kék hátteret és információs „i” ikont ad hozzá.
• console.error(data ...args) – Ugyanaz, mint a console.log(), kivéve, hogy a kimenet a stderr (hiba) folyam. A legtöbb böngésző a kimenetet automatikusan piros háttérrel formázza, hogy hibát jelezzen.
• console.warn(data, ...args) – Ugyanaz, mint a console.error(), kivéve, hogy a sárga háttér általában a kevésbé súlyos figyelmeztető állapot jelzésére szolgál.

Formátum specifikátorok

A fejlesztők általában csak egyetlen argumentumot adnak át a fenti parancsoknak. Mindazonáltal mindannyian elfogadnak több érvet, amelyek automatikusan összefűznek a végső kimenetben.

Használhat argumentumokat a printf– kompatibilis formátum-specifikátorok, amelyeket egy karakterlánc határoz meg data:

const value = 10;
const available = "available";
console.log("There are %d options", value, available);
// Logs "There are 10 options available"

A rendelkezésre álló formátum-meghatározók a következők:

• %s – Formázza karakterláncként.
• %i – Formázás egész számként.
• %f – Formátum lebegőpontos értékként.
• %O – Formázás JavaScript objektumként.
• %o – Formátum DOM elemként.
• %c – Formátum CSS-szabályként, amelyet a kibocsátott naplósorra alkalmaznak.

Az utolsó kettő támogatása JavaScript-motoronként változik. A modern böngészőkben elérhetők, de nem feltétlenül más végrehajtási kontextusokban.

Képek hozzáadása

A CSS formátummeghatározó használatával képeket is felvehet a konzol kimenetébe! Ez működik a böngészőkben, de nem támogatott olyan CLI-környezetekben, mint például a Node.js.

const css = [
    "background-image: url(https://example.com)",
    "background-size: cover",
    "height: 100px",
    "padding: 15px",
    "width: 100px"
];
console.log("%cI'm An Image!", css.join(";"));

Elraboljuk a CSS-t background-image szabály a kép megjelenítéséhez. Bár könnyednek tűnhet, ennek gyakorlati alkalmazási esete lehet, ha a hibakeresés képekkel való munkát jelent. Ellenőrizheti a beolvasott képeket anélkül, hogy azokat ténylegesen az oldalra bocsátaná.

Táblázatos kimenet

A JavaScript beépített támogatást tartalmaz a táblázatos adatok kibocsátásához a konzolhoz. Használat console.table() tömb egységes tárgyakkal. Az oszlopfejléceket az egyes objektumok közös tulajdonságai alapján automatikusan határozzuk meg.

const objects = [{a: 1, x: "a"}, {a: 2, x: "b"}];
console.table(objects);

Ez rendkívül hasznos lehet, ha ömlesztett objektumokkal dolgozik. Ahelyett, hogy iterálni kellene egy tömböt és hívnunk kell console.log() minden elemnél csak használja console.table() és élvezhetik az automatikusan formázott kimenetet.

Feltételes kimenet

Használhatja a console.assert() függvény a kimenet feltételéhez egy kifejezés értékét. Ez csökkenti az írandó kódot az a előtaghoz képest console.log() egy valamivel if nyilatkozat.

Az üzenet csak akkor kerül naplózásra, ha a kifejezés erre értékelődik false. A kifejezést kiértékelő kifejezés true semmit sem bocsát ki.

console.assert(true, "I never appear");
 
console.assert(false, "I will be logged");

Az console.assert() funkció nem befolyásolja a futási időt. Nem történik hiba, ha az állítás sikertelen; a kifejezésed kizárólag annak meghatározására szolgál, hogy bejelentkezik-e a konzolra.

Üzenetcsoportok

Vizuálisan csoportosíthatja a kimenet szakaszait a console.group(). Ez automatikus behúzást alkalmaz a következő sorokra, előre meghatározott számú szóköz felhasználásával.

A csoport bezárásához hívjon console.groupEnd(). Ez visszaállítja az előző behúzást.

Felhívhat console.group() korábban többször is console.groupEnd() mélyen beágyazott kimenet létrehozásához. console.groupEnd() a behúzást egyszerre egy lépéssel tér vissza, ezért meg kell egyeznie a számmal group() és groupEnd() hívásokat, mielőtt visszatér az alapértelmezett szintre.

Pultok

Használat console.count(label) belső névvel rendelkező számláló létrehozása:

console.count("my-counter");
// my-counter: 1
console.count("my-counter");
// my-counter: 2

Ez egyenes utat kínál növekvő értékek kibocsátására. Nem kell nevet megadnia – a default A számláló automatikusan felhasználásra kerül. A számlálók nullára állíthatók a gombbal console.countReset(label).

Időzítők

A konzol beépített támogatással rendelkezik a műveletek időzítéséhez. Az eltelt időt milliszekundumban mérjük, és másodpercekben bocsátjuk ki (pl. „1.234s”); nem garantáltan nagy pontosságú.

console.time();
// ...some time later...
console.timeEnd();
// Emits the elapsed time ("1.234s")

Az időzítők ugyanúgy támogatják az opcionális címkéket, mint a számlálók. Ez lehetővé teszi több időzítő egyidejű kezelését, amikor a kód különböző aspektusait időzíti.

Segédprogram módszerek

Az console Az object számos segédprogramot tartalmaz, amelyek segítenek a kimenet kezelésében.

• console.clear() – Törli az összes látható kimenet konzolját. A hatások végrehajtási környezettől függően változnak.
• console.dir(obj, options) – Kibocsátja az objektum összes felsorolható tulajdonság / érték párjának listáját obj. A rekurzió mélységét a depth tulajdona options tárgy.
• console.trace() – Verem nyomot bocsát ki a kód aktuális pontjáig, lehetővé téve a végrehajtott útvonal egyszerű hibakeresését.

Vannak más nem szabványosított módszerek, amelyek motorfüggőek. Ilyen például console.profile(), amely széles körben elérhető, de eltérő megvalósítással. A böngészőkben általában nagy pontosságú profilalkotásra hívja fel a segítséget a teljesítményproblémák diagnosztizálásában.

Következtetés

Sokkal több van a JavaScript konzolján, mint az alap console.log()! Ha időt szán a rendelkezésre álló funkciók elsajátítására, drasztikusan felgyorsulhat a hibakeresés, különösen akkor, ha összetett tárgyakkal vagy gyorsan mozgó kimenettel dolgozik.

Az elérhető funkciók a használt JavaScript-motortól függenek. Általában a legfejlettebb stílust kapja egy naprakész böngészőből, bár a Node.js is támogatja az itt leírt technikák többségét.