一、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. lvm调整分区大小

    1 问题 /home分区占用空间比较大,而/var分区比较小,它们位于同一个磁盘上.该系统安装了lvm. 2 减少/home分区空间 2.1 卸载/home umount /home 2.2 检查文件 ...

  2. qq xxs

    qq xxs qq xxs 有很多举个简单例子 : QQ空间发段文章 带上 <script> 提交(document.cookie) 到 自己服务端获取 </script> 在 ...

  3. STL 之 list源码自行实现(iterator)

    (0)文件夹 STL 之 vector源码实现(云算法<< [] = 重载, new delete,throw catch) STLc++中string类的源码 堆(stack) 之 c ...

  4. 123 c#调用oracle存储过程返回数据集 --通过oracle存储过程返回数据集

    c#调用oracle存储过程返回数据集 2008-12-20 10:59:57|  分类: net|字号 订阅   CREATE OR REPLACE PACKAGE pkg_tableTypeIS  ...

  5. 【NOI 2007】 社交网络

    [题目链接] 点击打开链接 [算法] 首先,跑floyd,计算最短路和最短路径数 然后,计算答案,枚举k,s,t,若dist[s][k] + dist[k][t] = dist[s][t], 那么,点 ...

  6. 杂项-公司:Sun

    ylbtech-杂项-公司:Sun Sun Microsystems是IT及互联网技术服务公司(已被甲骨文收购)Sun Microsystems 创建于1982年.主要产品是工作站及服务器.1986年 ...

  7. 使用IntelliJ IDEA 创建Maven项目(入门)

    一. 下载Maven 下载地址:http://maven.apache.org/download.cgi tar.gz压缩格式用于unix操作系统,而zip用于windows的操作系统,但在windo ...

  8. Ubuntu12.04安装JDK(jdk-6u45-linux-x64.bin)(转载)

    首先下载jdk-6u45-linux-x64.bin, 如果是32bit系统下载相应的i386即可. 更改文件权限-> chmod a+x jdk-6u45-linux-x64.bin. 创建目 ...

  9. P5043 【模板】树同构([BJOI2015]树的同构)

    传送门 把所有的树给哈希起来就好了 具体的方法是一个节点的哈希值就是它所有儿子的哈希值给哈希起来,然后以每个节点为根算出它作为根节点的哈希值.那么把每棵树的哈希值排个序,与之前的比较就好了 注意把儿子 ...

  10. 【weiphp】安装中报错

    问题描述:安装的第三部报错“SQLSTATE[HY000]: General error: 2030 This command is not supported in the prepared sta ...