コンソールのJSのその他の用途

// 基本用法
console.log('常见用法 \n换行')
console.error('输出错误信息 红色显示')
console.warn('打印警告信息 黄色显示')
console.info('打印一般信息')
console.clear() // 清空console输出

//格式化输出
/*
	console.log支持的格式标志有:
	%s          占位符
	%d 或 %i    整数
	%f          浮点数
	%o%O        object对象
	%c          css样式
*/
console.log('%d + %d = %d', 1, 2, 3)
// %o%O打印dom节点时就不一样
console.log('%o',document.body)
console.log('%O',document.body)
// 为%c 后面的内容,增加css样式
// ps:console.log输出的超链接会被自动识别并加上灰色字体颜色和下划线的样式,而这个无法用%c覆盖
console.log('123 %c456','font-size:36px;color:red;')
console.log('123 %c4 http://www.google.com 56 %c789','font-size:20px;color:#ff8400;','font-size:12px;color:#000')
// 利用css样式加载图片
// ps:没法直接设置width和height样式,line-height图片高度,再调padding
console.log('%c ','background-image:url("http://iyeslogo.orbrand.com/150902Google/005.gif");background-size:120% 120%;background-repeat:no-repeat;background-position:center center;line-height:60px;padding:30px 120px;')

// 进阶用法
// 打印数组
console.table([['xiaoming','xiaoqiang'],['100','59']])
// 打印对象
console.table({'xiaoming':'100','xiaoqiang':'59'})
// 打印调用链
function fun(){ console.trace()	}
function fun1(){ fun() }
function fun2(){ fun1() }
fun2()
// 打印判断 console.assert(bool, 'info') 如果bool为false 打印出info 否则不打印
console.assert(false, '判断为false才显示的信息')

// 高阶用法
// 计时,单位毫秒
console.time()
for(var i = 0; i < 100000; i++) {
	var j = i * i
}
console.timeEnd()
// 打印代码或函数被调用次数
var fn = function() { console.count('hello world') }
for(var i = 0; i < 5; i++) {
	fn()
}
// 查看内存使用情况,是属性,不带括号
// console.memory
// 在浏览器开发者工具中使用
// 分组输出,可嵌套
console.group('生物')
console.log('真菌')
console.log('植物')
console.group('动物')
console.log('猫')
console.log('鸟')
console.log('狗')
console.groupEnd('吉娃娃')
console.groupEnd('哈士奇')
公開された59元の記事 ウォン称賛78 ビュー20000 +

おすすめ

転載: blog.csdn.net/PrisonersDilemma/article/details/104775504