Persistent Console Logger

记录所有 console.log 即使控制台被清除也能查看

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

You will need to install an extension such as Tampermonkey to install this script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==UserScript==
// @name         Persistent Console Logger
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  记录所有 console.log 即使控制台被清除也能查看
// @author       Your Name
// @match        *://*/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // 创建一个存储日志的数组
    const logStorage = [];

    // 保存原始的 console.log 和 console.clear 方法
    const originalLog = console.log;
    const originalClear = console.clear;

    // 重写 console.log 方法
    console.log = function(...args) {
        // 将日志存储到 logStorage 数组
        logStorage.push({
            type: 'log',
            args: args,
            timestamp: new Date()
        });

        // 调用原始的 console.log 方法
        originalLog.apply(console, args);
    };

    // 重写 console.warn 方法
    console.warn = function(...args) {
        logStorage.push({
            type: 'warn',
            args: args,
            timestamp: new Date()
        });
        originalLog.apply(console, args);
    };

    // 重写 console.error 方法
    console.error = function(...args) {
        logStorage.push({
            type: 'error',
            args: args,
            timestamp: new Date()
        });
        originalLog.apply(console, args);
    };

    // 重写 console.clear 方法
    console.clear = function() {
        // 可以选择不清除 logStorage,或根据需要清除
        // 这里选择不清除,确保日志仍然被记录

        // 调用原始的 console.clear 方法
        originalClear.apply(console);
    };

    // 创建一个界面按钮来查看存储的日志
    const createLogViewer = () => {
        // 创建按钮
        const button = document.createElement('button');
        button.innerText = '查看持久化日志';
        button.style.position = 'fixed';
        button.style.bottom = '20px';
        button.style.right = '20px';
        button.style.padding = '10px 20px';
        button.style.zIndex = 10000;
        button.style.backgroundColor = '#4CAF50';
        button.style.color = 'white';
        button.style.border = 'none';
        button.style.borderRadius = '5px';
        button.style.cursor = 'pointer';
        button.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
        button.title = '点击查看持久化的 console.log 日志';

        // 创建日志查看窗口
        const logWindow = document.createElement('div');
        logWindow.style.position = 'fixed';
        logWindow.style.top = '50px';
        logWindow.style.right = '20px';
        logWindow.style.width = '400px';
        logWindow.style.height = '300px';
        logWindow.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        logWindow.style.color = 'white';
        logWindow.style.padding = '10px';
        logWindow.style.borderRadius = '5px';
        logWindow.style.overflowY = 'scroll';
        logWindow.style.display = 'none';
        logWindow.style.zIndex = 10000;
        logWindow.style.fontFamily = 'monospace';
        logWindow.style.fontSize = '12px';

        // 创建关闭按钮
        const closeButton = document.createElement('button');
        closeButton.innerText = '关闭';
        closeButton.style.position = 'absolute';
        closeButton.style.top = '10px';
        closeButton.style.right = '10px';
        closeButton.style.padding = '5px 10px';
        closeButton.style.backgroundColor = '#f44336';
        closeButton.style.color = 'white';
        closeButton.style.border = 'none';
        closeButton.style.borderRadius = '3px';
        closeButton.style.cursor = 'pointer';

        // 添加事件监听器
        button.addEventListener('click', () => {
            logWindow.style.display = 'block';
            renderLogs();
        });

        closeButton.addEventListener('click', () => {
            logWindow.style.display = 'none';
        });

        // 添加内容到 logWindow
        logWindow.appendChild(closeButton);

        // 创建日志内容容器
        const logContent = document.createElement('div');
        logContent.style.marginTop = '40px';
        logWindow.appendChild(logContent);

        // 渲染日志内容
        const renderLogs = () => {
            logContent.innerHTML = ''; // 清空之前的内容
            logStorage.forEach(entry => {
                const logEntry = document.createElement('div');
                logEntry.style.marginBottom = '5px';
                logEntry.style.padding = '5px';
                logEntry.style.borderBottom = '1px solid #555';

                const time = entry.timestamp.toLocaleTimeString();
                const type = entry.type.toUpperCase();
                const args = entry.args.map(arg => {
                    if (typeof arg === 'object') {
                        try {
                            return JSON.stringify(arg);
                        } catch (e) {
                            return '[Object]';
                        }
                    }
                    return arg.toString();
                }).join(' ');

                logEntry.innerHTML = `<strong>[${time}] ${type}:</strong> ${args}`;
                logContent.appendChild(logEntry);
            });
        };

        // 自动刷新日志内容
        setInterval(renderLogs, 1000);

        // 将按钮和日志窗口添加到页面
        document.body.appendChild(button);
        document.body.appendChild(logWindow);
    };

    // 延迟创建界面,确保页面加载完成
    window.addEventListener('load', createLogViewer);

    // 可选:将日志存储到本地存储,以便刷新页面后仍能保留
    const saveLogsToLocalStorage = () => {
        window.addEventListener('beforeunload', () => {
            localStorage.setItem('persistentLogs', JSON.stringify(logStorage));
        });

        // 读取本地存储的日志
        const savedLogs = localStorage.getItem('persistentLogs');
        if (savedLogs) {
            try {
                const parsedLogs = JSON.parse(savedLogs);
                // 将字符串的 timestamp 转回 Date 对象
                parsedLogs.forEach(log => {
                    if (log.timestamp) {
                        log.timestamp = new Date(log.timestamp);
                    }
                });
                logStorage.push(...parsedLogs);
                localStorage.removeItem('persistentLogs');
            } catch (e) {
                console.error('Failed to parse saved logs:', e);
            }
        }
    };

    saveLogsToLocalStorage();

})();