一、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. javascript下的json 序列化及反序列化

    1.序列化 将json对象转为字符串: JSON.stringify(jsonObj) 2.反序列化 var jsonObj = eval("(" + jsonstring + & ...

  2. Java的Graphics中drawImage与drawLine的坐标区别

    drawImage复制的区域是 dx1 <= x < dx2,dy1 <= y < dy2 drawLine绘制区域是 dx1 <= x <= dx2,dy1 &l ...

  3. [整理]EABI和OABI【转】

    本文转载自:https://www.crifan.com/order_eabi_and_oabi/ 1.什么是ABIABI,application binary interface (ABI),应用程 ...

  4. linux 和win7 双系统模式下 忘记win7 密码的修改方法

    首先登陆linux系统,在linux 系统下找到win7系统的安装盘(比如为C盘), (1)进入到C://windows/system32下 找到osk.exe 文件,并将其剪切到其他的地方(记住这个 ...

  5. 如何在BCGControlBar工程的工具栏里面新增下拉列表控件

    通常情况下,工具栏里面都是一些按钮和图片,很少可以看到下拉列表控件,但是在某些应用场合,也需要用到下拉列表控件.今天在这里就简单讲解下如何在工具栏里添加下拉列表控件.   添加的过程也比较简单,在CM ...

  6. 15_activity生命周期方法说明

    现在是可见并且可以被操作,所以现在是一个前台的Activity. 按一下Home键,它是先onPause然后onStop. 现在它就处于一个Stop停止的状态.停止的状态如果我当前内存够用的情况下,它 ...

  7. 最短路径(Dijkstra算法)

    当用图结构来表示通信.交通等网络,权重代表距离或者成本,寻找最短路径就成为了一个重要的任务. 给定带权网络G=(V;E),源点s,对于其他所有顶点v,寻找s到v的最短路径,连接成一颗最短路径树.可以证 ...

  8. hdu 2209 翻纸牌游戏【贪心】

    本来是冲着搜索去的--其实可以贪心 因为能改变第一位的只有第一位和第二位,然后改完之后后面的同理,也就是说只要贪心的推一遍就可以 但是注意要在翻第一个和不翻第一个之间取个min #include< ...

  9. /usr/lib64/python2.6/lib-dynload/pyexpat.so: symbol XML_SetHashSalt, version EXPAT_2_0_1_RH not defined in file libexpat.so.1 with link time reference

    解决方法:[root]$cd /usr/lib64/python2.6/lib-dynload[root]$ln -s /lib64/libexpat.so.1.5.2 libexpat.so.0[r ...

  10. [Qt Creator 快速入门] 第2章 Qt程序编译和源码详解

    一.编写 Hello World Gui程序 Hello World程序就是让应用程序显示"Hello World"字符串.这是最简单的应用,但却包含了一个应用程序的基本要素,所以 ...