How to Export Browser Console Logs: Quick JS Injection Script

During frontend debugging, end-to-end testing, or integration troubleshooting, you often need to preserve console logs for deeper analysis. Instead of manually copying logs from the DevTools panel or forcing non-technical users to right-click and save them, you can automate the process using a small JavaScript snippet.

This lightweight Immediately Invoked Function Expression (IIFE) hooks into the browser’s standard logging mechanism, stores entries in an isolated array, and injects a fixed “Download” button into the top-right corner of the viewport.

Injection Script

You can execute this code directly inside your browser’s Developer Console, or save it as a Snippet within DevTools for recurring use:

// Intercept logs and inject a download utility action
(function() {
    const logs = [];
    const originalLog = console.log;
    // Overwrite standard console.log to capture outputs
    console.log = function(...args) {
        logs.push(args.join(' '));
        originalLog.apply(console, args);
    };
    // Define the global export mechanism
    window.downloadLogs = function() {
        const blob = new Blob([logs.join('\\n')], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'console_log.txt';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    };
    // Create a fixed high-visibility UI button
    const button = document.createElement('button');
    button.innerText = 'Download Logs';
    button.style.position = 'fixed';
    button.style.top = '10px';
    button.style.right = '10px';
    button.style.zIndex = 10000; // Ensure it stays on top of application layers
    button.style.padding = '10px 20px';
    button.style.backgroundColor = '#2d6dc3'; // Frosted corporate accent blue
    button.style.color = 'white';
    button.style.border = 'none';
    button.style.borderRadius = '6px';
    button.style.cursor = 'pointer';
    button.style.fontFamily = 'sans-serif';
    button.style.fontWeight = '500';
    button.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
    // Attach operational click handler
    button.addEventListener('click', () => {
        if (typeof window.downloadLogs === 'function') {
            window.downloadLogs();
        } else {
            alert('Log download function reference not found.');
        }
    });
    document.body.appendChild(button);
})();

Core Operations

• Method Monkey-Patching: It intercepts the native console.log method, duplicating every string representation into a runtime array (logs) while cleanly forwarding arguments via .apply() to preserve normal DevTools behavior.
• Memory Management: The download logic relies on generating a local object URL from a data Blob. It instantly clears the node allocation using URL.revokeObjectURL right after trigger to keep execution leak-free.
• Z-Index Layering: The button appends directly to the active body root using a high stack weight (zIndex = 10000), forcing it to display securely above modal popups, panels, or absolute layout containers.