//Firebug的Console的用法
//Console还提供了通过命令行方式来调试Javascript的方法
//Console的用法
/*1、Firefox的日志记录(Logging in Firefox)。
通过Console的记录方法,我们可以不再使用烦人的alert或者document.write方法来进行调试。
Firebug提供了五种日志的类型:
console.log : 记录一行信息,无任何图标提示;
console.debug : 记录一行信息,带超链接,可以链接到语句调用的地方;
console.error() : 向控制台中写入错误信息,带错误图标显示和高亮代码链接;
console.info() : 向控制台中写入提示信息,带信息图标显示和高亮代码链接;
console.warn() : 向控制台中写入警告信息,带警告图标显示和高亮代码链接;
consle打印字符串支持字符串替换,使用起来就像c里面的printf(“ % s”, a), 支持的类型包括:
% s string,字符串 % d, % i 整型 % f 浮点 % o 对象
如果使用 % o的话,对象就会用绿色的超链接表示出来,单击后会将你带到DOM视图。
2、分组(Grouping)。
如果某一类的信息特别多时,分组就有利于逻辑的划分。
使用上很简单,参见代码。*/
function consoleGroup() {
var groupname = “Group 1″;
console.group(“Message group % s”, groupname);
console.log(“This is the 1 message in % s”, groupname);
console.log(“This is the 2 message in % s”, groupname);
console.log(“This is the 3 message in % s”, groupname);
console.groupEnd();
goupname = “Group 2″;
console.group(“Message group % s”, goupname);
console.log(“This is the 1 message in % s”, goupname);
var subgroupname = “Sub group 1″;
console.group(“Message group % s”, subgroupname);
console.log(“This is the 1 message in % s”, subgroupname);
console.log(“This is the 2 message in % s”, subgroupname);
console.log(“This is the 3 message in % s”, subgroupname);
console.groupEnd();
console.log(“This is the 2 message in % s”, goupname);
console.groupEnd();
}
/*
3、console.dir和console.dirxml
console.dir可以将一个对象的所有方法和属性打印出来,这个方法无疑是非常有用的,我们不再需要object.toString这样的方 法支持了,只要有firebug,查看对象也变得很轻松同时,我们也可以将页面中的元素作为一个对象打印出来,但是你要小心,因为这将输出众多的信息,可 能你会迷失在繁杂的信息中而找不到自己需要的条目。我们可以通过分组将这些大量的信息放入一个分组中,这样可以在逻辑上更清楚一些。*/
function consoleDir() {
function Car() {
this.Model = “Old Model”;
this.getManu = function () {
return “Toyota”;
}
}
var objCar = new Car();
console.dir(objCar);
console.dir(zoo);
var groupname = “Css Style”;
console.group(“The button Style”, groupname);
console.dir(document.getElementById(‘consoledir’).style, groupname);
console.groupEnd();
}
//console.dirxml 打印出HTML元素的XML表示形式.
//4、断言(console.assert())。
console.assert()可以用来判断一个表达式是否正确,如果错误,他就会打印错误信息在控制台窗口中。
5、追踪(console.trace())。
/*console.trace()是一个非常有趣的功能。我们先来看看官方的解释:打印Javascript执行时刻的堆栈追踪。
这个函数可以打印出程序执行时从起点到终点的路径信息。
比如如果我们想知道某个函数是何时和如何被执行的,我们将console.trace()放在这个函数中,我们就能够的看到这个函数被执行的路径。
这个函数在调试其他人的源代码时非常有用。*/
6、计时(Timing)。
//console.time(timeName)可以用来计时,这个在我们需要知道代码执行效率的时候特别有用,就不用自己造轮子了。
function consoleTime() {
var timeName = “timer1″;
console.time(timeName);
var a = 0;
for (var i = 0; i < 100; i++) {
for (var j = 0; j < 100; j++) {
// console.log(‘Hello world’);
a = a + 1;
}
}
console.log(“a = % d”, a);
console.timeEnd(timeName);
}
7、Javascript分析器(Javascript Profiler)。
/*我们可以通过代码console.profile(‘profileName’)或者单击Profiler标签来进行Javascript代码执行 的分析。这个功能有点类似于console.time(),可以帮助我们评估代码的表现,但是能够提供比console.time()更详细的信息。
有三种方法可以调用Javascript profiler。一种是在代码中写入分析脚本,一种是单击profile标签,最后还可以在命令行下输入命令来执行。
执行后,可以看到详细的输出结果,下面对各项进行一些说明:
Function Column:显示调用的函数名称; Call Column:显示调用次数; Percent Column:显示消耗的时间比; Own Time:显示函数内部语句执行的时间,不包括调用其他函数的时间; Time Column:显示函数从开始到结束的执行时间; Avg Column:平均时间。Avg = Own / Call;
Min & Max Column:显示最小和最大时间; File Column:函数所在的文件;*/
8、其他的一些选项。
/*在Console Tab的最右侧有一个Options的选项,在这里可以自己定义需要显示的错误,其内容很好理解,这里就不多说了。有一点就是Firebug1.3以后, 多了Show Chrome Errors、Show Chrome Message等几个选项,这几个选项还没有验证过其具体的作用,哪位知道的可以共享一下。*/
分享到:
相关推荐
除了上述console对象提供的方法外,Firebug的Console还支持一些快捷命令和操作,例如: - `console.clear()`:清空控制台输出。 - `$(selector)` 和 `$$('selector')`:分别返回第一个匹配的元素和所有匹配的元素...
下面我们将详细探讨FireBug的使用方法及其核心功能。 **1. HTML查看与编辑** FireBug允许开发者实时查看页面的HTML结构。通过点击HTML面板,可以逐行浏览和编辑元素,实时查看更改的效果。这对于调整布局、查找元素...
以下是对Firebug使用方法的详细介绍: 1. **安装Firebug** - 首先确保已经安装了Firefox浏览器。如果没有,需前往Firefox官网下载并安装。 - 打开Firefox,进入"工具"菜单,选择"附加软件",然后点击"获取扩展"。...
Firebug会在Script面板底部的Console区域显示JavaScript运行时的错误和警告信息,帮助开发者定位问题所在。 5. **性能分析** 使用Firebug的Profiler功能,你可以分析JavaScript函数的执行时间,找出代码中的性能...
FireBug是一款经典的...总的来说,FireBug是Web开发史上的一款里程碑式工具,它的出现极大地推动了前端开发的进步,而了解和掌握其使用方法,对于任何想要深入JavaScript调试的开发者来说都是一项宝贵的知识。
【FireBug使用方法】 Firebug是一款由Joe Hewitt开发的集成在Firefox浏览器中的强大Web开发工具,它使得开发者能够实时地编辑、调试和监控任何网页的CSS、HTML和JavaScript。对于JavaScript的调试,特别是开发AJAX...
4. 控制台输出:使用`console.log()`等方法在控制台打印信息,用于跟踪代码执行过程。 四、最佳实践 1. 利用Firebug分析性能:通过查看网络请求和CPU使用情况,优化代码以提高页面加载速度。 2. 使用Firebug学习...
Firebug提供了丰富的console对象方法,如`console.debug()`, `console.info()`, `console.warning()`和`console.error()`,它们帮助开发者追踪代码中的各种信息。 8. **AJAX调试** Firebug对于AJAX请求的追踪非常...
除了`console.log`外,Firebug还提供了其他几种log方法,如: - **console.info**:用于输出信息性消息。 - 示例:`console.info("Initialization complete.");` - **console.warn**:用于输出警告信息。 - 示例...
火狐浏览器(Firefox)是一款由Mozilla开发的开源网络浏览器,以其强大的安全性、隐私保护和高度可定制性而...虽然现在我们不再需要单独安装Firebug,但了解其历史和使用方法,对于理解现代Web开发工具有着深远的影响。
【Firebug使用指南】 Firebug是一款强大的Web开发工具,它为Firefox浏览器提供了深入的调试功能,包括HTML、CSS、JavaScript和网络性能分析等。...熟练掌握其使用方法,对于网页设计和开发来说至关重要。
在本文中,我们将深入探讨Firebug的各项主要功能及其使用方法。 一、HTML查看与编辑 1. HTML元素检查:在网页上点击右键,选择“检查元素”(或使用快捷键F12),Firebug会高亮显示当前鼠标位置对应的HTML元素。 2....
JavaScript是Web开发中的核心语言,而Firebug是Firefox浏览器中的一款强大插件,专为开发者设计,用于调试JavaScript、查看CSS、操作DOM...同时,了解和掌握使用Firebug的方法,对于提升JavaScript开发技能至关重要。
6. 原生Console:Firebug提供了JavaScript控制台,可以输出日志信息,接收和处理AJAX请求,以及执行自定义的JavaScript代码,便于开发者测试和调试。 7. 性能分析:通过Timeline面板,Firebug可以记录页面加载和...
- **格式化对象输出**:Firebug允许以特定格式输出对象,如使用`console.info("%d", 5)`输出数字,或`console.info("%.o", [1, 2, 3])`输出数组。 #### 三、Firebug与传统调试方法对比 传统的JavaScript调试方法...
开发者可以通过console.log()等方法在代码中打印信息,方便调试。 **7. 插件兼容性** 尽管Firefox在后续版本中集成了类似的开发者工具(Firefox Developer Tools),但Firebug作为独立插件,依然有一部分开发者习惯...
下面将详细介绍Firebug的安装、使用方法以及主要功能。 **一、安装Firebug** 安装Firebug的过程非常简单。首先,你需要前往Firebug的官方下载页面或Mozilla的Firefox Add-ons站点获取最新版本的插件。下载完成后,...