一、console.log格式化打印

console.log格式化这一用法一般都在个人博客或其他官网上有,当F12查看网页元素时,在控制台(console)那里偶尔会发现一些个性化的输出,感觉很奇特很好玩,其实现原理不难看一遍就晓得,具体实现如下

1、%c表示css样式

console.log('%c hello world', 'color: red;font-size: 24px;font-weight: bold;text-decoration: underline;');

2、%f表示浮点数

console.log('%f', 123.563);

3、%i、%d表示整型数字

console.log('%i', 123);

4、%o表示DOM元素

console.log('%o', document.body);

5、%O表示javascript对象

console.log('%O', new Date());

二、console对象的一些方法

首先在控制台(console)输入console回车就能列举所有方法:

常用的有

console.log()    // 打印日志
console.debug() // 打印调试
console.error() // 打印错误
console.info() // 打印信息
console.warn() // 打印警告
console.assert() // 打印断言
console.clear() // 清空

console.log格式化及console对象的更多相关文章

  1. console.log(([])?true:false); console.log(([]==false?true:false)); console.log(({}==false)?true:false)

    下面是题目的类型转换结果: Boolean([]); //true Number([]); //0 Number({}); // NaN Number(false); //0 因此: console. ...

  2. console.log(a)和console.log(window.a)的区别?

    console.log(window.l); //undefined console.log(l); //Uncaught ReferenceError: l is not defined js对于未 ...

  3. console.log对象全部展开

    挖掘Chrome Console的小秘密 SP_lyu关注 2018.09.15 18:25:32字数 1,697阅读 917 控制台应该是大多数前端开发人员日常开发调试离不开的神器.然而控制台仍有很 ...

  4. JS之console.log详解以及兄弟姐们邻居方法扩展

    console.log() 基本用法 console.log,前端常用它来调试分析代码,你可以在任何的js代码中调用console.log(),然后你就可以在浏览器控制台看到你刚才打印的常量,变量,数 ...

  5. 一些DevTools的小技巧-让你不止会console.log()

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://www.sitepoint.com/beyond-console-log-leve ...

  6. 等不及要告诉你的一件事-console.log可以指定样式

    今天看`简书`文章,习惯性的打开了开发者工具,于是发现了意见有意思的事,在console面板,发现了如下的日志: ??? 这 ... 有点意思. 如果上面的图片,不能引起你的兴趣,那么你可以再看看这个 ...

  7. javascript 中的console.log和弹出窗口alert

    主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是co ...

  8. JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻 ...

  9. JS里try...catch...finally详解,以及console日志调试(console.log、console.info等)

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. 关于移动平台的viewport

    viewport是用来设置移动平台上的网页宽度,写device-width比较好,不然会和设备上不一样 在使用device-width之后,图片资源最好使用百分比布局,进行自动缩放. 文字大小是一样的 ...

  2. H264 层次构成[2]

    H264层次构成 H264标准是由JVT(Joint Video Team,视频联合工作组)组织提出的新一代数字视频编码标准.JVT于2001年12月在泰国Pattaya成立.它由ITU-T的VCEG ...

  3. 插入CSS的方法

    传送门    选择器  selector {declaration1; declaration2; ... declarationN }   例:   p { text-aligh:center; } ...

  4. P2470 [SCOI2007]压缩

    传送门 区间dp,记\(dp(l,r,t)\)表示区间\((l,r)\),\(t\)表示这个区间中能不能放\(M\).如果可以,枚举中间哪里放\(M\)来压缩.也可以不压缩,后面直接跟上去.如果左右重 ...

  5. 源码阅读之HashMap(JDK8)

    概述 HashMap根据键的hashCode值存储数据,大多数情况下可以直接定位到它的值,因而具有很快的访问速度,但遍历顺序却是不确定的. HashMap最多只允许一条记录的键为null,允许多条记录 ...

  6. [转]c++中的string常用函数用法总结

    标准c++中string类函数介绍 注意不是CString之所以抛弃char*的字符串而选用C++标准程序库中的string类,是因为他和前者比较起来,不必 担心内存是否足够.字符串长度等等,而且作为 ...

  7. AGC16E Poor Turkeys

    输入样例: 10 10 8 9 2 8 4 6 4 9 7 8 2 8 1 8 3 4 3 4 2 7 输出样例#6: 5 话说这题虽然不是很OI但是确实挺锻炼思维的 一开始以为是用并查集之类的东西维 ...

  8. Linux C编程 GCC的使用

    本篇文章面向一些会linux文件操作与vim基本命令,编程大佬请移步勿喷. gcc是默认安装的,但是其还缺少常用的头文件和库文件,所以还需要build-essential这个包,可以在联网状态下使用如 ...

  9. 大数高精度加减乘除 51nod 1005 大数加法

    1005 大数加法 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出2个大整数A,B,计算A+B的结果. Input 第1行:大数A 第2行:大数B ...

  10. ToolBar教程:AppCompatActivity下用toolbar当actionbar用

    参考: https://developer.android.com/training/appbar/index.html 1,自定义toolbar主题 2,在布局xml中使用toolbar 3,在代码 ...