console 高级用法

时间:2022-11-14 14:11:14

console.log()用法,相信大家都很熟悉了,这里就不再啰嗦。

下面来玩几个新鲜点的,我用的是chrome28,不保证兼容其他浏览器:
console.log的第一个参数中可以指定一个格式字符,这样第二个参数就可以定义替换文本或其他内容。
%c表示定义一个用于显示参数内容的css样式
%s表示定义替换文本

1. 给输出到控制台的内容定义颜色、字体等
console.log(‘%cHello World’, ‘color: #00c’)
console.log(‘%cHello %cWorld’, ‘color: #00c’, ‘color:#0c0;font-size:18px;’)
参数中的占位符可定义多个,如参数个数不够时,会将占位符原样输出,如:
console.log(‘%cHello %cWord’, ‘color:#0f0′)

console 高级用法

2. 让输出的内容别靠左边那么近
console.log(‘%cHello World’, ‘color: #c00; margin-left:20px’)

3. 输出一个警告的小icon
console.warn(‘%cHello World’, ‘color: #c00; margin-left:20px’)

console 高级用法

4. 输出背影图片
console.log(‘%cB’,'background:url(“http://cdn.iknow.bdimg.com/static/common/pkg/module_z2d468dd4.png”) -140px 0;padding:22px 67px;line-height:44px;font-size:0;’);

console 高级用法

补充一下,group也挺好用,试试这个:
console.group('Group by');console.log('Test 1');console.log('Test 2');console.groupEnd();

或者这样:
console.groupCollapsed('Group by');console.log('Test 1');console.log('Test 2');console.groupEnd()

前一个是默认展开的,后一个是默认收起了。