Firebug使用相关

Firebug是网页浏览器Firefox下的一款开发类插件，集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。在日常使用中常会同时安装其扩展Yslow来一并对网站进行调试。同时为了兼容其它浏览器，还开发有Firebug Lite，功能略弱于Firebug。 安装完后要开启Firebug,可点击浏览器工具栏中的图标，也可按下F12开启，关闭方法与开启方法相同，另外按下Ctrl+F12将会在弹出的窗口中开启Firebug的调试窗口。调试窗口中主要包含控制台标签、HTML标签、CSS标签、脚本标签、DOM标签、网络标签和Cookies标签，可通过点击调试窗口左上角的，然后在可见面板中勾选或取消勾选来显示或隐藏相应的标签，调试窗口右上侧还有搜索窗口，能过搜索方便找到所需查看的内容。 控制台标签为JS命令行操作，显示JS错误信息、提示信息和日志信息，可在右侧窗口键入代码； HTML标签显示页面的所有HTML源代码，可能过直接修改代码的方式查看修改后的结果， 只需要所需修改代码上双击或右击在弹出窗口中选择”编辑HTML…”即可进行编辑，而要定位到页面上相应元素的代码，可通过在相应页面元素上右击选择“使用Firebug查看元素”，也可点击小甲虫右侧的图标即“点击查看页面中的元素”图标（快捷键Ctrl+Shift+C）然后直接点击需查看的元素来定位到相对应的代码； CSS标签下可编辑页面的CSS源代码，如同对HTML的修改一样，可通过双击来对样式来进行修改，对于字体大小等数值还可以通过方向键↑和↓来进行更改，这种修改每次会调整1个单位，而按下Ctrl键加方向键每次调整0.1个单位，按下Shift键加方向键每次调整10个单位； 脚本标签中显示页面的脚本，也可在该标签对脚本进行调试； DOM标签显示所有的页面对象和DOM属性； 网络标签显示页面各元素的下载情况和所花费的时间，以及HTTP请求和头信息； Cookies标签显示页面请求的Cookies,可对页面中的cookie进行查看和修改。 JavaScript控制台 Firebug的控制台可以很方便地对JavaScript代码进行调试，控制台内置了很多命令方便对JS进行调试，如console.log()命令可以打印出日志,以下代码可以输出日志结果2014年8月31日 console.log(“%d年%d月%d日”,2014,8,31); 其中的%d称为占位符，代表数字，此外浮点数的占位符为%f,字符串占位符为%s,对象的占位符为%o,输出的内容也可以为变量，如console.log(i),除日志输出外还有信息输出console.info()，debug输出console.debug()，警告输出console.warn()，错误输出console.error()。对输出的内容可进行分组，使用console.group()命令： console.group(“group1”); console.log(“101”); console.log(“102”); console.log(“103”); console.groupEnd(); console.group(“group2”); console.log(“201”); console.log(“202”); console.log(“203”); console.groupEnd(); 控制台中还有用于调试JS代码运行速度的命令console.time(),使用示例如下： console.time(“test”); for(var i=1; i<10000; i++){ } console.timeEnd(“test”); 控制台还包含其它命令，可通过console.dir(console)来查看console对象的所有命令和方法,这些命令可以写在文件中，也可以在控制台右侧的多行调试框中输入并点击运行来进行查看

Tags: DOM, Firebug, html, JavaScript