console大全

console命令大全

console.log

控制台对象方法	描述
assert()	如果断言为 false，则在信息到控制台输出错误信息。
clear()	清除控制台上的信息。
count()	记录 count() 调用次数，一般用于计数。
error()	输出错误信息到控制台
group()	在控制台创建一个信息分组。 一个完整的信息分组以 console.group() 开始，console.groupEnd()
groupCollapsed()	在控制台创建一个信息分组。 类似 console.group() ，但它默认是折叠的。
groupEnd()	设置当前信息分组结束
info()	控制台输出一条信息
log()	控制台输出一条信息
table()	以表格形式显示数据
time()	计时器，开始计时间，与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间。
timeEnd()	计时结束
trace()	显示当前执行的代码在堆栈中的调用路径。
warn()	输出警告信息，信息最前面加一个黄色三角，表示警告
dir()	下拉小箭头将显示与上面相同的对象详细信息,更加方便查看 DOM 结构的输出

console.log() // 打印日志
console.debug() // 打印调试
console.error() // 打印错误
console.info() // 打印信息
console.warn() // 打印警告
console.assert() // 打印断言只有表达式为false时，才输出相应的信息到控制台
console.clear() // 清空

%s 接受字符串
console.log(‘I like %s but I do not like %s.’, ‘Skittles’, ‘pus’);

I like Skittles but I do not like pus.

%c表示css样式
console.info(‘%cHello’, ‘color: #43bb88;font-size: 24px;font-weight: bold;text-decoration: underline;’);

%d表示数字
console.info(‘%d’, 123);

%i表示整型数字
console.log(‘%i’, 123);

%o表示DOM元素
console.log(‘%o’, document.body);

%O表示javascript对象
console.log(‘%O’, new Date());

生产环境去掉console

let oldConsole = window.console
let newConsole = Object.create(null)
// 其他方法这里暂时省略了
;['log'].forEach((method) => {
    newConsole[method] = function (...args) {
        // 非开发环境直接返回
        if (process.env.NODE_ENV !== 'development') {
            return
        }
        oldConsole[method](...args)
    }
})
window.console = newConsole

控制台画条龙吧

<canvas id="canvas"></canvas>
//html放置canvas
<script>
// 加载龙的图片
let img = new Image()
img.src = './龙.jpg'
img.onload = () => {
    draw()
}
// 把图片绘制到canvas里
const draw = () => {
    const canvas = document.getElementById('canvas')
    canvas.width = img.width
    canvas.height = img.height
    const ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0, img.width, img.height)
    // 获取像素数据
    const imgData = ctx.getImageData(0, 0, img.width, img.height).data
    // 拼接字符
    join(imgData)
}
// 把像素数据拼接成字符
const join = (data) => {
    let gap = 10
    let str = ''
    for (let h = 0; h < img.height; h += gap) {
        str += '\n'
        for (let w = 0; w < img.width; w += gap) {
            str += ' '// 因为字符的高度普遍都比其宽度大，所以额外添加一个空字符平衡一下，否则最终的图形会感觉被拉高了
            let pos = (h * img.width + w) * 4
            let r = data[pos]
            let g = data[pos + 1]
            let b = data[pos + 2]
            // rgb转换成yuv格式，根据y（亮度）来判断显示什么字符
            let y = r * 0.299 + g * 0.578 + b * 0.114
            if (y >= 190) {
                // 浅色
                str += ' '
            } else {
                // 深色
                str += '#'
            }
        }
    }
    console.log(str)
}
</script>