自定义console

前端菜菜
已于 2024-06-21 10:10:27 修改
阅读量702
点赞数 19
文章标签： javascript 前端 vue.js
于 2024-06-21 10:09:30 首次发布
本文链接：https://blog.csdn.net/qq_25919495/article/details/139853629
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
</style>

<body>
    <img src="./Snipaste_2024-06-20_14-46-12.png" alt="">
    <script>
        (function name(window) {
            // ANSI 转义码定义颜色
            const COLORS = {
                reset: "\x1b[0m",
                bright: "\x1b[1m",
                fgRed: "\x1b[31m",
                fgGreen: "\x1b[32m",
                fgYellow: "\x1b[33m",
                fgBlue: "\x1b[34m",
                fgMagenta: "\x1b[35m",
                fgCyan: "\x1b[36m",
                fgWhite: "\x1b[37m",
                bgRed: "\x1b[41m",
                bgGreen: "\x1b[42m",
                bgYellow: "\x1b[43m",
                bgBlue: "\x1b[44m",
                bgMagenta: "\x1b[45m",
                bgCyan: "\x1b[46m",
                bgWhite: "\x1b[47m"
            }


            const _console = window.console

            // 封装公共函数
            const commFn = function (type, color) {
                const callback = console[type] || console['log']
                // const callback = console['log']
                return function (...arg) {
                    arg.unshift(type)
                    let content = arg.reduce((acc, val) => acc + `%c ${val} `, '') // 内容
                    let bg = arg.map((val, index) => {   // 背景
                        const _border = `padding: 2px; border:1px solid ${color}; border-left:none;`
                        const _color = `color: ${index == 0 ? '#fff' : color};`
                        const _background = `background: ${index == 0 ? color : 'transparent'};`
                        return _background + _border + _color
                    })
                    callback(content, ...bg)
                }
            }


            /****************************************************
                         log + error + sucess
            *****************************************************/
            const log_color = '#666'
            let log = commFn('log', log_color)

            const error_color = '#e95b5b'
            let error = commFn('error', error_color)

            const sucess_color = '#63973e'
            let sucess = commFn('sucess', sucess_color)


            /****************************************************
                         img
            *****************************************************/
            let img = (url, scale = 1) => {
                const img = new Image()
                img.onload = () => {
                    const c = document.createElement('canvas')
                    const ctx = c.getContext('2d')
                    if (!ctx) { return }
                    c.width = img.width
                    c.height = img.height
                    ctx.fillStyle = 'red'
                    ctx.fillRect(0, 0, c.width, c.height)
                    ctx.drawImage(img, 0, 0)
                    const dataUri = c.toDataURL('image/png')
                    _console.log(
                        `%c `,
                        `padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
                        background-image: url(${dataUri});
                        background-repeat: no-repeat;
                        background-size: ${img.width * scale}px ${img.height * scale}px;
                        color: transparent;
                        `
                    )

                }
                img.src = url
            }

            /****************************************************
                         table
            *****************************************************/
            const table = function (data) {

                if (!Array.isArray(data) || data.length === 0) {
                    return
                }

                // 获取表头
                const headers = Object.keys(data[0])

                // 计算每列的最大宽度
                const colWidths = headers.map(header => {
                    return Math.max(
                        header.length,
                        ...data.map(row => String(row[header] !== undefined ? row[header] : '').length)
                    )
                })

                // 创建分隔线
                const createSeparator = () => {
                    return COLORS.fgCyan + colWidths.map(width => '_'.repeat(width + 2)).join('')
                }

                // 打印行数据
                const printRow = (row) => {
                    return headers.map((header, i) => {
                        const cell = String(row[header] !== undefined ? row[header] : header)
                        return COLORS.fgCyan +  cell + ' '.repeat(colWidths[i] - cell.length)
                    }).join(' | ')
                }

                // 打印表格
                _console.log(createSeparator())
                _console.log(printRow(headers).toString())
                _console.log(createSeparator())
                data.forEach(row => {
                    _console.log(printRow(row))
                })
                _console.log(createSeparator())
            }


            /**************************************
                 off 关闭拦截,还原为系统自带
            **************************************/
            const off = () => {
                log = null
                error = null
                window.console = _console
            }

            window.console = {
                log,
                error,
                sucess,
                img,
                off,
                table
            }

        }(window))

        //  console.off()
        console.log('测试', '112')
        console.error('错误', '112')
        console.sucess('成功', '112')
        console.img('./01.png')

        // 示例表格数据
        const tableData = [
            { name: 'Alice', age: 25, city: 'New York' },
            { name: 'Bob', age: 30, city: 'San Francisco' },
            { name: 'Charlie', age: 22, city: 'Chicago' }
        ]

        console.table(tableData)

    </script>
</body>

</html>
借鉴:: https://juejin.cn/post/7371716384847364147