FireBug是一个用于网站前端的开发工具,它是Firefox浏览器的一个拓展插件,它可以调试JavaScript、查看DOM、分析CSS、监控网络流量以及进行Ajax交互等。提供了几乎前端开发需要的全部功能。
FireBug总共包含6个面板,分别是控制台,HTML,CSS,脚本,DOM和网络
1. 控制台面板
控制台面板用于记录日志,概览,错误提示和执行命令行,同时也用于Ajax的调试。
FireBug提供如下几个常用的记录日志的函数。
console.log:简单的记录日志。
console.debug:记录调试信息,并且附上行号的超链接。
console.error:在消息前面显示错误图标,并且附上行号的超链接。
console.info:在消息前面显示信息图标,并且附上行号的超链接。
console.warn:在消息前面显示警告图标,并且附上行号的超链接。
在html的script里面输入如下代码,例子如下:
<script tye="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 warn message'); </script>
执行代码后在FireBug控制台看到的效果如下:
控制台面板内的子菜单:
分别是清除,保持,概况,全部,错误,警告,消息,调试信息,Cookies等。
'清除'用于清除控制台中的内容。'保持'则是把控制台中的内容保存,即使刷新了还存在。'所有'则是显示全部的信息。后面的错误,警告,消息,调试信息菜单则是对所有进行了一个分类。'概况'菜单用于查看函数的性能。
控制台面板也可以用于Ajax调试,在一定程度上可以取代网络面板。
2. HTML面板
(1). 查看和修改HTML代码。
(2). 查看(Inspect)。
(3). 查看DOM中被脚本更改的部分。
(4). 查看和修改元素的样式。
(5). 查看DOM的信息。
3. CSS面板
CSS面板与HTML右侧的面板功能相似,但不如HTML面板灵活,故而用的较少。
CSS面板特有的一个功能是可以分别详细查看页面中内嵌以及动态导入的样式。
4. 脚本面板
脚本面板不仅可以查看页面内的脚本,而且还具有强大的调试功能。
在脚本面板的右侧有'监控','堆栈'和'断点'3个面板,利用FireBug提供的设置断点功能可以很方便的调试程序。
5. DOM面板
DOM面板与HTML右侧的面板功能相似,但不如HTML面板灵活,故而用的较少。
6. 网络面板
网络面板可以监测每一项元素的加载情况,包括脚本,图片等的大小以及加载用时等,对于页面优化有着极其重要的意义。此外顶部还可以分类查看元素的HTML,CSS,JS等的加载情况,使分析更加灵活。