一、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/21 练习 创建 接口interface 应用implements 类class 并实例化调用

    package testinterface; public interface ICpu { //电压 public boolean dianya(); //控制 public void kongzh ...

  2. ZOJ 3870 Team Formation 贪心二进制

                                                    B - Team Formation Description For an upcoming progr ...

  3. HTML <iframe> 标签的 src 属性

    HTML <iframe> 标签的 src 属性 <iframe src="/index.html"> <p>Your browser does ...

  4. Windows10 Win键失灵的解决方法

    之前在Windows10出来的时候在使用过程中发现:按“Win键”调出开始菜单没有用.一点反应都没有.Win+R等这样的组合键也没用. 后来周年更新后,还是无法使用... 各种方法用尽啊.都不行啊! ...

  5. TableLayout与MigLayout

    最近新接触的两个Layout,另外之前用的GridBagLayoutHelper以及最近听说的Qt for java的QCSS据说也不错, 只是Qt的跨平台需要单独发布,假如使用QT for java ...

  6. 移动端html touch事件

    诸如智能手机和平板电脑一类的移动设备通常会有一(capacitive touch-sensitivescreen),以捕捉用户的手指所做的交互.随着移动网络的发展,其能够支持越来越复杂的应用,web开 ...

  7. HTML5来了,7个混合式移动开发框架

    在这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识,懂一些CSS和JavaScript就够了.如果你总听别 ...

  8. FPGA基础入门篇(四) 边沿检测电路

    FPGA基础入门篇(四)--边沿检测电路 一.边沿检测 边沿检测,就是检测输入信号,或者FPGA内部逻辑信号的跳变,即上升沿或者下降沿的检测.在检测到所需要的边沿后产生一个高电平的脉冲.这在FPGA电 ...

  9. 离散化+BFS HDOJ 4444 Walk

    题目传送门 /* 题意:问一个点到另一个点的最少转向次数. 坐标离散化+BFS:因为数据很大,先对坐标离散化后,三维(有方向的)BFS 关键理解坐标离散化,BFS部分可参考HDOJ_1728 */ # ...

  10. Window对象与DOM

    目前,前端插件数不胜数,比如有移动端滑动特效插件Swiper,下拉刷新的iScroll,弹出框插件layer,还有我们经常使用的JQuery,jquery.mobile等,这些插件能够满足我们日常的基 ...