本文主要是介绍不得不说的Firebug(二):Firebug——控制台(Console),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
本篇博文打算总结一下Firebug中的控制台这一个Tab,控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息。下面对其进行介绍,希望对大家有所帮助,有错误之处也希望大家能指出来。
一、显示信息的命令
在调试JavaScript的过程中,我们以往可能很多人会用alert(‘’);或者document.write(‘’);来输出一些信息,但是现在用Firebug的一个内置对象console的一些方法会更加直观地显示信息。Console()有以下几种显示信息的方法:
1、console.log():不带图标的普通信息。
2、console.debug():不带图标除错信息。
3、console.error():带图标的错误提示。
4、console.info():带图标的一般信息。
5、console.warn();带图标的警告提示。
示例:
<script language="javascript" type="text/javascript">console.log('This is log message');console.debug('This is debug message');console.error('This is error message');console.info('This is info message');console.warn('This is warning message');</script>
①、将上述代码整一个拷贝进HTML文件里。命名为test.html,打开这个HTML文件可以看到控制台有以下记录:
可以看到,不同性质的信息前面有不同的图标,并且每条信息后面都有超级链接,点击后跳转到网页源码的相应行。对于错误的信息,还会显示错误在哪一行代码,并且代码有超链接,点击可直接定位到文件里的那行代码中。
②、将以上中间的JavaScript代码片段拷贝到debug调试窗口
③、将以上中间的JavaScript代码片段拷贝到debug调试窗口
也可以点击编辑器右边按钮切换成按回车键逐行输入的命令行,切换成按回车键逐行输入的命令行
二、占位符
console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。
%s | 字符串 |
%d, %i | 整型 |
%f | 浮点型 |
%O | 对象 |
%o | Dom元素 |
%c | CSS样式,注意不是字符 |
示例:
<script language="javascript" type="text/javascript">console.log("今天是%s%i年%d月%d日,温度为%f。", "公元", 2014, 7, 31, 31.5);function Dog(){this.BigDog = function(){return "a Big Dog";}this.SmallDog = function(){return "a Small Dog";}}var dog = new Dog();console.log('This is a %o !', dog);</script>
①、将上述代码整一个拷贝进HTML文件里。命名为test.html,打开这个HTML文件可以看到控制台有以下记录:
②、将以上中间的Javascript代码片段拷贝到debug调试窗口运行后控制台的效果一样。
三、分组显示
如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()。
示例:
<script language="javascript" type
这篇关于不得不说的Firebug(二):Firebug——控制台(Console)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!