控制台标签概览
这个标签主要用来打印日志之用。它也可以在进行javascript调试的时候当作命令行窗口使用(类似Microsoft Visual Studio中的立即窗口(immediate window))。而且使用它的“概览”这个子服务,还可以纪录javascript代码执行时候的一些有用的信息(如方法调用的次数,执行的时间等)。
本部分内容将涵盖下列内容~
·在firebug中使用日志
·如何将日志或者其他信息分组
·console.dir 和 console.dirxml
·断言(console.assert() )
·跟踪(console.trace())
·Timing()
·Javascript Profiler
#1.在firebug中使用日志
Firebug允许我们在控制台标签中使用日志。因此,从此以后您可以告别alert(’hello world‘)或者document.write(’hello world‘)的时代了。
在firebug中有5中日志类型。
·console.log : 打印信息(不带任何图标)
·console.debug:在控制台上打印信息,而且还包括一个超链接指向该方法被调用的那一行的地址(最新版本似乎已经没有超链接了)。
·console.error():打印信息的形式同console.debug,但是带有
图标。
·console.info():打印信息的形式同console.debug,但是带有
图标。
·console.warn():打印信息的形式同console.debug,但是带有
图标。
例子代码~
·创建一个新的html文件。
·将下列代码粘贴到<body>标签内。
<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>
结果如下图所示。
字符串替代法则:
在console.log, console.info, console.debug, console.warn 和 console.error 可以使用字符串替代法则,这个类似与C/C++的字符串替代法则。
%s |
字符串 |
%d, %i |
整数 (暂时不支持numeric formatting) |
%f |
浮点数 (暂时不支持numeric formatting) |
%o |
对象引用 |
例子~
注意:这个例子我只使用console.log(),但是其他几个方法( console.info, console.debug, console.warn and console.error )其实也都是可以的。
·将上个例子中script标签内的内容都删除。
·将下列代码粘贴到body标签内。
<script language="javascript" type="text/javascript">
//This is for normal string substitution " %s, %d, %i, %f".
console.log("My Name is %s. My Date of Birth is %dth %s, %i. My height is %f m.", "Nicolas Cage", 7, 'January',
1964, 1.8542);
function Foo(){
this.LeftHand = function(){
return "Left Hand";
}
this.RightHand = function(){
return "Right Hand";
}
}
//This is for object "%o".
var objFoo = new Foo();
console.log('This is %o of Foo class.', objFoo);
</script>
如果你在日志中使用了%s,在控制台上将会显示一个绿色的“object”超链接,点击这个超链接将会跳转到DOM标签。因此你如果点击了上图中第二行的那个“object”超链接,你将会看到所有该对象的属性列表。
#2.分组
firebug允许我们将各种日志信息进行分组。如果你代码中有相当多的日志,你可以考虑使用这个分组功能。
例子~
<script language="javascript" type="text/javascript">
var groupname = 'group1';
console.group("message group : %s " , groupname);
console.log("log message 1 from %s", groupname);
console.log("log message 2 from %s", groupname);
console.log("log message 3 from %s", groupname);
console.groupEnd();
groupname = 'group2';
console.group("message group : %s " , groupname);
console.log("log message 1 from %s", groupname);
var subgroupname = 'subgroup1';
console.group("message group : %s " , subgroupname);
console.log("log message 1 from %s", subgroupname);
console.log("log message 2 from %s", subgroupname);
console.log("log message 3 from %s", subgroupname);
console.groupEnd();
console.log("log message 3 from %s", groupname);
console.groupEnd();
</script>
#3. console.dir 和 console.dirxml
·console.dir:
得到给定对象的所有方法和属性。下列例子中,我们调用console.dir()得到car对象的Model (属性) 和 getManufactor (方法)。
·console.xmldir():
打印出html元素的xml树。
<table id="tbl1" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
//Create a class
function Car(){
this.Model = "Old Model";
this.getManufactor = new function(){
return "Toyota";
}
}
//Create a object
var objCar = new Car();
//Firebug
console.dir(objCar);
console.dirxml(document.getElementById('tbl1'));
</script>
输出结果~
#4. 断言 ( console.assert() )
通过console.assert()可以可以判断一个表达式是否正确。如果表达式是错误的,将会在控制台上打印出信息并抛出异常。(似乎在firebug1.2.1中有问题,我已经发信去问firebug开发小组了)
#5. Tracing ( console.trace() )
很遗憾,在firebug1.2.1中似乎支持的也不好,我已发信去问:)
#6. Timing ( Measuring the time of your code)
很遗憾,在firebug1.2.1中似乎支持的也不好,我已发信去问:)
#7. Javascript Profiler
可以通过点击控制台标签中的“概况”按钮启动此功能,通过它我们可以对javascript的性能进行优化。关于这方面的细节将在接下来的章节中详细讲述。
总结:
如有什么问题,请在我博客上留言
相关推荐
在压缩包内的文件中,"Readme-说明.htm"通常包含有关软件的详细信息,如安装指南、使用方法、更新日志或注意事项等。它是用户了解软件功能和操作的关键文档。而"firebug-1.10.0a9.xpi"是Firefox插件的扩展文件格式,...
在提供的压缩包中,"Readme-说明.htm"文件很可能是关于如何安装和使用最新版FireBug的详细指南,包括可能的系统需求、安装步骤和使用教程等内容。而"firebug-1.6.1.xpi"则是FireBug插件的安装文件,用户可以直接在...
`Readme-说明.htm`文件通常包含关于如何安装和使用Firebug的详细指南,包括任何需要注意的事项和更新日志。阅读这个文件可以帮助新用户快速上手,并了解可能遇到的问题及其解决方案。 总的来说,Firebug是Web开发者...
9. **插件扩展**:Firebug拥有丰富的第三方插件,如WebConsole和Console2,这些插件提供了更多的功能,如增强的日志记录和更强大的控制台。 10. **文档支持**:随同发布的"Readme-说明.htm"文件可能包含了关于如何...
- **CSS面板**:显示页面中使用的CSS样式,并允许用户实时调整这些样式。 - **Script面板**:提供JavaScript代码调试工具,包括断点设置、单步执行等功能。 - **Console面板**:显示浏览器运行时的各种日志信息,...
至于"新建文本文档.txt",这通常是一个普通的文本文件,可能包含有关Firefox或Firebug的使用说明、安装指南或其他相关信息。在实际使用中,这样的文本文件可能会提供额外的上下文或者帮助文档,便于用户理解和操作。...
- **日志区域**: 显示执行过程中产生的日志信息。 - **关键设置**: - 在 Options 中选择正确的格式设置,确保录制的脚本能够正确转换成所需的语言格式。 - **使用示例**: - 启动录制功能。 - 执行所需的操作,...
- **捕获异常**:可以在爬虫中捕获这些异常,进行错误处理或记录日志。 #### 四、内置服务 ##### 4.1 Logging (日志) - **记录日志**:Scrapy提供了丰富的日志记录功能,便于调试和监控爬虫状态。 - **日志级别**:...
- **使用Firebug进行抓取**:Firebug是一个流行的浏览器插件,可以辅助调试抓取过程。 - 示例:使用Firebug来调试XPath选择器。 - **调试内存泄露**:长时间运行的爬虫可能会遇到内存泄露的问题。 - 示例:查找...
- **处理**: 在 Spider 中可以通过处理 Requests 和 Responses 来控制爬虫的行为。 ##### 3.10 Link Extractors - **定义**: Link Extractors 用于从网页中提取链接。 - **使用**: 可以通过 Link Extractors 自动...
- **Ubuntu软件包**:介绍如何在Ubuntu系统中使用软件包管理器安装Scrapy及相关依赖。 - **部署爬虫**:讲解如何将Scrapy爬虫部署到生产环境,包括自动化部署流程、持续集成等。 - **自动限速扩展**:AutoThrottle是...
- **使用Firebug进行爬取**:展示了如何利用Firebug插件来调试爬虫。 - **调试内存泄漏**:提供了诊断和解决内存泄漏问题的方法。 - **下载项目图片**:讲解了如何自动下载网页中的图片。 - **Ubuntu软件包**:提到...
- **常见问题解答(Frequently Asked Questions)**:解答用户在使用Scrapy过程中遇到的常见问题。 - **调试爬虫(Debugging Spiders)**:介绍如何调试爬虫代码,解决运行过程中出现的问题。 - **爬虫合约(Spiders ...
- **信号量**:介绍 Scrapy 中使用的信号机制,可用于触发特定事件。 - **异常处理**:列举 Scrapy 中可能抛出的异常类型,帮助开发者编写健壮的应用程序。 - **Item 导出器**:支持将 Item 数据导出为不同的格式,...
- **使用Firebug进行爬取**:介绍了Firebug插件在爬虫开发中的应用。 - **内存泄漏调试**:提供了调试内存泄漏的方法。 - **文件和图像的下载及处理**:讲解了如何下载文件和图片,并进行后续处理。 - **Ubuntu...
- **Django Item**:如何在Scrapy中使用Django模型。 #### 扩展Scrapy 除了以上基础功能外,Scrapy还提供了许多扩展点,允许开发者根据自己的需求定制和扩展Scrapy的功能: - **架构概览**:解释了Scrapy内部的...