debug-web 1.0.1 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/LICENSE +1 -1
  3. package/README.de.md +115 -92
  4. package/README.es.md +120 -98
  5. package/README.md +115 -94
  6. package/README.ru.md +108 -86
  7. package/README.zh.md +115 -94
  8. package/dist/index.cjs +1 -1
  9. package/dist/index.d.ts +111 -118
  10. package/dist/index.mjs +1 -1
  11. package/package.json +22 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.0.0] - 2026-03-11
4
+ - Add function `createDebug`
5
+ - Add method `dump`
6
+ - Add option `native`
7
+ - Add option `local`
8
+ - Removed singleton
9
+ - Target ES version (`ES2018`)
10
+
11
+ ## [1.0.1] - 2026-01-06
12
+ - Updated README.md
13
+
3
14
  ## [1.0.0] - 2026-01-04
4
15
  - Initial release of debug-web library
5
16
  - Console logging with CSS styling, global data storage, and TypeScript support
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2025 Karlen
3
+ Copyright (c) 2026 Karlen
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.de.md CHANGED
@@ -1,26 +1,34 @@
1
1
  # Debug Web
2
- Leichtgewichtige Bibliothek für Browser-Debugging.
3
2
 
4
- **Vorteile**:
5
- - 🚀 **Keine Abhängigkeiten** — nur reines TypeScript;
6
- - 📦 **Größe ~3.0 kB** — minimaler Einfluss auf das Bundle;
7
- - 🎨 **Konsole-Ausgabe-Styling** — farbige Formatierung für schnelle Identifizierung;
8
- - 💾 **Globale Speicherung** — Zugriff auf Debug-Daten über `window`.
3
+ NPM-Paket für das Debugging im Browser mit anpassbaren Protokollierungsebenen (log, warn, error, debug).\
4
+ Leichtgewichtig und einfach zu bedienen.
5
+
6
+ **Eigenschaften**:
7
+ - 🚀 **Keine Abhängigkeiten** — reines TypeScript;
8
+ - 📦 **Größe ~3.4 kB** — minimaler Einfluss auf Ihr Bundle;
9
+ - 🏅 **SonarQube `A` Bewertung** — höchstes Maß an Codequalität und Zuverlässigkeit;
10
+ - 🎨 **Konsolen-Styling** — farbliche Formatierung zur schnellen Identifikation;
11
+ - 💾 **Globaler Speicher** — Zugriff auf Debug-Daten über `window`;
12
+ - 🔧 **Flexible Konfiguration** — Protokollierungsebenen, Stile, Aliase, Unterstützung von Vererbung.
9
13
 
10
14
  ---
11
15
 
12
16
  ## Inhaltsverzeichnis 📑
13
17
 
14
18
  - [Installation](#installation-)
15
- - [Log-Level](#log-level-)
19
+ - [Protokollierungsebenen](#protokollierungsebenen-)
16
20
  - [Optionen](#optionen-)
17
21
  - [Standardstile](#standardstile-)
18
- - [Verwendung](#verwendung-)
19
- - [Stilanpassung](#stilanpassung-)
20
22
  - [API](#api-)
21
- - [Erweiterung der Funktionalität](#erweiterung-der-funktionalität)
23
+ - [createDebug](#funktion-createdebug)
24
+ - [Protokollierungsmethoden](#protokollierungsmethoden)
25
+ - [Datenverarbeitung](#datenverarbeitung)
26
+ - [Ebenenverwaltung](#ebenenverwaltung)
27
+ - [Debug-Daten](#debug-daten)
28
+ - [Unterstützung](#unterstützung-)
29
+ - [Lizenz](#lizenz)
22
30
 
23
- ## Andere Sprachversionen
31
+ ## Übersetzungen
24
32
 
25
33
  [English](README.md), [Español](README.es.md), [Deutsch](README.de.md), [中文](README.zh.md), [Русский](README.ru.md)
26
34
 
@@ -35,7 +43,7 @@ npm install debug-web
35
43
  yarn add debug-web
36
44
  ```
37
45
 
38
- ## Log-Level 🔧
46
+ ## Protokollierungsebenen 🔧
39
47
 
40
48
  Priorität (niedrig nach hoch):
41
49
 
@@ -45,17 +53,21 @@ Priorität (niedrig nach hoch):
45
53
  4. `warn` (3) — Warnungen (`console.warn`);
46
54
  5. `error` (4) — Fehler (`console.error`).
47
55
 
48
- ℹ️ Benutzerdefinierte Level: Jeder Zeichenkettenwert (einschließlich `success`) wird als `info`-Level behandelt.
56
+ ℹ️ Benutzerdefinierte Ebenen: beliebige Zeichenfolgen (z.B. `success`, `focus`) werden als `info`-Ebene verarbeitet
57
+ und können eigene Stile haben.
49
58
 
50
59
  ## Optionen ⚙️
51
60
 
52
- | Parameter | Typ | Standardwert | Beschreibung |
53
- |-----------|---------------------------------|--------------------------------|--------------------------------------------------------------------------|
54
- | `app` | `string` \| `null` | `'__web_debug__'` | Eindeutiger App-Name zur Trennung von Daten verschiedener Anwendungen |
55
- | `level` | `DebugLogLevel` | `'log'` | Minimales Log-Level (Nachrichten darunter werden nicht ausgegeben) |
56
- | `prop` | `string` \| `null` | `'info'` | NName der globalen Variable für Datenzugriff über `window[prop]` |
57
- | `data` | `Record<string, unknown>` | — | Initiale Debug-Daten, die sofort nach Initialisierung gespeichert werden |
58
- | `style` | `Record<DebugLogLevel, string>` | siehe [unten](#standardstile-) | Benutzerdefinierte CSS-Stile für Nachrichten verschiedener Level |
61
+ | Parameter | Typ | Standard | Beschreibung |
62
+ |-----------|---------------------------------|--------------------------------|------------------------------------------------------------------------------|
63
+ | `app` | `string` \| `null` | `'_debug_web'` | Eindeutiger App-Name zur Trennung von Daten |
64
+ | `level` | `DebugLogLevel` | `'log'` | Minimale Protokollierungsebene (Nachrichten darunter werden nicht angezeigt) |
65
+ | `prop` | `string` \| `null` | `'info'` | Globaler Variablenname für Datenzugriff (`null` — nicht erstellen) |
66
+ | `data` | `Record<string, unknown>` | — | Initiale Debug-Daten |
67
+ | `local` | `boolean` | `false` | Ebene in `localStorage` speichern (sonst `sessionStorage`) |
68
+ | `native` | `boolean` | `false` | Native Konsolenmethoden (ohne Stile) verwenden |
69
+ | `aliases` | `Record<string, DebugLogLevel>` | '{}' | Benutzerdefinierte Aliase für `createDebug` |
70
+ | `style` | `Record<DebugLogLevel, string>` | siehe [unten](#standardstile-) | CSS-Stile für die Protokollierungsebenen |
59
71
 
60
72
  ```typescript
61
73
  type DebugLogLevel = 'debug' | 'log' | 'info' | 'success' | 'warn' | 'error' | string;
@@ -63,110 +75,121 @@ type DebugLogLevel = 'debug' | 'log' | 'info' | 'success' | 'warn' | 'error' | s
63
75
 
64
76
  ### Standardstile 🎨
65
77
 
66
- | Level | Stil (CSS) |
78
+ | Ebene | Stil (CSS) |
67
79
  |-----------|----------------------------------------------------------------------------|
68
80
  | `info` | `background-color: #155adc; color: #fff; padding: 2px; border-radius: 3px` |
81
+ | `mark` | `background-color: #695aff; color: #fff; padding: 2px; border-radius: 3px` |
69
82
  | `success` | `background-color: #13a10e; color: #fff; padding: 2px; border-radius: 3px` |
70
- | `warn` | `background-color: #ffa500; color: #fff; padding: 2px; border-radius: 3px` |
71
- | `error` | `background-color: #dc143c; color: #fff; padding: 2px; border-radius: 3px` |
83
+ | `focus` | `background-color: #881798; color: #fff; padding: 2px; border-radius: 3px` |
84
+ | `alert` | `background-color: #ffa500; color: #fff; padding: 2px; border-radius: 3px` |
85
+ | `danger` | `background-color: #dc143c; color: #fff; padding: 2px; border-radius: 3px` |
72
86
 
73
87
  ## Verwendung 💡
74
88
 
75
- ### Initialisierung
76
-
77
- Einmalig am Einstiegspunkt der Anwendung aufrufen (`main.js` / `app.js`):
78
-
79
- ```javascript
80
- import { debugInit } from 'debug-web';
89
+ ### Erstellen einer Instanz
81
90
 
82
- debugInit({
83
- level: isDev ? 'debug' : 'error',
84
- data: { version: env.VERSION, buildTime: env.BUILD_TIMESTAMP }
91
+ ```typescript
92
+ // debug.ts
93
+ import { DebugWeb } from 'debug-web';
94
+
95
+ export const debug = new DebugWeb({
96
+ app: 'my-app',
97
+ level: process.env.NODE_ENV === 'development' ? 'log' : 'error',
98
+ data: { version: APP_VERSION },
99
+ aliases: { s: 'success', f: 'focus' },
100
+ local: true,
85
101
  });
86
102
  ```
87
103
 
88
- ### Protokollierung
89
-
90
- Überall in der Anwendung verwenden, um Nachrichten auszugeben:
91
-
92
- ```javascript
93
- import { debug, log, info, success, warn, error } from 'debug-web';
94
-
95
- debug('Debug-Nachricht');
96
- log('Reguläre Nachricht');
97
- info('Informationelle Nachricht');
98
- success('Erfolg!');
99
- warn('Warnung!');
100
- error(new Error());
101
- ```
102
-
103
- ### Debug-Daten
104
+ ### API 📚
104
105
 
105
- Debug-Daten speichern, die über eine globale Variable zugänglich sind:
106
+ #### Funktion `createDebug`
106
107
 
107
- ```javascript
108
- import { debugData } from 'debug-web';
108
+ Erstellt einen Proxy mit Aliasen und Unterstützung für benutzerdefinierte Ebenen.
109
109
 
110
- debugData({ lastError: null, prevRoute: '/home', bus: ['ui:modal-opened'] });
110
+ ```typescript
111
+ <T extends typeof DebugWeb>( options?: CreateDebugOptions, DebugClass?: T ) => CustomLogLevels & InstanceType<T>;
111
112
  ```
112
- 💡 Tipp: Gib in DevTools `info` (oder einen anderen `prop`-Wert) ein, um alle gespeicherten Daten zu erhalten.
113
113
 
114
- ## Stilanpassung 🖌️
114
+ Standard-Aliase: `d` → `debug`, `l` → `log`, `i` → `info`, `w` → `warn`, `e` → `error`
115
+
116
+ #### Protokollierungsmethoden
117
+
118
+ | Ebene | Typ |
119
+ |--------------|------------------------------------------------------------------------|
120
+ | `debug` | `(message?: unknown, ...attrs: unknown[]) => void` |
121
+ | `log` | `(...attrs: unknown[]) => void` |
122
+ | `info` | `(...attrs: unknown[]) => void` |
123
+ | `warn` | `(...attrs: unknown[]) => void` |
124
+ | `error` | `(...attrs: unknown[]) => void` |
125
+ | `group` | `(open?: boolean, level?: DebugLogLevel, ...attrs: unknown[]) => void` |
126
+ | `groupEnd` | `(level?: DebugLogLevel) => void` |
127
+ | `dir` | `(value: unknown, options?: unknown) => void` |
128
+ | `dirxml` | `(...attrs: unknown[]) => void` |
129
+ | `trace` | `(...attrs: unknown[]) => void` |
130
+ | `table` | `(data: unknown, properties?: string[]) => void` |
131
+ | `count` | `(label?: string) => void` |
132
+ | `countReset` | `(label?: string) => void` |
133
+ | `time` | `(label?: string) => void` |
134
+ | `timeLog` | `(label?: string, ...attrs: unknown[]) => void` |
135
+ | `timeEnd` | `(label?: string) => void` |
136
+
137
+ #### Datenverarbeitung
138
+
139
+ | Methode | Typ | Kommentar |
140
+ |---------|---------------------------------------------------|---------------------------------------------------------------------------------|
141
+ | `set` | `(data: DebugWebData) => void` | Speichert Debug-Daten (zusammenführen) |
142
+ | `get` | `(api?: boolean) => DebugWebData \| undefined` | Gibt eine Kopie aller Daten zurück. Bei `true` werden Hilfsmethoden hinzugefügt |
143
+ | `dump` | `(keys: string[], options?: DumpOptions) => void` | Gibt Daten als Tabelle aus (ignoriert Protokollierungsebenen) |
115
144
 
116
- ```javascript
117
- import { debugSetStyle } from 'debug-web';
118
145
 
119
- // Stil für bestimmtes Level ändern
120
- debugSetStyle('info', 'color: purple; font-weight: bold;');
146
+ ```typescript
147
+ type DebugWebData = Record<string, unknown>
121
148
 
122
- // Oder mehrere Level gleichzeitig ändern
123
- debugSetStyle({ info: 'color: #9b59b6;', success: 'color: #27ae60;' });
149
+ type DumpOptions = {
150
+ level?: DebugLogLevel;
151
+ title?: string | ((data: DebugWebData) => string);
152
+ open?: boolean;
153
+ }
124
154
  ```
125
155
 
126
- ## API 📚
127
-
128
- ### Protokollierungsmethoden
156
+ #### Ebenenverwaltung
129
157
 
130
- Alle wichtigen `console`-Methoden werden unterstützt:
158
+ | Methode | Typ | Kommentar |
159
+ |------------------|-----------------|------------------------------------------|
160
+ | `level` (getter) | `DebugLogLevel` | Aktuelle Protokollierungsebene abrufen |
161
+ | `level` (setter) | `DebugLogLevel` | Aktuelle Protokollierungsebene festlegen |
131
162
 
132
- - `debug`, `log`, `info`, `warn`, `error`;
133
- - `group` (`groupCollapsed`), `groupEnd`;
134
- - `trace`, `count`, `countReset`;
135
- - `time`, `timeLog`, `timeEnd`;
136
- - `dir`, `dirxml`, `table`.
163
+ #### Styling
137
164
 
138
- ### Hilfsmethoden
165
+ | Methode | Typ | Kommentar |
166
+ |------------------|-----------------------------------|----------------------------------------------------|
167
+ | `style` (getter) | `() => DebugWebStyle` | Aktuelle Stilzuordnung abrufen |
168
+ | `style` (setter) | `(styles: DebugWebStyle) => void` | Stilzuordnung aktualisieren (wird zusammengeführt) |
139
169
 
140
- - `debugData` — Hinzufügen von Debug-Daten (mit vorhandenen zusammengeführt);
141
- - `debugSetStyle` — Ändern von CSS-Stilen für Log-Level;
142
- - `debugGetStyle` — Abrufen aktueller Stileinstellungen;
143
- - `debugReset`.
170
+ ```typescript
171
+ type DebugWebStyle = Record<DebugLogLevel, string | undefined>
172
+ ```
144
173
 
145
- ## Erweiterung der Funktionalität
174
+ ### Debug-Daten
146
175
 
147
- Sie können eine eigene Klasse erstellen, um benutzerdefinierte Protokollierungsmethoden hinzuzufügen:
176
+ Speichern Sie beliebige Daten und betrachten Sie sie in der Konsole:
148
177
 
149
- ```ts
150
- export class CustomDebug extends WebDebug {
151
- static {
152
- // Neuen Stil für benutzerdefiniertes Level hinzufügen
153
- CustomDebug.setStyle({ ...WebDebug._style, 'customEvent': 'color: #00ff00' });
154
- }
178
+ ```javascript
179
+ debug.set({ error: null, user: { id: 1, name: 'John' } });
180
+ ```
155
181
 
156
- // Neue Protokollierungsmethode erstellen
157
- static customEvent(...attrs: unknown[]) {
158
- // Prüfen, ob 'info'-Level (dem benutzerdefinierte Level gleichgesetzt werden) erlaubt ist
159
- if (!CustomDebug.can('info')) return;
182
+ Daten sind über `window[prop]` (Standard ist `info`) zugänglich.
183
+ Geben Sie in der Browserkonsole ein:
160
184
 
161
- // Interne Methode für Formatierung und Ausgabe verwenden
162
- CustomDebug.print('info', 'customEvent', attrs);
163
- }
164
- }
185
+ ```javascript
186
+ info // { error: null, user: {...}, setLevel: f }
187
+ info.setLevel() // Protokollierungsebene ändern
165
188
  ```
166
189
 
167
- ## Unterstützung
190
+ ## Unterstützung ❤️
168
191
 
169
- Wenn Sie diese Bibliothek nützlich finden, erwägen Sie eine Unterstützung der Entwicklung:
192
+ Wenn diese Bibliothek für Sie nützlich ist, ziehen Sie bitte in Betracht, ihre Entwicklung zu unterstützen:
170
193
 
171
194
  - [Patreon](https://www.patreon.com/collection/1924882)
172
195
  - [Boosty](https://boosty.to/karlen/donate)
package/README.es.md CHANGED
@@ -1,26 +1,34 @@
1
1
  # Debug Web
2
- Librería ligera para depuración en el navegador.
3
2
 
4
- **Ventajas**:
3
+ Paquete NPM para depuración en el navegador con niveles de registro personalizables (log, warn, error, debug).\
4
+ Ligero y fácil de usar.
5
+
6
+ **Características**:
5
7
  - 🚀 **Sin dependencias** — solo TypeScript puro;
6
- - 📦 **Peso ~3.0 kB** — impacto mínimo en el bundle;
7
- - 🎨 **Estilización de salida de consola** — formato coloreado para identificación rápida;
8
- - 💾 **Almacenamiento global** — accede a datos de depuración mediante `window`.
8
+ - 📦 **Peso ~3.4 kB** — impacto mínimo en tu bundle;
9
+ - 🏅 **Calificación SonarQube `A`** — el nivel más alto de calidad y confiabilidad de código;
10
+ - 🎨 **Estilización de consola** — formato de colores para una identificación rápida;
11
+ - 💾 **Almacenamiento global** — acceso a los datos de depuración a través de `window`;
12
+ - 🔧 **Configuración flexible** — niveles de registro, estilos, alias, soporte para herencia.
9
13
 
10
14
  ---
11
15
 
12
- ## Tabla de Contenidos 📑
16
+ ## Tabla de contenidos 📑
13
17
 
14
18
  - [Instalación](#instalación-)
15
- - [Niveles de Registro](#niveles-de-registro-)
19
+ - [Niveles de registro](#niveles-de-registro-)
16
20
  - [Opciones](#opciones-)
17
- - [Estilos por Defecto](#estilos-por-defecto-)
18
- - [Cómo Usar](#cómo-usar-)
19
- - [Personalización de Estilos](#personalización-de-estilos-)
21
+ - [Estilos por defecto](#estilos-por-defecto-)
20
22
  - [API](#api-)
21
- - [Extensión de Funcionalidad](#extensión-de-funcionalidad)
23
+ - [createDebug](#función-createdebug)
24
+ - [Métodos de registro](#métodos-de-registro)
25
+ - [Manejo de datos](#manejo-de-datos)
26
+ - [Gestión de niveles](#gestión-de-niveles)
27
+ - [Datos de depuración](#datos-de-depuración)
28
+ - [Soporte](#soporte-)
29
+ - [Licencia](#licencia)
22
30
 
23
- ## Otras Traducciones
31
+ ## Traducciones
24
32
 
25
33
  [English](README.md), [Español](README.es.md), [Deutsch](README.de.md), [中文](README.zh.md), [Русский](README.ru.md)
26
34
 
@@ -35,7 +43,7 @@ npm install debug-web
35
43
  yarn add debug-web
36
44
  ```
37
45
 
38
- ## Niveles de Registro 🔧
46
+ ## Niveles de registro 🔧
39
47
 
40
48
  Prioridad (de menor a mayor):
41
49
 
@@ -45,129 +53,143 @@ Prioridad (de menor a mayor):
45
53
  4. `warn` (3) — advertencias (`console.warn`)
46
54
  5. `error` (4) — errores (`console.error`)
47
55
 
48
- ℹ️ Niveles personalizados: cualquier valor de cadena (incluyendo `success`) se tratará como nivel `info`.
56
+ ℹ️ Niveles personalizados: cualquier valor de cadena (por ejemplo, `success`, `focus`) será procesado como nivel `info`
57
+ y puede tener sus propios estilos.
49
58
 
50
59
  ## Opciones ⚙️
51
60
 
52
- | Parámetro | Tipo | Por Defecto | Descripción |
53
- |-----------|---------------------------------|------------------------------------|---------------------------------------------------------------------------|
54
- | `app` | `string` \| `null` | `'__web_debug__'` | Nombre único de la app para separar datos de diferentes aplicaciones |
55
- | `level` | `DebugLogLevel` | `'log'` | Nivel mínimo de registro (mensajes por debajo no se imprimen) |
56
- | `prop` | `string` \| `null` | `'info'` | Nombre de la variable global para acceder a datos mediante `window[prop]` |
57
- | `data` | `Record<string, unknown>` | — | Datos de depuración iniciales guardados tras la inicialización |
58
- | `style` | `Record<DebugLogLevel, string>` | ver [abajo](#estilos-por-defecto-) | Estilos CSS personalizados para mensajes de diferentes niveles |
61
+ | Parámetro | Tipo | Por defecto | Descripción |
62
+ |-----------|---------------------------------|------------------------------------|-----------------------------------------------------------------------------|
63
+ | `app` | `string` \| `null` | `'_debug_web'` | Nombre único de la aplicación para separar datos |
64
+ | `level` | `DebugLogLevel` | `'log'` | Nivel mínimo de registro (no se muestran mensajes por debajo de este nivel) |
65
+ | `prop` | `string` \| `null` | `'info'` | Nombre de variable global para acceder a datos (`null` — no crear) |
66
+ | `data` | `Record<string, unknown>` | — | Datos iniciales de depuración |
67
+ | `local` | `boolean` | `false` | Guardar el nivel en `localStorage` (de lo contrario en `sessionStorage`) |
68
+ | `native` | `boolean` | `false` | Usar métodos nativos de la consola (sin estilos) |
69
+ | `aliases` | `Record<string, DebugLogLevel>` | '{}' | Alias personalizados para `createDebug` |
70
+ | `style` | `Record<DebugLogLevel, string>` | ver [abajo](#estilos-por-defecto-) | Estilos CSS para los niveles de registro |
59
71
 
60
72
  ```typescript
61
73
  type DebugLogLevel = 'debug' | 'log' | 'info' | 'success' | 'warn' | 'error' | string;
62
74
  ```
63
75
 
64
- ### Estilos por Defecto 🎨
76
+ ### Estilos por defecto 🎨
65
77
 
66
78
  | Nivel | Estilo (CSS) |
67
79
  |-----------|----------------------------------------------------------------------------|
68
80
  | `info` | `background-color: #155adc; color: #fff; padding: 2px; border-radius: 3px` |
81
+ | `mark` | `background-color: #695aff; color: #fff; padding: 2px; border-radius: 3px` |
69
82
  | `success` | `background-color: #13a10e; color: #fff; padding: 2px; border-radius: 3px` |
70
- | `warn` | `background-color: #ffa500; color: #fff; padding: 2px; border-radius: 3px` |
71
- | `error` | `background-color: #dc143c; color: #fff; padding: 2px; border-radius: 3px` |
72
-
73
- ## Cómo Usar 💡
74
-
75
- ### Inicialización
83
+ | `focus` | `background-color: #881798; color: #fff; padding: 2px; border-radius: 3px` |
84
+ | `alert` | `background-color: #ffa500; color: #fff; padding: 2px; border-radius: 3px` |
85
+ | `danger` | `background-color: #dc143c; color: #fff; padding: 2px; border-radius: 3px` |
76
86
 
77
- Se llama una vez en el punto de entrada de la aplicación (`main.js` / `app.js`):
87
+ ## Cómo usar 💡
78
88
 
79
- ```javascript
80
- import { debugInit } from 'debug-web';
89
+ ### Crear una instancia
81
90
 
82
- debugInit({
83
- level: isDev ? 'debug' : 'error',
84
- data: { version: env.VERSION, buildTime: env.BUILD_TIMESTAMP }
91
+ ```typescript
92
+ // debug.ts
93
+ import { DebugWeb } from 'debug-web';
94
+
95
+ export const debug = new DebugWeb({
96
+ app: 'my-app',
97
+ level: process.env.NODE_ENV === 'development' ? 'log' : 'error',
98
+ data: { version: APP_VERSION },
99
+ aliases: { s: 'success', f: 'focus' },
100
+ local: true,
85
101
  });
86
102
  ```
87
103
 
88
- ### Registro
89
-
90
- Usa en cualquier parte de la aplicación para mostrar mensajes:
91
-
92
- ```javascript
93
- import { debug, log, info, success, warn, error } from 'debug-web';
94
-
95
- debug('Mensaje de depuración');
96
- log('Mensaje regular');
97
- info('Mensaje informativo');
98
- success('¡Éxito!');
99
- warn('¡Advertencia!');
100
- error(new Error());
101
- ```
102
-
103
- ### Datos de Depuración
104
+ ### API 📚
104
105
 
105
- Guarda datos de depuración que serán accesibles mediante una variable global:
106
+ #### Función `createDebug`
106
107
 
107
- ```javascript
108
- import { debugData } from 'debug-web';
108
+ Crea un proxy con alias y soporte para niveles personalizados.
109
109
 
110
- debugData({ lastError: null, prevRoute: '/home', bus: ['ui:modal-opened'] });
110
+ ```typescript
111
+ <T extends typeof DebugWeb>( options?: CreateDebugOptions, DebugClass?: T ) => CustomLogLevels & InstanceType<T>;
111
112
  ```
112
113
 
113
- 💡 Consejo: En DevTools, escribe `info` (u otro valor de `prop`) para obtener todos los datos guardados.
114
+ Alias por defecto: `d` → `debug`, `l` → `log`, `i` → `info`, `w` → `warn`, `e` → `error`
115
+
116
+ #### Métodos de registro
117
+
118
+ | Nivel | Tipo |
119
+ |--------------|------------------------------------------------------------------------|
120
+ | `debug` | `(message?: unknown, ...attrs: unknown[]) => void` |
121
+ | `log` | `(...attrs: unknown[]) => void` |
122
+ | `info` | `(...attrs: unknown[]) => void` |
123
+ | `warn` | `(...attrs: unknown[]) => void` |
124
+ | `error` | `(...attrs: unknown[]) => void` |
125
+ | `group` | `(open?: boolean, level?: DebugLogLevel, ...attrs: unknown[]) => void` |
126
+ | `groupEnd` | `(level?: DebugLogLevel) => void` |
127
+ | `dir` | `(value: unknown, options?: unknown) => void` |
128
+ | `dirxml` | `(...attrs: unknown[]) => void` |
129
+ | `trace` | `(...attrs: unknown[]) => void` |
130
+ | `table` | `(data: unknown, properties?: string[]) => void` |
131
+ | `count` | `(label?: string) => void` |
132
+ | `countReset` | `(label?: string) => void` |
133
+ | `time` | `(label?: string) => void` |
134
+ | `timeLog` | `(label?: string, ...attrs: unknown[]) => void` |
135
+ | `timeEnd` | `(label?: string) => void` |
136
+
137
+ #### Manejo de datos
138
+
139
+ | Método | Tipo | Comentario |
140
+ |--------|---------------------------------------------------|-----------------------------------------------------------------------------|
141
+ | `set` | `(data: DebugWebData) => void` | Guarda los datos de depuración (los fusiona) |
142
+ | `get` | `(api?: boolean) => DebugWebData \| undefined` | Devuelve una copia de todos los datos. Si es `true`, añade métodos de ayuda |
143
+ | `dump` | `(keys: string[], options?: DumpOptions) => void` | Imprime los datos en formato tabla (ignora niveles de registro) |
114
144
 
115
- ## Personalización de Estilos 🖌️
116
145
 
117
- ```javascript
118
- import { debugSetStyle } from 'debug-web';
119
-
120
- // Cambiar estilo para un nivel específico
121
- debugSetStyle('info', 'color: purple; font-weight: bold;');
146
+ ```typescript
147
+ type DebugWebData = Record<string, unknown>
122
148
 
123
- // O cambiar varios niveles a la vez
124
- debugSetStyle({ info: 'color: #9b59b6;', success: 'color: #27ae60;' });
149
+ type DumpOptions = {
150
+ level?: DebugLogLevel;
151
+ title?: string | ((data: DebugWebData) => string);
152
+ open?: boolean;
153
+ }
125
154
  ```
126
155
 
127
- ## API 📚
128
-
129
- ### Métodos de Registro
156
+ #### Gestión de niveles
130
157
 
131
- Se soportan todos los métodos principales de `console`:
158
+ | Método | Tipo | Comentario |
159
+ |------------------|-----------------|----------------------------------------|
160
+ | `level` (getter) | `DebugLogLevel` | Obtener el nivel de registro actual |
161
+ | `level` (setter) | `DebugLogLevel` | Establecer el nivel de registro actual |
132
162
 
133
- - `debug`, `log`, `info`, `warn`, `error`;
134
- - `group` (`groupCollapsed`), `groupEnd`;
135
- - `trace`, `count`, `countReset`;
136
- - `time`, `timeLog`, `timeEnd`;
137
- - `dir`, `dirxml`, `table`.
163
+ #### Estilización
138
164
 
139
- ### Métodos Auxiliares
165
+ | Método | Tipo | Comentario |
166
+ |------------------|-----------------------------------|----------------------------------------------|
167
+ | `style` (getter) | `() => DebugWebStyle` | Obtener el mapa de estilos actual |
168
+ | `style` (setter) | `(styles: DebugWebStyle) => void` | Actualizar el mapa de estilos (se fusionará) |
140
169
 
141
- - `debugData` — Agregar datos de depuración (se fusiona con los existentes);
142
- - `debugSetStyle` — Cambiar estilos CSS para niveles de registro;
143
- - `debugGetStyle` — Obtener configuración actual de estilos;
144
- - `debugReset`.
170
+ ```typescript
171
+ type DebugWebStyle = Record<DebugLogLevel, string | undefined>
172
+ ```
145
173
 
146
- ## Extensión de Funcionalidad
174
+ ### Datos de depuración
147
175
 
148
- Puedes crear tu propia clase para agregar métodos de registro personalizados:
176
+ Guarde cualquier dato y véalo en la consola:
149
177
 
150
- ```ts
151
- export class CustomDebug extends WebDebug {
152
- static {
153
- // Agregar nuevo estilo para nivel personalizado
154
- CustomDebug.setStyle({ ...WebDebug._style, 'customEvent': 'color: #00ff00' });
155
- }
178
+ ```javascript
179
+ debug.set({ error: null, user: { id: 1, name: 'John' } });
180
+ ```
156
181
 
157
- // Crear un nuevo método de registro
158
- static customEvent(...attrs: unknown[]) {
159
- // Verificar si el nivel 'info' (al que se equiparan niveles personalizados) está permitido
160
- if (!CustomDebug.can('info')) return;
182
+ Los datos son accesibles a través de `window[prop]` (por defecto es `info`).
183
+ Escriba en la consola del navegador:
161
184
 
162
- // Usar método interno para formatear y mostrar
163
- CustomDebug.print('info', 'customEvent', attrs);
164
- }
165
- }
185
+ ```javascript
186
+ info // { error: null, user: {...}, setLevel: f }
187
+ info.setLevel() // cambiar el nivel de registro
166
188
  ```
167
189
 
168
- ## Apoyo
190
+ ## Soporte ❤️
169
191
 
170
- Si encuentras útil esta librería, considera apoyar su desarrollo:
192
+ Si esta biblioteca te resulta útil, considera apoyar su desarrollo:
171
193
 
172
194
  - [Patreon](https://www.patreon.com/collection/1924882)
173
195
  - [Boosty](https://boosty.to/karlen/donate)
@@ -177,7 +199,7 @@ Si encuentras útil esta librería, considera apoyar su desarrollo:
177
199
  MIT © [Karlen Pireverdiev](https://github.com/Karlen-ll)
178
200
 
179
201
  ## Enlaces
180
- - [📝 Historial de Cambios](CHANGELOG.md)
181
- - [💻 Código Fuente](https://github.com/Karlen-ll/debug-web)
182
- - [🐛 Reportar Errores](https://github.com/Karlen-ll/debug-web/issues)
202
+ - [📝 Historial de cambios](CHANGELOG.md)
203
+ - [💻 Código fuente](https://github.com/Karlen-ll/debug-web)
204
+ - [🐛 Reportes de errores](https://github.com/Karlen-ll/debug-web/issues)
183
205
  - [📦 Paquete NPM](https://www.npmjs.com/package/debug-web)