65 lines
1.4 KiB
Vue
65 lines
1.4 KiB
Vue
<template>
|
|
<div class="debug-console">
|
|
<div v-for="(entry, idx) in logs" :key="idx" :class="['log-entry', entry.type]">
|
|
[{{ entry.type }}] {{ entry.message }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
|
|
|
const logs = ref([]);
|
|
|
|
function stringify(args) {
|
|
return args.map(arg => {
|
|
if (typeof arg === 'object') {
|
|
try { return JSON.stringify(arg); } catch { return String(arg); }
|
|
}
|
|
return String(arg);
|
|
}).join(' ');
|
|
}
|
|
|
|
let original = {};
|
|
|
|
onMounted(() => {
|
|
['log', 'warn', 'error', 'info'].forEach(type => {
|
|
// Save the original method
|
|
original[type] = console[type];
|
|
console[type] = function(...args) {
|
|
logs.value.push({
|
|
type,
|
|
message: stringify(args)
|
|
});
|
|
// Optionally limit log length:
|
|
if (logs.value.length > 200) logs.value.shift();
|
|
original[type].apply(console, args);
|
|
};
|
|
});
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
// Restore the original methods
|
|
Object.keys(original).forEach(type => {
|
|
if (original[type]) console[type] = original[type];
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.debug-console {
|
|
background: #1a1a1a;
|
|
color: #0f0;
|
|
font-family: monospace;
|
|
font-size: 14px;
|
|
padding: 10px;
|
|
max-height: 260px;
|
|
overflow-y: auto;
|
|
border-radius: 5px;
|
|
margin: 8px 0;
|
|
}
|
|
.log-entry { margin-bottom: 2px; }
|
|
.log-entry.warn { color: #ff0; }
|
|
.log-entry.error { color: #f55; }
|
|
.log-entry.info { color: #0cf; }
|
|
</style> |