一、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. input title 悬浮值

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  2. 利用 C# dynamic 减少创建模型类

    C# 的 dynamic 关键字可以是C#可以像 javascript 这种弱类型语言一样具有随时可以添加属性的能力.C# 是一种强类型语言,dynamic 要摆脱类型的限制,自然是有代价的.这里不讨 ...

  3. http-2.2

    HTTP-2.2 httpd 配置文件的组成: grep "Section" /etc/httpd/conf/httpd.conf ### Section 1: Global En ...

  4. [App Store Connect帮助]六、测试 Beta 版本(2)输入测试信息以供外部测试

    如果您向外部测试员分发您的 App,您需要输入关于您 App 的额外 TestFlight 测试信息以供“Beta 版 App 审核”.您可以在添加 App 至您的帐户时,或在您邀请外部测试员时输入此 ...

  5. CSS3 核心知识面试题

    一种常见利用伪类清除浮动的代码 .clearfix:after { content:"."; //这里利用到了content属性 display:block; height:; v ...

  6. less新手入门(四)—— Mixin Guards

    八.Mixin Guards 有条件的 mixin 当您想要匹配表达式时,相对于简单的值或特性,Guards是有用的.如果您熟悉函数式编程,您可能已经遇到过它们. 为了尽可能地保持CSS的声明性质,在 ...

  7. C#命名空间 using的用法

    using的用法: 1. using指令:引入命名空间 这是最常见的用法,例如: using System; using Namespace1.SubNameSpace; 2. using stati ...

  8. python程序展现图片

    突然想写一个python程序能够显示图片的 ,展示文字的已经实现了 现在就搞一搞这个吧 相信也是很简单 首先是放一张图片在e盘下面 等会程序打包的时候将会用到 就决定是你啦 皮卡丘: 然后就写代码吧:

  9. 流式套接字(SOCK_STREAM),数据报套接字 (SOCK_DGRAM) 的比较

    1.流式套接字 使用这种套接字时,数据在客户端是顺序发送的,并且到达的顺序是一致的.比如你在客户端先发送1,再发送2,那么在服务器端的接收顺序是先接收到1,再接收到2,流式套接字是可靠的,是面向连接的 ...

  10. asp.net MVC Session 第二次加载丢失问题

    在做本地调试时发现,session 加载过了对象之后,每次都是第一次加载成功,第二次再进来时候session 就是失效丢失了,究其原因:原来是因为第一次加载session 过大导致,原有其他sessi ...