JavaScript最常用的调试工具就是console.info()了。console是浏览器中window对象的属性之一,由浏览器对象模型(BOM)提供,作用是访问浏览器控制台,你可以通过console输出有助于调试代码的字符串、数组、对象。console还附带了一些你平时不了解的好用方法,本文可以丰富你的调试工具。

我们一般通过

window.console.info('hello world');

或者

console.info('hello world');

由于window可以省略所以我们使用后者以精简代码。

输出信息到控制台的四种方式:

  1. console.log();

  2. console.info();

  3. console.warn();

  4. console.error();

我们唯一要做的就是给它们(方法)传递一个或者多个参数。控制台会显示不同的图标和颜色来表示其记录级别。见下图:

不同级别的记录打印代码

不同级别的记录打印效果

你会注意到error日志消息比其他消息更显眼。视觉上区分有助于开发者在控制台快速查看错误或警告信息等。你应该确保什么时候应该警示什么类别的日志信息。

也许上面的功能你已经很熟悉了,那么真正有价值的内容现在开始,请往下看。

字符串替换

这个技术可以使用字符串中的占位符来替换你向方法中传入的其他参数。

输入: console.info('hello %s', 'world');

输出: hello world

代码

效果

%s是第二个参数‘world’的占位符。任何的字符串、整数、数组都可以被转换成字符串并替换%s。如果你传入一个对象,它将显示为[object Object] 或 Object。

Firefox

chrome

如果你想传入对象,你需要使用 %o 或者 %O ,而不是 %s。

console.info('this is an object %o', {obj : 'object'});

传入对象

数字

字符串替换可以与整数和浮点数一起使用:

  • 整数 %i 或 %d

  • 浮点数 %f

输入: console.info('int: %d, float: %f', 1, 1.5);

输出: int: 1, float: 1.500000;

可以使用%.1f来格式化浮点数,这样就只显示一位小数, %nf ,你懂得(显示n为小数)。

总结一下格式化说明符:

  1. %s 使用字符串替换占位符

  2. %(d or i) 使用整数替换占位符

  3. %f ,%nf 使用浮点数替换占位符

  4. %o or %O 占位符显示为一个对象

  5. %c 应用提供css (PS: 可以自己尝试一下,或者看看下面的`彩蛋`吧)

字符串模板

ECMAScript6的出现,模板字符串是替换或连接的替代品。语法是使用反引号(``)来代替引号,变量包裹在 ${ } 中:

const a = 'world';

console.info(` hello: ${a} `);

// hello: world

对象在模板字符串中显示为[object Object]或 Object,所以你仍然可以使用 %o 或 %O 替换。

与你之前使用字符串拼接: console.info('hello: ' + str + '!');,使用替换或者模板创建是不是代码更易读呢!

彩蛋(*&……&*)

现在,我们来实现一个丰富多彩的console,当我们请求一个数据后,请求成功用绿色,请求失败用红色。先看效果:

丰富多彩的日志

const success = [ 'background: green', 'color: white', 'display: block', 'text-align: center' ].join(';');

const failure = [ 'background: red', 'color: white', 'display: block', 'text-align: center' ].join(';'); console.info('%c /dancing/bears was Successful!', success);

console.log({data: { name: 'Bob', age: 'unknown' }});

// "mocked" data response

console.error('%c /dancing/bats failed!', failure);

console.log('/dancing/bats Does not exist');

在字符串替换中使用(上文提到的) %c 占位符来应用你的日志打印行添加样式规则。 控制台仅支持少数CSS样式,并且因浏览器而异。

其他可用的方法

下面几个方法都不是API标准,所以你需要在高版本浏览器下使用。

1、 console.assert(boolean, param); 如果第一个参数计算为FALSE,那么返回第二个参数。如果为TRUE,那么不显示日志。

断言

2、 console.dir();显示一个传入对象的可交互属性列表,节省点开Object对象操作,还不错。

3、 console.table( ['javascript', 'php', 'java'] ); 用一个表格显示数组或对象

请点击此处输入图片描述

chrome用户请注意,table()是不能工作的,你可以通过将项目放入数组或对象来解决这个问题。

console.table( [['javascript', 'php', 'java']] );

4、 console.group(); 由至少3个console调用组成,它将输出多个层级,显示效果如下:

请点击此处输入图片描述

5、 console.time(id) 和 console.timeEnd(id) 启动id的定时器和停止id的定时器。

它可以同时运行多达10,000个定时器。

最后

console的有些方法虽然实用,但是因为它们的API依然在变动,具体可以访问

https://developer.mozilla.org/en/docs/Web/API/console

结尾

如果你喜欢我的内容请关注吧,共同学习共同进步!

感谢浏览~~

带你重拾JavaScript(2)之console的你所不知道的功能的更多相关文章

  1. js值----你所不知道的JavaScript系列(6)

    1.数组 在 JavaScript 中,数组可以容纳任何类型的值,可以是字符串.数字.对象(object),甚至是其他数组(多维数组就是通过这种方式来实现的) .----<你所不知道的JavaS ...

  2. 你所不知道的库存超限做法 服务器一般达到多少qps比较好[转] JAVA格物致知基础篇:你所不知道的返回码 深入了解EntityFramework Core 2.1延迟加载(Lazy Loading) EntityFramework 6.x和EntityFramework Core关系映射中导航属性必须是public? 藏在正则表达式里的陷阱 两道面试题,带你解析Java类加载机制

    你所不知道的库存超限做法 在互联网企业中,限购的做法,多种多样,有的别出心裁,有的因循守旧,但是种种做法皆想达到的目的,无外乎几种,商品卖的完,系统抗的住,库存不超限.虽然短短数语,却有着说不完,道不 ...

  3. JavaScript中你所不知道的Object(二)--Function篇

    上一篇(JavaScript中你所不知道的Object(一))说到,Object对象有大量的内部属性,而其中多数和外部属性的操作有关.最后留了个悬念,就是Boolean.Date.Number.Str ...

  4. 闭包----你所不知道的JavaScript系列(4)

    一.闭包是什么? · 闭包就是可以使得函数外部的对象能够获取函数内部的信息. · 闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. · 闭包就 ...

  5. js类型----你所不知道的JavaScript系列(5)

    ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型.也有其他的叫法,比如原始类型和对象类型等. 1.内置类型 JavaScript 有七种内置类型: • 空值(null) • 未定义( ...

  6. 【javascript杂谈】你所不知道的replace函数

    前言 最近在做面试题的时候总会用到这个函数,这个函数总是和正则表达式联系到一起,并且效果很是不错,总能很简单出色的完成字符串的实际问题,大家肯定都会使用这个函数,像我一样的初学者可能对这个函数的了解还 ...

  7. 重拾javascript动态客户端网页脚本

    笔记一: 一.DOM 作用: ·              DOM(Doument Object Model) 1.document文档 HTML 文件 (标记语言) <html> < ...

  8. 提升----你所不知道的JavaScript系列(3)

    很多编程语言在执行的时候都是自上而下执行,但实际上这种想法在JavaScript中并不完全正确, 有一种特殊情况会导致这个假设是错误的.来看看下面的代码, a = 2; var a; console. ...

  9. 你所不知道的JavaScript数组

    相信每一个 javascript 学习者,都会去了解 JS 的各种基本数据类型,数组就是数据的组合,这是一个很基本也十分简单的概念,他的内容没多少,学好它也不是件难事情.但是本文着重要介绍的并不是我们 ...

随机推荐

  1. 实现javascript下的模块组织

    前面的话 java有类文件.Python有import关键词.Ruby有require关键词.C#有using关键词.PHP有include和require.CSS有@import关键词,但是对ES5 ...

  2. Java Swing 图形界面实现验证码(验证码可动态刷新)

    import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Toolkit;import j ...

  3. java环境安装之不能安装exe文件

    经过多年,打算再学下java 从官网下载java8安装包,但因为我的计算机的cd-room被卸载掉了,安装是报错说cab文件损坏之类的错误. 从stackOverflow中找到一篇眼前一亮的解决办法. ...

  4. 【持久化框架】Mybatis简介与原理

    从这篇博文开始我们学习一下Mybatis,希望大家提出宝贵的建议. 什么是Mybatis MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache softwar ...

  5. 为什么字符串会有length属性-JS中包装对象

    任何原始类型的数据  (primitive type) 比如 String类型的字符串 "abcd"   "abcd"  是原始类型的数据 但是 当他调用 le ...

  6. java面向对象--内部类

    将一个类定义在另一个类里面,里面的那个类称为内部类,与属性.方法等一样视作外部类的成员.内部类提供了更好的封装,不允许同包中的其他类访问该内部类. 内部类作为外部类的成员,同样可以被4个访问限定符修饰 ...

  7. ionic2 自定义cordova插件开发以及使用 (Android)

    如何写一个cordova 用于ionic2项目中呢,在搜索了一番之后,千篇一律,我都怀疑那些文章是不是全部都是复制来复制去的,而且都不是很详细.我自己也捣鼓了一下午,踩了很多坑.所以特此写这下这篇,记 ...

  8. An Introduction to Stock Market Data Analysis with R (Part 1)

    Around September of 2016 I wrote two articles on using Python for accessing, visualizing, and evalua ...

  9. springboot 1.5.2 集成kafka 简单例子

    添加依赖 compile("org.springframework.kafka:spring-kafka:1.1.2.RELEASE") 添加application.propert ...

  10. 对 Servlet 的改进--------Struts2 引入

    通过上一篇博客:Servlet 的详解 http://www.cnblogs.com/ysocean/p/6912191.html,我们大致知道了 Servlet 的基本用法.但是稍微分析一下 Ser ...