相信从事前端开发的您,一定不会陌生这款和firebug同样强大的Chrome dev tools,它让所有的代码调试都变得如此可爱。而在它深邃的机体里,还存有一个命令:console.log。 她是用来做什么的?顾名思义,它是一个彪悍的输出记录功能,您可以从您自己的web页面上调用,然后以最快的方式转储尽可能多的信息到控制台上,从而能更醒目地让你意识到你的javascript下一步需要做什么。
那么,我将与您分享这一可爱的朋友。 首先请尝试打开你的Chrome浏览器,F12召唤出firebug,在如下界面中点击Console,然后输入13+14,回车,它将出现:
它就是如此灵活,无论您是否接受!其最简单的书写方式可以为:
你还可以加入许多参数,比如:
在一些遍历的操作中,如果你需要一眼目睹所有结果,使用alert调试显然不足,那么你就可以借助log:
当然,console.log提供的功能远不止这些,您还可以在它的控制台中做更多的事。如果你给log传递的是一个对象或者数组、HTML元素等,控制台将会显示为一个超链接,点击它您就可以查看该元素的详细信息了,比如您可以输入:
那么,它将立马输出body所包含的所有元素:
除了console.log,console对象还能实现日志的彩色输出,这将让您的调试结果显得更清晰了:
熟练使用console.log,可以让您在javascript调试中省不少麻烦,尤其是面对庞大的框架操作。那么,从现在开始,赶紧去尝试运用吧,你将体会她更多的神奇,而不仅仅是贤心所介绍的这些。
进阶篇:
在正常模式下,一般只能向console 控制台输出简单的文字信息。但为了把信息输出得更优雅更便于阅读,除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息,在控制台中出来的效果如下:
在输出信息前面会有一个带感叹号的黄色三角警告符号。似乎比一般的console信息要友好得多了。虽然图标是黄色的,但输出的文字仍然是黑色。另外经常用到的是输出错误信息。可以通过调用console.error() 来实现。输出的效果如下:
信息前面会出现一个带叉的红色圆形图标。这个效果要比警告信息更友好了,字体颜色成红色了。要更牛叉莫过于对文字应用样式。而现在这一特性已经在谷歌浏览器里实现了。在Chrome的开发者工具里,console 可以加样式,可以显示缤纷的颜色,甚至图片。简直爽翻了。具体来说,是可以对输出到console控制台的文字进行CSS控制。格式如下:
下面是谷歌开发者中心上面关于chrome控制台console.log()的文档
Format Specifier | Description |
%s | Formats the value as a string. |
%d or %i | Formats the value as an integer. |
%f | Formats the value as a floating point value. |
%o | Formats the value as an expandable DOM element (as in the Elements panel). |
%O | Formats the value as an expandable JavaScript object. |
%c | Formats the output string according to CSS styles you provide. |
1.3D Text:
2.Colorful CSS:
3.Rainbow Text:
在Chrome控制台输出图片
除了上面介绍的那些炫目的文字效果外,你还可以在Chrome控制台中显示图片,自然地,显示gif这样的动态图片也是没问题的。还是应用差不多的代码,只是将内容变成指定背景为图片。下面是一个例子: