console的高级用法，console.log带颜色的字

先展示效果图：

<!-- /*** @Author: Ding Jianlong* @Date:   2018-11-08 14:37:05* @Last Modified by:   Ding Jianlong* @Last Modified time: 2018-11-08 17:14:05*/ -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>Ding Jianlong Html</title><style></style>
</head>
<body><h2>请在开发者工具查看console</h2>    <script>//基本用法console.log('最常见用法\n换行');console.error('输出错误信息 会以红色显示');console.warn('打印警告信息 会以黄色显示');console.info('打印一般信息');console.clear();//清空上面的console显示//进阶用法//console.assert(bool,”info”) 如果bool为false 打印出info 否则不打印console.assert(false,'判断为false才显示的信息');//传入的对象或数组以表格方式显示console.table([['中国','美国'],['好']]);//打印 调用链 fn2()调用fn1()，fn1()调用fn()function fn(){ console.trace();  }function fn1(){ fn(); }function fn2(){ fn1(); }fn2();//格式化输出/*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样式//附：console.log输出的超链接会被自动识别并加上灰色字体颜色和下划线的样式，而这个无法用%c覆盖console.log('123 %c 456','font-size:36px;color:red;');console.log('123 %c 4 http://www.google.com 56 %c 789','font-size:20px;color:#ff8400;','font-size：12px;color:#000');//利用css样式加载图片//没法直接设置width和height样式,line-height图片高度,再调paddingconsole.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.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('分组1');console.log('语文');console.log('数学');console.group('其他科目');console.log('化学');console.log('地理');console.log('历史');console.groupEnd('其他科目');console.groupEnd('分组1');</script>
</body>
</html>

参考文章：
http://www.alloyteam.com/2013/11/console-log/
http://www.alloyteam.com/2013/11/console-log-2/

console的高级用法，console.log带颜色的字相关推荐

诛仙服务器显示横线,诛仙手游聊天颜色字体代码发送带颜色的字
诛仙手游聊天颜色字体代码发送带颜色的字,玩家们在游戏中聊天看到很多玩家都用带颜色字体聊天,这不是VIP特权是玩家用颜色代码聊天发送,输入喜欢颜色代码加上聊天内容就可以发送了.世界上突然出现了一堆五颜六 ...
html 弹出一个邮件连接,mailto scheme 高级用法，显示带html样式的邮件文本
需求: 今天同事问我一个需求,就是如果用html的mailto scheme,能否当其点击后弹出的outlook中,其内容正文部分是一个带有html的样式或格式的? 真是这样的么?因为10年前当刚接触 ...
linux自定义显示带颜色的字
让echo输出带颜色的方法有两种在shell脚本中定义颜色变量,使用echo -e调用变量定义变量的时候,把echo -e定义到变量中,然后输出变量格式及选项格式如下: `echo -e &q ...
echo 命令显示带颜色的字
让echo输出带颜色的方法有两种在shell脚本中定义颜色变量,使用echo -e调用变量定义变量的时候,把echo -e定义到变量中,然后输出变量格式及选项格式如下: `echo -e &q ...
Git log高级用法
格式化Log输出首先,这篇文章会展示几种git log格式化输出的例子.大多数例子只是通过标记向git log请求或多或少的信息. 如果你不喜欢默认的git log格式,你可以用git config ...
Cacti Weathermap 高级用法（二）
成都长宽Weathermap实际运用的效果图示例: 这是一个CNC出口的质量监控图. 途中cnc节点(红色)是一个展示图例,TEL节点根据存活状态显示为绿色 TEL节点上面P:47.2ms 是一个,这 ...
Ajax是什么？Ajax高级用法之Axios技术
Ajax AJAX 异步请求局部刷新 Ajax 参数详解 js.json.jsonp区别 json和jsonp的区别同源策略 json和js对象的区别 Ajax高级用法(axios) 为什么要用Ax ...
js replace不改变原str_总结javascript replace高级用法
详解javascript replace高级用法在前端与后台交互的时候我们通常都需要将后台传递的数据绑定到html中,这个绑定数据的方式我们通常是使用jQuery或者使用原生的innerHTML进行 ...
Newtonsoft.Json高级用法
手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...

console的高级用法，console.log带颜色的字

console的高级用法，console.log带颜色的字相关推荐

最新文章

热门文章