0

如何在iPad或iPhone上使用Firebug进行调试

Posted by Alan on October 15, 2015 in Coding |

实际开发中尤其是网页开发中常常需要在iPhone或iPad的Safari浏览器中进行调试,很多人可能都习惯了使用Firebug来对网页进行调试,那么在iPhone或iPad上如何使用Firebug呢?下面就让我们来看一下一种实现的方法。 1.在Safari中打开任意网页并加入收藏夹(Bookmark),然后在收藏夹中找到该网站对应图标,长按点击Edit,将标题修改为firebug,网址部分改为如下代码并保存: 此时再打开任意网站如百度,然后点击收藏夹中刚刚配置过的图标,就会在页面下方出现熟悉的Firebug调试窗口了,是不是非常方便?

Tags: , , ,

0

Firebug Syntax Error报错

Posted by Alan on August 4, 2015 in Coding |

使用Firebug检测页面时会出现类似下面这样的报错 比如下面截图这样,你会发现DOCTYPE的申明被截断,但申明是按照W3C的标准进行填写的 究其原因,原来是页面代码中有一段空的JS引用代码,类似下面的代码段,去除掉再检测就会恢复正常了

Tags: ,

0

Firebug使用相关

Posted by Alan on August 17, 2014 in HTML5&CSS3, 电商经验 |

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: , , ,

Copyright © 2012-2018 记录点滴生活 | Alan Hou的个人博客 All rights reserved.