Mini DevTools Console

Console mô phỏng DevTools
줄 바꿈
// ==UserScript==
// @name         Mini DevTools Console
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Console mô phỏng DevTools
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const consoleBox = document.createElement('div');
    consoleBox.innerHTML = `
        <div id="tm-header">
            Mini Console
            <button id="tm-close">×</button>
        </div>
        <div id="tm-output"></div>
        <textarea id="tm-input" placeholder="Nhập JavaScript..."></textarea>
        <button id="tm-run">Run</button>
    `;

    Object.assign(consoleBox.style, {
        position: 'fixed',
        top: '20px',
        right: '20px',
        width: '500px',
        height: '350px',
        background: '#1e1e1e',
        color: '#fff',
        zIndex: '999999',
        border: '1px solid #555',
        fontFamily: 'monospace',
        display: 'flex',
        flexDirection: 'column'
    });

    document.body.appendChild(consoleBox);

    const output = consoleBox.querySelector('#tm-output');
    const input = consoleBox.querySelector('#tm-input');

    Object.assign(output.style, {
        flex: '1',
        overflow: 'auto',
        padding: '5px',
        borderBottom: '1px solid #444'
    });

    Object.assign(input.style, {
        height: '80px',
        background: '#252526',
        color: '#fff',
        border: 'none',
        resize: 'none'
    });

    function log(text, color = '#fff') {
        const div = document.createElement('div');
        div.style.color = color;
        div.textContent = text;
        output.appendChild(div);
        output.scrollTop = output.scrollHeight;
    }

    const originalLog = console.log;
    console.log = (...args) => {
        originalLog(...args);
        log(args.map(a =>
            typeof a === 'object'
                ? JSON.stringify(a, null, 2)
                : String(a)
        ).join(' '), '#4fc3f7');
    };

    document.getElementById('tm-run').onclick = () => {
        const code = input.value;

        try {
            const result = eval(code);
            log('> ' + String(result), '#90ee90');
        } catch (e) {
            log('Error: ' + e.message, '#ff6b6b');
        }
    };

    document.getElementById('tm-close').onclick = () => {
        consoleBox.remove();
    };

    input.addEventListener('keydown', e => {
        if (e.ctrlKey && e.key === 'Enter') {
            document.getElementById('tm-run').click();
        }
    });

})();