Firebug是一个Firefox插件,是Web开发的利器。从此处下载。工具用好了能大大提高开发效率。下面介绍一些用法:
查看编辑HTML和CSS,查看DOM
两个方法,一个是在新窗口中打开Firebug,然后鼠标移动到Firebug某元素,页面某元素会相应高亮,右边显示对应CSS,DOM和布局等。第二个方法是在页面某元素点击右键“查看元素”,直接打开Firebug并定位到该元素。
监测网站和网页访问速度和时间消耗占比
首先要打开“网络”控制台,
点击“网络”,监测和分析网站和网页的访问速度和时间占比。也能看到装载的所有资源(Css, JS, 图片,Flash等),点击相应的过滤器可以分类;或者使用搜索。
查看函数的执行效率
启用控制台,点击“概况”开始收集,再次点击停止。
另外在该窗口下部,输入JS语句回车即可执行,很方便。
查看XMLHttpRequest
这对调试AJAX是很有帮助的。打开控制台,如果是AJAX程序,自动会选择监控XMLHttpRequest。
调试页面上JS
调试外部JS
一种方法是先打开控制台,点击里面的JS打开,然后设置断点,继续运行网站会停在断点处:
设置断点并调试外部JavaScript:
其它方法:使用基于Firebug的Yslow扩展,或者安装另一个Firefox插件:JavaScript Debugger。
Console中运行一段JS代码
使用console,还可以测试一段代码或者函数的执行时间,点击命令行最右侧的红色按钮切换到命令行多行模式:
代码输入完后点下方的“运行”。
输出对象结构:console.dir :
按缩进格式输出一段HTML结点的内容: console.dirxml(anyDOMNode) :
分组输出内容: console.group() – console.groupEnd()
记录某一个时间戳: console.time(slugName) - console.timeEnd(slugName)
视频:Chrome开发人员工具的12个用法
参考: