JsLogger

Egyszerű, könnyen integrálható in-browser debug és logging singleton.

Főbb jellemzők

• Memóriában tárolt logok (konfigurálható maximum).
• Rugalmas konzol-kimenet (szintek, színek, ikonok).
• Auto-detect debug mód URL, localStorage, globális config vagy hostname alapján.
• Egyszerű ESM import és böngésző auto-attach.

Gyors telepítés

NPM:

npm install @hunsziszi/js-logger

CDN / böngésző (példa): helyezd be JsLogger.js modulodat, vagy használd az index.php demo meta-tag-et az auto-attach teszthez.

Használat (ESM)

import { jsLogger } from '@hunsziszi/js-logger';

jsLogger.info('init', 'Logger initialized');
jsLogger.error('api', 'Request failed', { status: 500 });

// Konfiguráció
jsLogger.setMaxLogs(500).enableColoredConsole(true).setConsoleOutputLevels(['debug','info','warn','error']);

Böngészőre kötés (auto-attach)

A csomag tartalmaz egy attachToWindow(namespace?: string) függvényt (autoAttach.js), amely felteszi a jsLogger-t a window.App, window.jsLogger vagy egy tetszőleges namespace alá. Auto-attach akkor fut, ha az oldal tartalmazza a meta taget meta[name="js-logger-auto-attach"] vagy a keresőstringben szerepel js-logger-auto=true.

Példa HTML meta tag-re (demo index.php):

<meta name="js-logger-auto-attach" content="1">

Auto-detect feltételek (amik bekapcsolják a debug módot)

• URL paraméter: ?debug=true vagy ?debug=1 (pl. https://example.com/?debug=true)
• localStorage: localStorage.getItem('app_debug') === 'true' (pl. localStorage.setItem('app_debug','true'))
• Global config: window.globalConfig?.environment === 'development' (pl. <script>window.globalConfig={environment:'development'}</script>)
• Hostname: localhost, vagy tartalmazza .local, vagy dev. (pl. localhost, app.local, dev.example.com)

Az első igaz feltétel aktiválja a debug módot. Manuális vezérléshez használd a setAutoDetect(false)-et és setDebugMode(true|false)-t.

API áttekintés

• jsLogger.debug(category, message, data?, force?)
• jsLogger.info(category, message, data?, force?)
• jsLogger.success(category, message, data?, force?)
• jsLogger.warn(category, message, data?, force?)
• jsLogger.error(category, message, data?, force?)
• jsLogger.setMaxLogs(count)
• jsLogger.setDefaultRecentCount(count)
• jsLogger.setConsoleOutputLevels(levels)
• jsLogger.enableColoredConsole(true|false)
• jsLogger.setIconLevels(levels)
• jsLogger.toggleDebug()
• jsLogger.setDebugMode(true|false)
• jsLogger.setAutoDetect(true|false)
• jsLogger.getRecentLogs(count?)
• jsLogger.getLogsByCategory(category)
• jsLogger.getLogsByLevel(level)
• jsLogger.clearLogs()
• jsLogger.exportLogs()
• jsLogger.showPanel()

Részletes ismertető

• jsLogger.debug(category, message, data?, force?) — Hibakeresési szintű üzenet. A log csak akkor kerül elmentésre, ha a debug mód be van kapcsolva, vagy a force true. Hasznos részletes belső állapotok naplózására. Példa: jsLogger.debug('ui','button clicked',{id:'save'})

• jsLogger.info(category, message, data?, force?) — Információs üzenet, általános működési eseményekhez. Szintén a debug mód aktiválása esetén kerül elmentésre (vagy force-szal). Példa: jsLogger.info('init','App started')

• jsLogger.success(category, message, data?, force?) — Sikeres műveletek jelzése (pl. API válasz feldolgozása). Viselkedése hasonló az info-hoz. Példa: jsLogger.success('api','Data saved')

• jsLogger.warn(category, message, data?, force?) — Figyelmeztetések; alapértelmezetten mindig elmentésre kerülnek, és konzolra is kiíródnak. Példa: jsLogger.warn('validation','Missing required field')

• jsLogger.error(category, message, data?, force?) — Hibajelentés; mindig elmentésre kerül, stack információt is tárolhat, és console.error-be ír. Példa: jsLogger.error('network','Request failed', err)

• jsLogger.setMaxLogs(count) — Beállítja a memóriában tárolt logok maximális számát; ha kisebbre állítod, a régebbi bejegyzések levágódnak.

• jsLogger.setDefaultRecentCount(count) — A getRecentLogs() alapértelmezett visszatérési méretét állítja.

• jsLogger.setConsoleOutputLevels(levels) — Meghatározza, mely szintek íródjanak ki a konzolra (pl. ['info','warn','error']).

• jsLogger.enableColoredConsole(true|false) — Engedélyezi vagy tiltja a CSS alapú színezést a konzol kimeneten (ha támogatott).

• jsLogger.setIconLevels(levels) — Megadja, hogy mely szintek elé kerüljenek emoji/ikon jelölők a konzolban.

• jsLogger.toggleDebug() — Kézi váltás: felülírja az auto-detectet, menti az állapotot localStorage-ba (app_debug) és visszaadja az új debug állapotot (true/false).

• jsLogger.setDebugMode(true|false) — Explicit beállítás kézzel; ez is letiltja az auto-detectet, és menti a beállítást.

• jsLogger.setAutoDetect(true|false) — Engedélyezi vagy letiltja az automatikus felismerést. Ha true, újra lefuttatja az auto-detect logikát és törli a manuális felülírást.

• jsLogger.getRecentLogs(count?) — Visszaadja a legutóbbi count logot; ha count nincs megadva, a setDefaultRecentCount által meghatározott érték lesz használva.

• jsLogger.getLogsByCategory(category) — Kategória szerinti szűrés; visszaadja a megadott category-hez tartozó bejegyzéseket.

• jsLogger.getLogsByLevel(level) — Szint szerinti szűrés; például 'error' vagy 'warn'.

• jsLogger.clearLogs() — Kitörli az összes memóriában lévő logot.

• jsLogger.exportLogs() — Formázott JSON stringként exportálja az összes logot (pl. fájlba mentéshez).

• jsLogger.showPanel() — Rövid összegző panelt ír ki a konzolra a jelenlegi beállításokról és statisztikákról (debug állapot, logszámok, stb.).

TypeScript / editor támogatás

A csomag types mezője JsLogger.d.ts-re mutat; így az IDE-k autocompletet és tipizálást adnak.

Fájlok a csomagban

• JsLogger.js – forrás
• index.js – ESM újra-export
• autoAttach.js – window attach helper
• JsLogger.d.ts – típusdefiníciók
• index.d.ts, index.php, README.md, LICENSE

Licenc

MIT — lásd a LICENSE fájlt.