feat(logging): enhance log visualization with level-specific colors
- Add CSS classes for log levels (info, debug, error, trace, warn) in main.js to color-code log messages based on their severity. - Modify log.html to include the log level as a class in each log entry's table row for applying the corresponding color styles.
This commit is contained in:
+1
-1
@@ -89,7 +89,7 @@
|
|||||||
const msg = Object.keys(line).reduce((msg, key) => {
|
const msg = Object.keys(line).reduce((msg, key) => {
|
||||||
return KEYS.indexOf(key) < 0 ? `${msg} ${key}=${line[key]}` : msg;
|
return KEYS.indexOf(key) < 0 ? `${msg} ${key}=${line[key]}` : msg;
|
||||||
}, line['message']);
|
}, line['message']);
|
||||||
return `<tr><td>${ts.toLocaleString()}</td><td>${line['level']}</td><td>${escapeHTML(msg)}</td></tr>`;
|
return `<tr class="${line['level']}"><td>${ts.toLocaleString()}</td><td>${escapeHTML(line['level'])}</td><td>${escapeHTML(msg)}</td></tr>`;
|
||||||
}).join('');
|
}).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -131,6 +131,13 @@ body.dark-mode textarea::placeholder {
|
|||||||
body.dark-mode hr {
|
body.dark-mode hr {
|
||||||
border-top: 1px solid #444;
|
border-top: 1px solid #444;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info { color: #0174DF; }
|
||||||
|
.debug { color: #808080; }
|
||||||
|
.error { color: #DF0101; }
|
||||||
|
.trace { color: #585858; }
|
||||||
|
.warn { color: #FF9966; }
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
|
|||||||
Reference in New Issue
Block a user