FireBug使用总结
2015-06-22 18:09
363 查看
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里面输入如下代码,例子如下:
执行代码后在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等的加载情况,使分析更加灵活。
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等的加载情况,使分析更加灵活。
相关文章推荐
- 《你的灯还亮着吗》读后感3
- Magento订单取消的时候还原优惠券的使用次数(Single Coupon marked as used when payment pending)
- 【最大流】【HDU2883】【kebab】
- 【最大流】【HDU2883】【kebab】
- 属性readwrite,readonly,assign,retain,copy,nonatomic
- Autoconf/Automake工具简介
- 一个线程写完数据后,另外三个线程按顺序读取
- [转]Loadrunner随机生成15位数字串
- JAVA的Random类
- 《大道至简》3
- tcp异常断开的重连解决方法
- LZMA C# SDK 结合 UPK 打包压缩 多文件夹 Unity3d实例
- 搬移网站程序到不同服务器的操作流程
- Quagga的no ospf_interface问题
- Unity+NGUI打造网络图片异步加载和本地缓存工具(一)
- 《你的灯还亮着吗》读后感2
- 黑马程序员--Java学习日记之eclipse开发工具的熟练使用,磨刀不误砍柴工!
- Zynq 在Ubuntu上搭建编译环境
- 关于java的JDK的安装
- leetcode - Next Permutation