Hans小镇
    mhans.cn

JavaScript中console的用法

在调试 JS 代码时,很多人倾向于使用 alert() 或者 console.log() 方法来输出信息,正如某些 Java 程序员喜欢在调试代码时使用System.out.println() 输出信息一样。但与 Java 输出不一样的是, console 对象拥有多种方法可以更好的呈现信息,从而给代码调试带来方便。根据常用程度,列出以下几种 console 对象的方法:

  • console.log()
  • console.debug()、console.info()、console.warn() 与 console.error()
  • console.table()
  • console.time() 与 console.timeEnd()
  • console.assert()
  • console.count()
  • console.group、console.groupEnd() 与 console.groupCollapsed()
  •  console.dir()

以下示例的运行环境是Chrome 57。

 

console彩蛋

如果你经常使用控制台应该就会发现我的博客添加了console彩蛋

只需要在网站的js里添加以下代码就可以实现这个效果了

来给访客一个惊喜吧



console.log()

先来谈谈我们最熟悉也最常用的 console.log() 方法。

我们最常用的做法是通过它来输出一个变量或者输出一个字符串。比如下面:

运行结果如下:

但我们也可以这样用 console.log():

控制台会输出:

代码片段 1 显示,console.log() 的参数可以有多个,输出的结果以一个空格隔开。

代码片段 2 显示,console.log() 可以使用 C 语言 printf() 风格的占位符,不过其支持的占位符种类较少,只支持字符串(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)。

console.debug()、console.info()、 console.warn() 与 console.error()

这四个方法的使用方法跟 console.log() 一模一样,差别在于输出的颜色与图标不同。下面是示例:

运行结果如下:

console.table()

我们看下面一个变量:

我们用 console.log() 将之在 Chrome 的控制台中输出:

再用 console.table() 输出:

所以从上面两种输出我们可以看出,当输出类似于这种两层嵌套的对象时,我们可以选择 console.table() 以表格的形式输出。当然,嵌套三层及以上的也会以表格形式输出,但限于表格只能显示二维信息的特点,其会在嵌套三层或以上的地方会显示 “Object” 字符串。

console.time()与console.timeEnd()

在调试时,我们经常需要知道一段代码执行时间,我们可以使用这两行代码来实现。看下面一段代码:

输出为:

从上面的例子可以看出,我们用 console.time() 和 console.timeEnd() 包围要测试运行时间的代码,这两个方法的参数保持一致,以便正确识别和匹配代码开始和结束的位置。

console.assert()

console.assert() 类似于单元测试中的断言,当表达式为 false 时,输出错误信息。示例如下:

输出结果如下:

console.count()

调试代码时,我们经常需要知道一段代码被执行了多少次,我们可以使用 console.count() 来方便的达到我们的目的。示例如下:

运行结果为:

console.group()、 console.groupEnd() 与 console.groupCollapsed()

一般的 console.log() 方法的输出没有层级关系,在需要一些显示层级关系的输出中显得苍白无力,使用 console.group() 可以达到我们的目的。示例代码如下:

运行结果为:

把 “group” 换成 “groupCollapsed”,则默认为折叠运行结果。

console.dir()

在 Chrome 环境下 console.dir() 与 console.log() 方法表现几乎没有差别,甚至更差。

console.dir() 是为了将特定的 JS 对象显示为可以交互的列表,而列表是折叠起来的。在 Chrome 控制台输出的效果:

从上图可以看到,用console.dir() 输出的结果是完全折叠的,而在Firefox中输出的效果是这样的:

在 Firefox 的控制台中,console.dir() 能够将一个折叠的对象显示为一个清晰的导航树。

如果在 Chrome 环境下进行开发,输出一般的对象,推荐使用 console.log(),而在 Firefox 环境下,想要清晰地显示一个对象,console.dir() 还是比较推荐的。

对于 Chrome 用户来讲,console.dir() 并不是没用了:

在 Chrome 中打印 DOM 元素时,两个方法输出的结果大不一样。console.log() 会将 DOM 元素以 HTML 的形式输出,而 console.dir() 则会以 JSON 对象的形式输出。

 

打赏作者
谢谢你哦 么么哒(づ ̄ 3 ̄)づ

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

正在跳转到PayPal...
未经允许不得转载:方寸之间 » JavaScript中console的用法

评论 5

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    I will immediately clutch your rss as I can’t in finding your email subscription link or
    newsletter service. Do you’ve any? Please let me know in order that
    I may just subscribe. Thanks.

    manicure2年前 (2017-04-27)回复
  2. #2

    Hello there, You have done an incredible job.
    I’ll definitely digg it and in my view recommend to my friends.
    I am sure they will be benefited from this website.

    criscalico.snack.ws2年前 (2017-05-09)回复
  3. #3

    Some remarkable pictures. Fantastic shades.

    heel spurs1年前 (2017-06-08)回复
  4. #4

    Thanks for sharing your thoughts about Chrome. Regards

    minecraft3个月前 (09-05)回复
  5. #5

    Thank you a lot for sharing this with all people you actually understand what you’re talking approximately!
    Bookmarked. Kindly also discuss with my website =). We may have a link trade agreement between us

    minecraft3个月前 (09-05)回复