@mks2508/better-logger 0.0.1
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.
- package/.claude/settings.local.json +13 -0
- package/CLAUDE.md +113 -0
- package/dist/assets/index-DxvJByYN.js +183 -0
- package/dist/index.html +334 -0
- package/dist/vite.svg +1 -0
- package/index.html +334 -0
- package/package.json +35 -0
- package/public/vite.svg +1 -0
- package/src/Logger.ts +577 -0
- package/src/Logger.ts.backup +1684 -0
- package/src/cli/CommandProcessor.ts +77 -0
- package/src/cli/commands/ConfigCommand.ts +93 -0
- package/src/cli/commands/ExportCommand.ts +271 -0
- package/src/cli/commands/StatusCommand.ts +111 -0
- package/src/cli/commands/ThemeCommand.ts +88 -0
- package/src/cli/help.ts +127 -0
- package/src/cli/index.ts +59 -0
- package/src/constants.ts +89 -0
- package/src/example.ts +88 -0
- package/src/handlers/AnalyticsLogHandler.ts +22 -0
- package/src/handlers/ExportLogHandler.ts +447 -0
- package/src/handlers/FileLogHandler.ts +30 -0
- package/src/handlers/RemoteLogHandler.ts +42 -0
- package/src/handlers/index.ts +8 -0
- package/src/index.ts +122 -0
- package/src/main.ts +126 -0
- package/src/style.css +96 -0
- package/src/styling/StyleBuilder.ts +305 -0
- package/src/styling/banners.ts +168 -0
- package/src/styling/index.ts +12 -0
- package/src/styling/themes.ts +235 -0
- package/src/types/core.ts +80 -0
- package/src/types/handlers.ts +95 -0
- package/src/types/index.ts +29 -0
- package/src/typescript.svg +1 -0
- package/src/utils/index.ts +18 -0
- package/src/utils/output.ts +127 -0
- package/src/utils/stackTrace.ts +66 -0
- package/src/utils/timestamps.ts +80 -0
- package/src/vite-env.d.ts +1 -0
- package/tsconfig.json +24 -0
package/dist/index.html
ADDED
|
@@ -0,0 +1,334 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Advanced Logger Test Page - 2025</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
16
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
17
|
+
min-height: 100vh;
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
justify-content: center;
|
|
21
|
+
padding: 20px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.container {
|
|
25
|
+
background: rgba(255, 255, 255, 0.95);
|
|
26
|
+
backdrop-filter: blur(10px);
|
|
27
|
+
border-radius: 20px;
|
|
28
|
+
padding: 40px;
|
|
29
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
30
|
+
max-width: 800px;
|
|
31
|
+
width: 100%;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.header {
|
|
35
|
+
text-align: center;
|
|
36
|
+
margin-bottom: 40px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.header h1 {
|
|
40
|
+
font-size: 2.5rem;
|
|
41
|
+
font-weight: 700;
|
|
42
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
43
|
+
-webkit-background-clip: text;
|
|
44
|
+
-webkit-text-fill-color: transparent;
|
|
45
|
+
background-clip: text;
|
|
46
|
+
margin-bottom: 10px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.header p {
|
|
50
|
+
color: #6b7280;
|
|
51
|
+
font-size: 1.1rem;
|
|
52
|
+
margin-bottom: 20px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.console-note {
|
|
56
|
+
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
|
57
|
+
border: 1px solid #f59e0b;
|
|
58
|
+
border-radius: 12px;
|
|
59
|
+
padding: 15px;
|
|
60
|
+
margin-bottom: 30px;
|
|
61
|
+
text-align: center;
|
|
62
|
+
color: #92400e;
|
|
63
|
+
font-weight: 500;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.devtools-button {
|
|
67
|
+
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
|
68
|
+
border: none;
|
|
69
|
+
border-radius: 8px;
|
|
70
|
+
color: white;
|
|
71
|
+
padding: 8px 16px;
|
|
72
|
+
margin-top: 10px;
|
|
73
|
+
font-size: 12px;
|
|
74
|
+
font-weight: 600;
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
transition: all 0.2s ease;
|
|
77
|
+
display: inline-block;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.devtools-button:hover {
|
|
81
|
+
background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
|
|
82
|
+
transform: translateY(-1px);
|
|
83
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.button-grid {
|
|
87
|
+
display: grid;
|
|
88
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
89
|
+
gap: 15px;
|
|
90
|
+
margin-bottom: 30px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.log-button {
|
|
94
|
+
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
95
|
+
border: 2px solid #e2e8f0;
|
|
96
|
+
border-radius: 12px;
|
|
97
|
+
padding: 15px 20px;
|
|
98
|
+
font-size: 14px;
|
|
99
|
+
font-weight: 600;
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
transition: all 0.3s ease;
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
gap: 8px;
|
|
106
|
+
min-height: 60px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.log-button:hover {
|
|
110
|
+
transform: translateY(-2px);
|
|
111
|
+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.log-button.debug {
|
|
115
|
+
border-color: #667eea;
|
|
116
|
+
color: #667eea;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.log-button.debug:hover {
|
|
120
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
121
|
+
color: white;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.log-button.info {
|
|
125
|
+
border-color: #74b9ff;
|
|
126
|
+
color: #74b9ff;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.log-button.info:hover {
|
|
130
|
+
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
|
|
131
|
+
color: white;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.log-button.warn {
|
|
135
|
+
border-color: #fdcb6e;
|
|
136
|
+
color: #e17055;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.log-button.warn:hover {
|
|
140
|
+
background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
|
|
141
|
+
color: white;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.log-button.error {
|
|
145
|
+
border-color: #e84393;
|
|
146
|
+
color: #e84393;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.log-button.error:hover {
|
|
150
|
+
background: linear-gradient(135deg, #e84393 0%, #d63031 100%);
|
|
151
|
+
color: white;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.log-button.success {
|
|
155
|
+
border-color: #00b894;
|
|
156
|
+
color: #00b894;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.log-button.success:hover {
|
|
160
|
+
background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
|
|
161
|
+
color: white;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.log-button.critical {
|
|
165
|
+
border-color: #ff3838;
|
|
166
|
+
color: #ff3838;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.log-button.critical:hover {
|
|
170
|
+
background: linear-gradient(135deg, #ff3838 0%, #ff1744 100%);
|
|
171
|
+
color: white;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.advanced-section {
|
|
175
|
+
border-top: 2px solid #e2e8f0;
|
|
176
|
+
padding-top: 30px;
|
|
177
|
+
margin-top: 30px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.advanced-section h2 {
|
|
181
|
+
color: #374151;
|
|
182
|
+
margin-bottom: 20px;
|
|
183
|
+
font-size: 1.5rem;
|
|
184
|
+
text-align: center;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.footer {
|
|
188
|
+
text-align: center;
|
|
189
|
+
margin-top: 40px;
|
|
190
|
+
color: #6b7280;
|
|
191
|
+
font-size: 0.9rem;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
@media (max-width: 640px) {
|
|
195
|
+
.container {
|
|
196
|
+
padding: 20px;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.header h1 {
|
|
200
|
+
font-size: 2rem;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.button-grid {
|
|
204
|
+
grid-template-columns: 1fr;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
</style>
|
|
208
|
+
<script type="module" crossorigin src="/assets/index-DxvJByYN.js"></script>
|
|
209
|
+
</head>
|
|
210
|
+
<body>
|
|
211
|
+
<div class="container">
|
|
212
|
+
<header class="header">
|
|
213
|
+
<h1>đ Advanced Logger Test</h1>
|
|
214
|
+
<p>State-of-the-art console logging with advanced styling</p>
|
|
215
|
+
<div class="console-note">
|
|
216
|
+
đ Open your browser's Developer Console to see the styled log output
|
|
217
|
+
<button class="devtools-button" id="devtools-btn" onclick="tryOpenDevTools()">
|
|
218
|
+
đ§ Press F12 to Open DevTools
|
|
219
|
+
</button>
|
|
220
|
+
<div id="devtools-status" style="margin-top: 8px; font-size: 12px; display: none;">
|
|
221
|
+
â
DevTools detected! Check the Console tab
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
</header>
|
|
225
|
+
|
|
226
|
+
<main>
|
|
227
|
+
<section class="button-grid">
|
|
228
|
+
<button class="log-button debug" onclick="testDebug()">
|
|
229
|
+
đ Debug Log
|
|
230
|
+
</button>
|
|
231
|
+
<button class="log-button info" onclick="testInfo()">
|
|
232
|
+
âšī¸ Info Log
|
|
233
|
+
</button>
|
|
234
|
+
<button class="log-button warn" onclick="testWarn()">
|
|
235
|
+
â ī¸ Warning Log
|
|
236
|
+
</button>
|
|
237
|
+
<button class="log-button error" onclick="testError()">
|
|
238
|
+
â Error Log
|
|
239
|
+
</button>
|
|
240
|
+
<button class="log-button success" onclick="testSuccess()">
|
|
241
|
+
â
Success Log
|
|
242
|
+
</button>
|
|
243
|
+
<button class="log-button critical" onclick="testCritical()">
|
|
244
|
+
đĨ Critical Log
|
|
245
|
+
</button>
|
|
246
|
+
</section>
|
|
247
|
+
|
|
248
|
+
<section class="advanced-section">
|
|
249
|
+
<h2>Advanced Features</h2>
|
|
250
|
+
<div class="button-grid">
|
|
251
|
+
<button class="log-button info" onclick="testTable()">
|
|
252
|
+
đ Table Display
|
|
253
|
+
</button>
|
|
254
|
+
<button class="log-button debug" onclick="testGrouping()">
|
|
255
|
+
đ Grouped Logs
|
|
256
|
+
</button>
|
|
257
|
+
<button class="log-button warn" onclick="testTiming()">
|
|
258
|
+
âąī¸ Performance Timer
|
|
259
|
+
</button>
|
|
260
|
+
<button class="log-button info" onclick="testScopedLogger()">
|
|
261
|
+
đ¯ Scoped Logger
|
|
262
|
+
</button>
|
|
263
|
+
<button class="log-button debug" onclick="testTrace()">
|
|
264
|
+
đ Stack Trace
|
|
265
|
+
</button>
|
|
266
|
+
<button class="log-button success" onclick="testAllFeatures()">
|
|
267
|
+
đ Demo All Features
|
|
268
|
+
</button>
|
|
269
|
+
</div>
|
|
270
|
+
</section>
|
|
271
|
+
</main>
|
|
272
|
+
|
|
273
|
+
<footer class="footer">
|
|
274
|
+
<p>Advanced Logger v2.0.0 | Built with TypeScript & Modern Web Standards</p>
|
|
275
|
+
</footer>
|
|
276
|
+
</div>
|
|
277
|
+
<script>
|
|
278
|
+
let devToolsOpen = false;
|
|
279
|
+
|
|
280
|
+
function detectDevTools() {
|
|
281
|
+
const threshold = 160;
|
|
282
|
+
const widthThreshold = window.outerWidth - window.innerWidth > threshold;
|
|
283
|
+
const heightThreshold = window.outerHeight - window.innerHeight > threshold;
|
|
284
|
+
|
|
285
|
+
return widthThreshold || heightThreshold;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
function updateDevToolsStatus() {
|
|
289
|
+
const isOpen = detectDevTools();
|
|
290
|
+
const btn = document.getElementById('devtools-btn');
|
|
291
|
+
const status = document.getElementById('devtools-status');
|
|
292
|
+
|
|
293
|
+
if (isOpen && !devToolsOpen) {
|
|
294
|
+
devToolsOpen = true;
|
|
295
|
+
btn.textContent = 'â
DevTools Open - Check Console!';
|
|
296
|
+
btn.style.background = 'linear-gradient(135deg, #00b894 0%, #00a085 100%)';
|
|
297
|
+
status.style.display = 'block';
|
|
298
|
+
|
|
299
|
+
// Welcome message when devtools opens
|
|
300
|
+
console.log('%cđ DevTools Detected! Welcome to Advanced Logger Demo',
|
|
301
|
+
'background: linear-gradient(135deg, #00b894 0%, #00a085 100%); color: white; padding: 12px 20px; border-radius: 8px; font-weight: bold; font-size: 14px;');
|
|
302
|
+
} else if (!isOpen && devToolsOpen) {
|
|
303
|
+
devToolsOpen = false;
|
|
304
|
+
btn.textContent = 'đ§ Press F12 to Open DevTools';
|
|
305
|
+
btn.style.background = 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)';
|
|
306
|
+
status.style.display = 'none';
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
function tryOpenDevTools() {
|
|
311
|
+
if (!devToolsOpen) {
|
|
312
|
+
// Simulate F12 keypress (doesn't actually open devtools, but is educational)
|
|
313
|
+
console.log('%cđĄ Tip: Press F12 or right-click â Inspect Element to open DevTools!',
|
|
314
|
+
'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 10px 15px; border-radius: 5px; font-weight: bold;');
|
|
315
|
+
|
|
316
|
+
// Show platform-specific shortcuts
|
|
317
|
+
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
|
|
318
|
+
const shortcut = isMac ? 'Cmd+Option+I' : 'F12 or Ctrl+Shift+I';
|
|
319
|
+
|
|
320
|
+
alert(`đ§ DevTools Shortcut:\n\n${shortcut}\n\nOnce open, check the Console tab to see styled logs!`);
|
|
321
|
+
} else {
|
|
322
|
+
console.log('%cđ DevTools already open! Check this console for styled logs!',
|
|
323
|
+
'background: linear-gradient(135deg, #00b894 0%, #00a085 100%); color: white; padding: 10px 15px; border-radius: 5px; font-weight: bold;');
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
// Check devtools status every 500ms
|
|
328
|
+
setInterval(updateDevToolsStatus, 500);
|
|
329
|
+
|
|
330
|
+
// Initial check
|
|
331
|
+
setTimeout(updateDevToolsStatus, 100);
|
|
332
|
+
</script>
|
|
333
|
+
</body>
|
|
334
|
+
</html>
|
package/dist/vite.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
package/index.html
ADDED
|
@@ -0,0 +1,334 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Advanced Logger Test Page - 2025</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
16
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
17
|
+
min-height: 100vh;
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
justify-content: center;
|
|
21
|
+
padding: 20px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.container {
|
|
25
|
+
background: rgba(255, 255, 255, 0.95);
|
|
26
|
+
backdrop-filter: blur(10px);
|
|
27
|
+
border-radius: 20px;
|
|
28
|
+
padding: 40px;
|
|
29
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
30
|
+
max-width: 800px;
|
|
31
|
+
width: 100%;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.header {
|
|
35
|
+
text-align: center;
|
|
36
|
+
margin-bottom: 40px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.header h1 {
|
|
40
|
+
font-size: 2.5rem;
|
|
41
|
+
font-weight: 700;
|
|
42
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
43
|
+
-webkit-background-clip: text;
|
|
44
|
+
-webkit-text-fill-color: transparent;
|
|
45
|
+
background-clip: text;
|
|
46
|
+
margin-bottom: 10px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.header p {
|
|
50
|
+
color: #6b7280;
|
|
51
|
+
font-size: 1.1rem;
|
|
52
|
+
margin-bottom: 20px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.console-note {
|
|
56
|
+
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
|
57
|
+
border: 1px solid #f59e0b;
|
|
58
|
+
border-radius: 12px;
|
|
59
|
+
padding: 15px;
|
|
60
|
+
margin-bottom: 30px;
|
|
61
|
+
text-align: center;
|
|
62
|
+
color: #92400e;
|
|
63
|
+
font-weight: 500;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.devtools-button {
|
|
67
|
+
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
|
68
|
+
border: none;
|
|
69
|
+
border-radius: 8px;
|
|
70
|
+
color: white;
|
|
71
|
+
padding: 8px 16px;
|
|
72
|
+
margin-top: 10px;
|
|
73
|
+
font-size: 12px;
|
|
74
|
+
font-weight: 600;
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
transition: all 0.2s ease;
|
|
77
|
+
display: inline-block;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.devtools-button:hover {
|
|
81
|
+
background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
|
|
82
|
+
transform: translateY(-1px);
|
|
83
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.button-grid {
|
|
87
|
+
display: grid;
|
|
88
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
89
|
+
gap: 15px;
|
|
90
|
+
margin-bottom: 30px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.log-button {
|
|
94
|
+
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
95
|
+
border: 2px solid #e2e8f0;
|
|
96
|
+
border-radius: 12px;
|
|
97
|
+
padding: 15px 20px;
|
|
98
|
+
font-size: 14px;
|
|
99
|
+
font-weight: 600;
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
transition: all 0.3s ease;
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
gap: 8px;
|
|
106
|
+
min-height: 60px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.log-button:hover {
|
|
110
|
+
transform: translateY(-2px);
|
|
111
|
+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.log-button.debug {
|
|
115
|
+
border-color: #667eea;
|
|
116
|
+
color: #667eea;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.log-button.debug:hover {
|
|
120
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
121
|
+
color: white;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.log-button.info {
|
|
125
|
+
border-color: #74b9ff;
|
|
126
|
+
color: #74b9ff;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.log-button.info:hover {
|
|
130
|
+
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
|
|
131
|
+
color: white;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.log-button.warn {
|
|
135
|
+
border-color: #fdcb6e;
|
|
136
|
+
color: #e17055;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.log-button.warn:hover {
|
|
140
|
+
background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
|
|
141
|
+
color: white;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.log-button.error {
|
|
145
|
+
border-color: #e84393;
|
|
146
|
+
color: #e84393;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.log-button.error:hover {
|
|
150
|
+
background: linear-gradient(135deg, #e84393 0%, #d63031 100%);
|
|
151
|
+
color: white;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.log-button.success {
|
|
155
|
+
border-color: #00b894;
|
|
156
|
+
color: #00b894;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.log-button.success:hover {
|
|
160
|
+
background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
|
|
161
|
+
color: white;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.log-button.critical {
|
|
165
|
+
border-color: #ff3838;
|
|
166
|
+
color: #ff3838;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.log-button.critical:hover {
|
|
170
|
+
background: linear-gradient(135deg, #ff3838 0%, #ff1744 100%);
|
|
171
|
+
color: white;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.advanced-section {
|
|
175
|
+
border-top: 2px solid #e2e8f0;
|
|
176
|
+
padding-top: 30px;
|
|
177
|
+
margin-top: 30px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.advanced-section h2 {
|
|
181
|
+
color: #374151;
|
|
182
|
+
margin-bottom: 20px;
|
|
183
|
+
font-size: 1.5rem;
|
|
184
|
+
text-align: center;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.footer {
|
|
188
|
+
text-align: center;
|
|
189
|
+
margin-top: 40px;
|
|
190
|
+
color: #6b7280;
|
|
191
|
+
font-size: 0.9rem;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
@media (max-width: 640px) {
|
|
195
|
+
.container {
|
|
196
|
+
padding: 20px;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.header h1 {
|
|
200
|
+
font-size: 2rem;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.button-grid {
|
|
204
|
+
grid-template-columns: 1fr;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
</style>
|
|
208
|
+
</head>
|
|
209
|
+
<body>
|
|
210
|
+
<div class="container">
|
|
211
|
+
<header class="header">
|
|
212
|
+
<h1>đ Advanced Logger Test</h1>
|
|
213
|
+
<p>State-of-the-art console logging with advanced styling</p>
|
|
214
|
+
<div class="console-note">
|
|
215
|
+
đ Open your browser's Developer Console to see the styled log output
|
|
216
|
+
<button class="devtools-button" id="devtools-btn" onclick="tryOpenDevTools()">
|
|
217
|
+
đ§ Press F12 to Open DevTools
|
|
218
|
+
</button>
|
|
219
|
+
<div id="devtools-status" style="margin-top: 8px; font-size: 12px; display: none;">
|
|
220
|
+
â
DevTools detected! Check the Console tab
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
</header>
|
|
224
|
+
|
|
225
|
+
<main>
|
|
226
|
+
<section class="button-grid">
|
|
227
|
+
<button class="log-button debug" onclick="testDebug()">
|
|
228
|
+
đ Debug Log
|
|
229
|
+
</button>
|
|
230
|
+
<button class="log-button info" onclick="testInfo()">
|
|
231
|
+
âšī¸ Info Log
|
|
232
|
+
</button>
|
|
233
|
+
<button class="log-button warn" onclick="testWarn()">
|
|
234
|
+
â ī¸ Warning Log
|
|
235
|
+
</button>
|
|
236
|
+
<button class="log-button error" onclick="testError()">
|
|
237
|
+
â Error Log
|
|
238
|
+
</button>
|
|
239
|
+
<button class="log-button success" onclick="testSuccess()">
|
|
240
|
+
â
Success Log
|
|
241
|
+
</button>
|
|
242
|
+
<button class="log-button critical" onclick="testCritical()">
|
|
243
|
+
đĨ Critical Log
|
|
244
|
+
</button>
|
|
245
|
+
</section>
|
|
246
|
+
|
|
247
|
+
<section class="advanced-section">
|
|
248
|
+
<h2>Advanced Features</h2>
|
|
249
|
+
<div class="button-grid">
|
|
250
|
+
<button class="log-button info" onclick="testTable()">
|
|
251
|
+
đ Table Display
|
|
252
|
+
</button>
|
|
253
|
+
<button class="log-button debug" onclick="testGrouping()">
|
|
254
|
+
đ Grouped Logs
|
|
255
|
+
</button>
|
|
256
|
+
<button class="log-button warn" onclick="testTiming()">
|
|
257
|
+
âąī¸ Performance Timer
|
|
258
|
+
</button>
|
|
259
|
+
<button class="log-button info" onclick="testScopedLogger()">
|
|
260
|
+
đ¯ Scoped Logger
|
|
261
|
+
</button>
|
|
262
|
+
<button class="log-button debug" onclick="testTrace()">
|
|
263
|
+
đ Stack Trace
|
|
264
|
+
</button>
|
|
265
|
+
<button class="log-button success" onclick="testAllFeatures()">
|
|
266
|
+
đ Demo All Features
|
|
267
|
+
</button>
|
|
268
|
+
</div>
|
|
269
|
+
</section>
|
|
270
|
+
</main>
|
|
271
|
+
|
|
272
|
+
<footer class="footer">
|
|
273
|
+
<p>Advanced Logger v2.0.0 | Built with TypeScript & Modern Web Standards</p>
|
|
274
|
+
</footer>
|
|
275
|
+
</div>
|
|
276
|
+
<script>
|
|
277
|
+
let devToolsOpen = false;
|
|
278
|
+
|
|
279
|
+
function detectDevTools() {
|
|
280
|
+
const threshold = 160;
|
|
281
|
+
const widthThreshold = window.outerWidth - window.innerWidth > threshold;
|
|
282
|
+
const heightThreshold = window.outerHeight - window.innerHeight > threshold;
|
|
283
|
+
|
|
284
|
+
return widthThreshold || heightThreshold;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
function updateDevToolsStatus() {
|
|
288
|
+
const isOpen = detectDevTools();
|
|
289
|
+
const btn = document.getElementById('devtools-btn');
|
|
290
|
+
const status = document.getElementById('devtools-status');
|
|
291
|
+
|
|
292
|
+
if (isOpen && !devToolsOpen) {
|
|
293
|
+
devToolsOpen = true;
|
|
294
|
+
btn.textContent = 'â
DevTools Open - Check Console!';
|
|
295
|
+
btn.style.background = 'linear-gradient(135deg, #00b894 0%, #00a085 100%)';
|
|
296
|
+
status.style.display = 'block';
|
|
297
|
+
|
|
298
|
+
// Welcome message when devtools opens
|
|
299
|
+
console.log('%cđ DevTools Detected! Welcome to Advanced Logger Demo',
|
|
300
|
+
'background: linear-gradient(135deg, #00b894 0%, #00a085 100%); color: white; padding: 12px 20px; border-radius: 8px; font-weight: bold; font-size: 14px;');
|
|
301
|
+
} else if (!isOpen && devToolsOpen) {
|
|
302
|
+
devToolsOpen = false;
|
|
303
|
+
btn.textContent = 'đ§ Press F12 to Open DevTools';
|
|
304
|
+
btn.style.background = 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)';
|
|
305
|
+
status.style.display = 'none';
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
function tryOpenDevTools() {
|
|
310
|
+
if (!devToolsOpen) {
|
|
311
|
+
// Simulate F12 keypress (doesn't actually open devtools, but is educational)
|
|
312
|
+
console.log('%cđĄ Tip: Press F12 or right-click â Inspect Element to open DevTools!',
|
|
313
|
+
'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 10px 15px; border-radius: 5px; font-weight: bold;');
|
|
314
|
+
|
|
315
|
+
// Show platform-specific shortcuts
|
|
316
|
+
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
|
|
317
|
+
const shortcut = isMac ? 'Cmd+Option+I' : 'F12 or Ctrl+Shift+I';
|
|
318
|
+
|
|
319
|
+
alert(`đ§ DevTools Shortcut:\n\n${shortcut}\n\nOnce open, check the Console tab to see styled logs!`);
|
|
320
|
+
} else {
|
|
321
|
+
console.log('%cđ DevTools already open! Check this console for styled logs!',
|
|
322
|
+
'background: linear-gradient(135deg, #00b894 0%, #00a085 100%); color: white; padding: 10px 15px; border-radius: 5px; font-weight: bold;');
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
// Check devtools status every 500ms
|
|
327
|
+
setInterval(updateDevToolsStatus, 500);
|
|
328
|
+
|
|
329
|
+
// Initial check
|
|
330
|
+
setTimeout(updateDevToolsStatus, 100);
|
|
331
|
+
</script>
|
|
332
|
+
<script type="module" src="./src/main.ts"></script>
|
|
333
|
+
</body>
|
|
334
|
+
</html>
|