一、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. 2016/1/17 笔记 1,面向对象编程OOP 2,类 全

    面向对象编程OOP 编程方式的发展 1,面向过程 重用性低 维护工作量大  2,面向对象 重用性高 维护容易 概念 1,对象 Object 一个具体的事物 是类的实例      2,类Class 同一 ...

  2. 洛谷 P1525 关押罪犯==codevs 1069 关押罪犯[NOIP 2010]

    P1525 关押罪犯 513通过 1.4K提交 题目提供者该用户不存在 标签图论并查集NOIp提高组2010 难度普及+/提高 提交该题 讨论 题解 记录 最新讨论 咳咳.竟MLE了. 囧.运行时错误 ...

  3. Delphi7目录结构

    Delphi7目录结构 打开Delphi的安装目录,如C:\Program Files\Borland\Delphi7,你将会看到目录下包含了一些文件和文件夹:Source:存放的是Delpi提供的所 ...

  4. mysql_connect 等待时间长,修改连接地址为127.0.0.1即可

    程序搬家后,运行非常慢分析流程: 1.外网的等待时间太长 2.内容等待时间也很长 3.断点查到仅仅一句 mysql_connect ("localhost",***,***)就要1 ...

  5. 2018GDKOI游记

    我很后悔DAY1考完就写了小结.没人看题解,却这么多人来揭我伤疤.既然明摆着摆出来就是刷访问量,下面的就别看了吧. --------------------分割线------------------- ...

  6. ubuntu将mysql、nginx添加到环境变量中

    vim /etc/profile 添加 export PATH="$PATH:/usr/local/mysql/bin" export PATH="$PATH:/usr/ ...

  7. [CF348B]Apple Tree

    https://www.zybuluo.com/ysner/note/1300249 题面 给一棵大小为\(n\)的树,树的每个叶子节点上有权值. 定义一颗树平衡:对于每一个结点\(u\)的子树都拥有 ...

  8. 17.EXTJs 中icon 与iconCls的区别及用法!

    转自:https://blog.csdn.net/u013890437/article/details/38315717?utm_source=blogxgwz7

  9. Maven package打包webapp项目遇到的问题

    环境Java: JDK_1.7.0_79Eclipse: Mars(4.5.0)Maven: 3.3.3最近公司同事重构某Java web项目,完成之后发现部署启动总是不成功 Caused by: o ...

  10. E20180119

    Foundation   n. 基础; 地基; 粉底; 基金(会); hybrid   n. 杂种; 杂交生成的生物体; 混合物; 混合词; adj. 混合的; 杂种的;