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/README.md CHANGED
@@ -1,26 +1,34 @@
1
1
  # Debug Web
2
- Lightweight browser debugging library.
3
2
 
4
- **Advantages**:
3
+ NPM package for browser debugging with customizable logging levels (log, warn, error, debug).\
4
+ Lightweight and easy to use.
5
+
6
+ **Features**:
5
7
  - 🚀 **No dependencies** — pure TypeScript only;
6
- - 📦 **Size ~3.0 kB** — minimal bundle impact;
7
- - 🎨 **Console output styling** — colored formatting for quick identification;
8
- - 💾 **Global storage** — access debug data via `window`.
8
+ - 📦 **Size ~3.4 kB** — minimal impact on your bundle;
9
+ - 🏅 **SonarQube `A` Rating** — highest level of code quality and reliability;
10
+ - 🎨 **Console output styling** — color formatting for quick identification;
11
+ - 💾 **Global storage** — access debug data via `window`;
12
+ - 🔧 **Flexible configuration** — logging levels, styles, aliases, inheritance support.
9
13
 
10
14
  ---
11
15
 
12
16
  ## Table of Contents 📑
13
17
 
14
18
  - [Installation](#installation-)
15
- - [Log Levels](#log-levels-)
19
+ - [Log levels](#log-levels-)
16
20
  - [Options](#options-)
17
- - [Default Styles](#default-styles-)
18
- - [How to Use](#how-to-use-)
19
- - [Style Customization](#style-customization-)
21
+ - [Default styles](#default-styles-)
20
22
  - [API](#api-)
21
- - [Extending Functionality](#extending-functionality)
23
+ - [createDebug](#createdebug-function)
24
+ - [Logging methods](#logging-methods)
25
+ - [Data handling](#data-handling)
26
+ - [Level management](#level-management)
27
+ - [Debug data](#debug-data)
28
+ - [Support](#support-)
29
+ - [License](#license)
22
30
 
23
- ## Other Language Versions
31
+ ## Languages
24
32
 
25
33
  [English](README.md), [Español](README.es.md), [Deutsch](README.de.md), [中文](README.zh.md), [Русский](README.ru.md)
26
34
 
@@ -37,7 +45,7 @@ yarn add debug-web
37
45
 
38
46
  ## Log Levels 🔧
39
47
 
40
- Priority (lowest to highest):
48
+ Priority (from lowest to highest):
41
49
 
42
50
  1. `debug` (0) — debug information (`console.debug`);
43
51
  2. `log` (1) — basic messages (`console.log`)
@@ -45,127 +53,140 @@ Priority (lowest to highest):
45
53
  4. `warn` (3) — warnings (`console.warn`)
46
54
  5. `error` (4) — errors (`console.error`)
47
55
 
48
- ℹ️ Custom levels: any string values (including `success`) will be treated as `info` level.
56
+ ℹ️ Custom levels: any string values (e.g., `success`, `focus`) will be processed as `info` level and can have their own styles.
49
57
 
50
58
  ## Options ⚙️
51
59
 
52
- | Parameter | Type | Default | Description |
53
- |-----------|---------------------------------|-------------------------------|---------------------------------------------------------------|
54
- | `app` | `string` \| `null` | `'__web_debug__'` | Unique app name to separate data from different applications |
55
- | `level` | `DebugLogLevel` | `'log'` | Minimum log level (messages below this level are not printed) |
56
- | `prop` | `string` \| `null` | `'info'` | Name of global variable to access data via `window[prop]` |
57
- | `data` | `Record<string, unknown>` | — | Initial debug data saved immediately after initialization |
58
- | `style` | `Record<DebugLogLevel, string>` | see [below](#default-styles-) | Custom CSS styles for messages of different levels |
60
+ | Parameter | Type | Default | Description |
61
+ |-----------|---------------------------------|-------------------------------|------------------------------------------------------------------|
62
+ | `app` | `string` \| `null` | `'_debug_web'` | Unique application name to separate data |
63
+ | `level` | `DebugLogLevel` | `'log'` | Minimum logging level (messages below this level are not output) |
64
+ | `prop` | `string` \| `null` | `'info'` | Global variable name to access data (`null` — do not create) |
65
+ | `data` | `Record<string, unknown>` | — | Initial debug data |
66
+ | `local` | `boolean` | `false` | Save level in `localStorage` (otherwise `sessionStorage`) |
67
+ | `native` | `boolean` | `false` | Use native console methods (without styles) |
68
+ | `aliases` | `Record<string, DebugLogLevel>` | '{}' | Custom aliases for `createDebug` |
69
+ | `style` | `Record<DebugLogLevel, string>` | see [below](#default-styles-) | CSS styles for log levels |
59
70
 
60
71
  ```typescript
61
72
  type DebugLogLevel = 'debug' | 'log' | 'info' | 'success' | 'warn' | 'error' | string;
62
73
  ```
63
74
 
64
- ### Default Styles 🎨
75
+ ### Default styles 🎨
65
76
 
66
77
  | Level | Style (CSS) |
67
78
  |-----------|----------------------------------------------------------------------------|
68
79
  | `info` | `background-color: #155adc; color: #fff; padding: 2px; border-radius: 3px` |
80
+ | `mark` | `background-color: #695aff; color: #fff; padding: 2px; border-radius: 3px` |
69
81
  | `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
- ## How to Use 💡
74
-
75
- ### Initialization
82
+ | `focus` | `background-color: #881798; color: #fff; padding: 2px; border-radius: 3px` |
83
+ | `alert` | `background-color: #ffa500; color: #fff; padding: 2px; border-radius: 3px` |
84
+ | `danger` | `background-color: #dc143c; color: #fff; padding: 2px; border-radius: 3px` |
76
85
 
77
- Called once at the application entry point (`main.js` / `app.js`):
86
+ ## How to use 💡
78
87
 
79
- ```javascript
80
- import { debugInit } from 'debug-web';
88
+ ### Creating an instance
81
89
 
82
- debugInit({
83
- level: isDev ? 'debug' : 'error',
84
- data: { version: env.VERSION, buildTime: env.BUILD_TIMESTAMP }
90
+ ```typescript
91
+ // debug.ts
92
+ import { DebugWeb } from 'debug-web';
93
+
94
+ export const debug = new DebugWeb({
95
+ app: 'my-app',
96
+ level: process.env.NODE_ENV === 'development' ? 'log' : 'error',
97
+ data: { version: APP_VERSION },
98
+ aliases: { s: 'success', f: 'focus' },
99
+ local: true,
85
100
  });
86
101
  ```
87
102
 
88
- ### Logging
89
-
90
- Use anywhere in the application to output messages:
91
-
92
- ```javascript
93
- import { debug, log, info, success, warn, error } from 'debug-web';
94
-
95
- debug('Debug message');
96
- log('Regular message');
97
- info('Informational message');
98
- success('Success!');
99
- warn('Warning!');
100
- error(new Error());
101
- ```
102
-
103
- ### Debug Data
103
+ ### API 📚
104
104
 
105
- Save debug data that will be accessible via a global variable:
105
+ #### `createDebug` function
106
106
 
107
- ```javascript
108
- import { debugData } from 'debug-web';
107
+ Creates a proxy with aliases and custom level support.
109
108
 
110
- debugData({ lastError: null, prevRoute: '/home', bus: ['ui:modal-opened'] });
109
+ ```typescript
110
+ <T extends typeof DebugWeb>( options?: CreateDebugOptions, DebugClass?: T ) => CustomLogLevels & InstanceType<T>;
111
111
  ```
112
112
 
113
- 💡 Tip: In DevTools, type `info` (or another `prop` value) to get all saved data.
113
+ Default aliases: `d` → `debug`, `l` → `log`, `i` → `info`, `w` → `warn`, `e` → `error`
114
+
115
+ #### Logging methods
116
+
117
+ | Level | Type |
118
+ |--------------|------------------------------------------------------------------------|
119
+ | `debug` | `(message?: unknown, ...attrs: unknown[]) => void` |
120
+ | `log` | `(...attrs: unknown[]) => void` |
121
+ | `info` | `(...attrs: unknown[]) => void` |
122
+ | `warn` | `(...attrs: unknown[]) => void` |
123
+ | `error` | `(...attrs: unknown[]) => void` |
124
+ | `group` | `(open?: boolean, level?: DebugLogLevel, ...attrs: unknown[]) => void` |
125
+ | `groupEnd` | `(level?: DebugLogLevel) => void` |
126
+ | `dir` | `(value: unknown, options?: unknown) => void` |
127
+ | `dirxml` | `(...attrs: unknown[]) => void` |
128
+ | `trace` | `(...attrs: unknown[]) => void` |
129
+ | `table` | `(data: unknown, properties?: string[]) => void` |
130
+ | `count` | `(label?: string) => void` |
131
+ | `countReset` | `(label?: string) => void` |
132
+ | `time` | `(label?: string) => void` |
133
+ | `timeLog` | `(label?: string, ...attrs: unknown[]) => void` |
134
+ | `timeEnd` | `(label?: string) => void` |
135
+
136
+ #### Data handling
137
+
138
+ | Method | Type | Comment |
139
+ |--------|---------------------------------------------------|----------------------------------------------------------------------|
140
+ | `set` | `(data: DebugWebData) => void` | Saves debug data (merges) |
141
+ | `get` | `(api?: boolean) => DebugWebData \| undefined` | Returns a copy of all data. If `true` is passed, adds helper methods |
142
+ | `dump` | `(keys: string[], options?: DumpOptions) => void` | Outputs data as a table (ignores logging levels) |
114
143
 
115
- ## Style Customization 🖌️
116
144
 
117
- ```javascript
118
- import { debugSetStyle } from 'debug-web';
119
-
120
- // Change style for a specific level
121
- debugSetStyle('info', 'color: purple; font-weight: bold;');
145
+ ```typescript
146
+ type DebugWebData = Record<string, unknown>
122
147
 
123
- // Or change multiple levels at once
124
- debugSetStyle({ info: 'color: #9b59b6;', success: 'color: #27ae60;' });
148
+ type DumpOptions = {
149
+ level?: DebugLogLevel;
150
+ title?: string | ((data: DebugWebData) => string);
151
+ open?: boolean;
152
+ }
125
153
  ```
126
154
 
127
- ## API 📚
128
-
129
- ### Logging Methods
155
+ #### Level management
130
156
 
131
- All major `console` methods are supported:
157
+ | Method | Type | Comment |
158
+ |------------------|-----------------|-------------------------------|
159
+ | `level` (getter) | `DebugLogLevel` | Get the current logging level |
160
+ | `level` (setter) | `DebugLogLevel` | Set the current logging level |
132
161
 
133
- - `debug`, `log`, `info`, `warn`, `error`;
134
- - `group` (`groupCollapsed`), `groupEnd`;
135
- - `trace`, `count`, `countReset`;
136
- - `time`, `timeLog`, `timeEnd`;
137
- - `dir`, `dirxml`, `table`.
162
+ #### Styling
138
163
 
139
- ### Helper Methods
164
+ | Method | Type | Comment |
165
+ |------------------|-----------------------------------|----------------------------------------|
166
+ | `style` (getter) | `() => DebugWebStyle` | Get the current styles map |
167
+ | `style` (setter) | `(styles: DebugWebStyle) => void` | Update the styles map (will be merged) |
140
168
 
141
- - `debugData` — Adding debug data (merged with existing);
142
- - `debugSetStyle` — Changing CSS styles for log levels;
143
- - `debugGetStyle` — Getting current style settings;
144
- - `debugReset`.
169
+ ```typescript
170
+ type DebugWebStyle = Record<DebugLogLevel, string | undefined>
171
+ ```
145
172
 
146
- ## Extending Functionality
173
+ ### Debug data
147
174
 
148
- You can create your own class to add custom logging methods:
175
+ Save any data and view it in the console:
149
176
 
150
- ```ts
151
- export class CustomDebug extends WebDebug {
152
- static {
153
- // Add new style for custom level
154
- CustomDebug.setStyle({ ...WebDebug._style, 'customEvent': 'color: #00ff00' });
155
- }
177
+ ```javascript
178
+ debug.set({ error: null, user: { id: 1, name: 'John' } });
179
+ ```
156
180
 
157
- // Create a new logging method
158
- static customEvent(...attrs: unknown[]) {
159
- // Check if 'info' level (to which custom levels are equated) is allowed
160
- if (!CustomDebug.can('info')) return;
181
+ Data is accessible via `window[prop]` (default is `info`).
182
+ Type into the browser console:
161
183
 
162
- // Use internal method for formatting and output
163
- CustomDebug.print('info', 'customEvent', attrs);
164
- }
165
- }
184
+ ```javascript
185
+ info // { error: null, user: {...}, setLevel: f }
186
+ info.setLevel() // change logging level
166
187
  ```
167
188
 
168
- ## Support
189
+ ## Support ❤️
169
190
 
170
191
  If you find this library useful, consider supporting its development:
171
192
 
@@ -176,7 +197,7 @@ If you find this library useful, consider supporting its development:
176
197
 
177
198
  MIT © [Karlen Pireverdiev](https://github.com/Karlen-ll)
178
199
 
179
- ## Ссылки
200
+ ## Links
180
201
  - [📝 Changelog](CHANGELOG.md)
181
202
  - [💻 Source Code](https://github.com/Karlen-ll/debug-web)
182
203
  - [🐛 Bug Reports](https://github.com/Karlen-ll/debug-web/issues)
package/README.ru.md CHANGED
@@ -1,11 +1,15 @@
1
1
  # Debug Web
2
- Легковесная библиотека для отладки в браузере.
2
+
3
+ NPM-пакет для отладки в браузере с настраиваемыми уровнями логирования (log, warn, error, debug).\
4
+ Легковесный и простой в использовании.
3
5
 
4
6
  **Преимущества**:
5
7
  - 🚀 **Нет зависимостей** — только чистый TypeScript;
6
- - 📦 **Вес ~3.0 kB** — минимальное влияние на бандл;
8
+ - 📦 **Вес ~3.4 kB** — минимальное влияние на бандл;
9
+ - 🏅 **Рейтинг SonarQube `A`** — высший уровень качества кода и надёжности;
7
10
  - 🎨 **Стилизация console-выводов** — цветное форматирование для быстрой идентификации;
8
- - 💾 **Глобальное хранилище** — доступ к отладочным данным через `window`.
11
+ - 💾 **Глобальное хранилище** — доступ к отладочным данным через `window`;
12
+ - 🔧 **Гибкая настройка** — уровни логирования, стили, алиасы, возможность наследования.
9
13
 
10
14
  ---
11
15
 
@@ -15,12 +19,16 @@
15
19
  - [Уровни логирования](#уровни-логирования-)
16
20
  - [Опции](#опции-)
17
21
  - [Стили по умолчанию](#стили-по-умолчанию-)
18
- - [Как использовать](#как-использовать-)
19
- - [Кастомизация стилей](#кастомизация-стилей-)
20
22
  - [API](#api-)
21
- - [Расширение функциональности](#расширение-функциональности)
23
+ - [createDebug](#функция-createdebug)
24
+ - [Методы логирования](#методы-логирования)
25
+ - [Работа с данными](#работа-с-данными)
26
+ - [Управление уровнем](#управление-уровнем)
27
+ - [Отладочные данные](#отладочные-данные)
28
+ - [Поддержка](#поддержка-)
29
+ - [Лицензия](#лицензия)
22
30
 
23
- ## Другие языковые версии
31
+ ## Переводы
24
32
 
25
33
  [English](README.md), [Español](README.es.md), [Deutsch](README.de.md), [中文](README.zh.md), [Русский](README.ru.md)
26
34
 
@@ -45,17 +53,21 @@ yarn add debug-web
45
53
  4. `warn` (3) — предупреждения (`console.warn`)
46
54
  5. `error` (4) — ошибки (`console.error`)
47
55
 
48
- ℹ️ Кастомные уровни: любые строковые значения (включая `success`) будут обработаны как уровень `info`.
56
+ ℹ️ Кастомные уровни: любые строковые значения (например, `success`, `focus`) будут обработаны как уровень `info`
57
+ и могут иметь собственные стили.
49
58
 
50
59
  ## Опции ⚙️
51
60
 
52
- | Параметр | Тип | По умолчанию | Описание |
53
- |----------|---------------------------------|----------------------------------|----------------------------------------------------------------------------|
54
- | `app` | `string` \| `null` | `'__web_debug__'` | Уникальное имя приложения для разделения данных разных приложений |
55
- | `level` | `DebugLogLevel` | `'log'` | Минимальный уровень логирования (сообщения ниже этого уровня не выводятся) |
56
- | `prop` | `string` \| `null` | `'info'` | Имя глобальной переменной для доступа к данным через `window[prop]` |
57
- | `data` | `Record<string, unknown>` | — | Начальные отладочные данные, сохраняемые сразу после инициализации |
58
- | `style` | `Record<DebugLogLevel, string>` | см. [ниже](#стили-по-умолчанию-) | Кастомизация CSS-стилей для сообщений разных уровней |
61
+ | Параметр | Тип | По умолчанию | Описание |
62
+ |-----------|---------------------------------|----------------------------------|----------------------------------------------------------------------------|
63
+ | `app` | `string` \| `null` | `'_debug_web'` | Уникальное имя приложения для разделения данных |
64
+ | `level` | `DebugLogLevel` | `'log'` | Минимальный уровень логирования (сообщения ниже этого уровня не выводятся) |
65
+ | `prop` | `string` \| `null` | `'info'` | Имя глобальной переменной для доступа к данным (`null` — не создавать) |
66
+ | `data` | `Record<string, unknown>` | — | Начальные отладочные данные |
67
+ | `local` | `boolean` | `false` | Сохранять уровень в `localStorage` (иначе `sessionStorage`) |
68
+ | `native` | `boolean` | `false` | Использовать нативные методы консоли (без стилей) |
69
+ | `aliases` | `Record<string, DebugLogLevel>` | '{}' | Пользовательские алиасы для `createDebug` |
70
+ | `style` | `Record<DebugLogLevel, string>` | см. [ниже](#стили-по-умолчанию-) | CSS-стили для уровлей логирования |
59
71
 
60
72
  ```typescript
61
73
  type DebugLogLevel = 'debug' | 'log' | 'info' | 'success' | 'warn' | 'error' | string;
@@ -66,106 +78,116 @@ type DebugLogLevel = 'debug' | 'log' | 'info' | 'success' | 'warn' | 'error' | s
66
78
  | Уровень | Стиль (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
  ## Как использовать 💡
74
88
 
75
- ### Инициализация
76
-
77
- Вызывается один раз в точке входа приложения (`main.js` / `app.js`):
78
-
79
- ```javascript
80
- import { debugInit } from 'debug-web';
89
+ ### Создание экземпляра
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
- ### Логирование
104
+ ### API 📚
89
105
 
90
- Используйте в любом месте приложения для вывода сообщений:
106
+ #### Функция `createDebug`
91
107
 
92
- ```javascript
93
- import { debug, log, info, success, warn, error } from 'debug-web';
94
-
95
- debug('Отладочное сообщение');
96
- log('Обычное сообщение');
97
- info('Информационное сообщение');
98
- success('Успешно!');
99
- warn('Внимание!');
100
- error(new Error());
101
- ```
108
+ Создаёт прокси с алиасами и поддержкой кастомных уровней.
102
109
 
103
- ### Отладочные данные
104
-
105
- Сохраняйте данные для отладки, которые будут доступны через глобальную переменную:
106
-
107
- ```javascript
108
- import { debugData } from 'debug-web';
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
- 💡 Совет: В DevTools введите `info` (или другое значение `prop`) чтобы получить все сохранённые данные.
114
+ Алиасы по умолчанию: `d` → `debug`, `l` → `log`, `i` → `info`, `w` → `warn`, `e` → `error`
115
+
116
+ #### Методы логирования
117
+
118
+ | Уровень | Тип |
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
+ #### Работа с данными
138
+
139
+ | Метод | Тип | Комментарий |
140
+ |--------|---------------------------------------------------|---------------------------------------------------------------------------------------|
141
+ | `set` | `(data: DebugWebData) => void` | Сохраняет отладочные данные (объединяет) |
142
+ | `get` | `(api?: boolean) => DebugWebData \| undefined` | Возвращает копию всех данных. Если передать `true` — добавляет вспомогательные методы |
143
+ | `dump` | `(keys: string[], options?: DumpOptions) => void` | Выводит данные в виде таблицы (игнорирует уровни логирования) |
114
144
 
115
- ## Кастомизация стилей 🖌️
116
145
 
117
- ```javascript
118
- import { debugSetStyle } from 'debug-web';
119
-
120
- // Изменить стиль для конкретного уровня
121
- debugSetStyle('info', 'color: purple; font-weight: bold;');
146
+ ```typescript
147
+ type DebugWebData = Record<string, unknown>
122
148
 
123
- // Или изменить несколько уровней сразу
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
- ### Методы логирования
156
+ #### Управление уровнем
130
157
 
131
- Поддерживаются все основные методы `console`:
158
+ | Метод | Тип | Комментарий |
159
+ |------------------|-----------------|--------------------------------------|
160
+ | `level` (getter) | `DebugLogLevel` | Получить текущий уровень логирвоания |
161
+ | `level` (setter) | `DebugLogLevel` | Задать уровень логирвоания |
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
+ #### Стилизация
138
164
 
139
- ### Вспомогательные методы
165
+ | Метод | Тип | Комментарий |
166
+ |------------------|-----------------------------------|------------------------------------------|
167
+ | `style` (getter) | `() => DebugWebStyle` | Получить карту стилей |
168
+ | `style` (setter) | `(styles: DebugWebStyle) => void` | Обновить карту стилей (будет объединена) |
140
169
 
141
- - `debugData` — Добавление отладочных данных (объединяется с существующими);
142
- - `debugSetStyle` — Изменение CSS-стилей для уровней логирования;
143
- - `debugGetStyle` — Получение текущих настроек стилей;
144
- - `debugReset`.
170
+ ```typescript
171
+ type DebugWebStyle = Record<DebugLogLevel, string | undefined>
172
+ ```
145
173
 
146
- ## Расширение функциональности
174
+ ### Отладочные данные
147
175
 
148
- Вы можете создать собственный класс для добавления кастомных методов логирования:
176
+ Сохраняйте любые данные и просматривайте их в консоли:
149
177
 
150
- ```ts
151
- export class CustomDebug extends WebDebug {
152
- static {
153
- // Добавляем новый стиль для кастомного уровня
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
- // Создаём новый метод логирования
158
- static customEvent(...attrs: unknown[]) {
159
- // Проверяем, разрешён ли уровень 'info' (к которому приравниваются кастомные уровни)
160
- if (!CustomDebug.can('info')) return;
182
+ Данные доступны через `window[prop]` (по умолчанию `info`).\
183
+ Введите в консоль браузера:
161
184
 
162
- // Используем внутренний метод для форматирования и вывода
163
- CustomDebug.print('info', 'customEvent', attrs);
164
- }
165
- }
185
+ ```javascript
186
+ info // { error: null, user: {...}, setLevel: f }
187
+ info.setLevel() // изменить уровень логирования
166
188
  ```
167
189
 
168
- ## Поддержка
190
+ ## Поддержка ❤️
169
191
 
170
192
  Если эта библиотека полезна для вас, рассмотрите возможность поддержать её разработку:
171
193