EMLOG学院

火浏览器狐插件 -(Firebug)

2014-5-7    分类: 常用工具    2559次浏览

购买 (¥)

很多EMLOG模板新手开发者开发模板的时候都是从仿制模板开始,这也是技术进步最快的方法。然而,要仿制一个模板首先需要审查一遍目标网站的源文件与CSS,因为我们要搞清楚目标站的布局,而最简单的方法就是查看源文件了,还有一部分开发者直接先保存原网页然后去修改。其实这种方法也行,只是效率无法提高。

这里小编给大家推荐一套EMLOG模板开发工具的强强组合,(火狐浏览器 + firebug + EmEditor),首先是是浏览器,当然要一款高大上的浏览器了。小编推荐火狐浏览器,根据小编的调查,开发者们使用的最多的浏览器应属火狐和谷歌了。但是小编觉得谷歌浏览器在审查元素的时候不好用,或者是没有用习惯吧。第二就是今天说的主角“firebug”。第三个当然是最根本的东西了,emeditor代码编辑器,一款用的得心应手的编辑器能大大提高我们的敲代码效率。

先来给大家介绍一下firebug。Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等,但FireBug最吸引我的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能还很强大,比如html,css,dom的查看与调试,网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。再有就是其为开源的软件。

CSS调试

Firebug的CSS调试器是专为网页设计师们量身定做的。
如今的网页设计言必称div+css,如果你是用table套出来的HTML页面,就得按这规矩重构一遍,否则显得 你不够时髦!用div做出来的页面的确能精简HTML代码,HTML标签减肥的结果就是CSS样式表的编写成了页面制作的重头戏。Firebug的CSS 查看器不仅自下向上列出每一个CSS样式表的从属继承关系,还列出了每一个样式在哪个样式文件中定义。你可以在这个查看器中直接添加、修改、删除一些 CSS样式表属性,并在当前页面中直接看到修改后的结果。
一个典型的应用就是页面中的一个区块位置显得有些不太恰当,它需要挪动几个象素。这时候用CSS调试工具可以轻易编辑它的位置——你可以根据需要随意挪动象素。
如图4中正在修改一个区块的背景色。

提示:如果你正在学习CSS样式表的应用,但是总记不住常用的样式表有哪些值,可以尝试在CSS调试器中选中一个样式表属性,然后用上下方向键来改变它的值,它会把可能的值一个个遍历给你看。

查看和修改HTML

第一次看到Firebug强大的HTML代码查看器,就觉得它与众不同,相比于Firefox自带的HTML查看器,它的功能强大了许多。 HTML
首先你看到的是已经经过格式化的HTML代码,它有清晰的层次,你能够方便地分辨出每一个标签之间的从属并行关系,标签的折叠功能能够帮助你集中精力分析代码。源代码上方还标记出了DOM的层次,如图3所示,
它清楚地列出了一个html元素的parent、child以及root元素,配合Firebug自带的CSS查看器使用,会给div+css页面分析编写带来很大的好处。你还可以在HTML查看器中直接修改HTML源代码,并在浏览器中第一时间看到修改后的效果,光凭这一点就会让许多页面设计师死心塌地地成为Firebug的粉丝了。
有时候页面中的javascript会根据用户的动作如鼠标的onmouseover来动态改变一些HTML元素的样式表或背景色,HTML查看器会将页面上改变的内容也抓下来,并以黄色高亮标记,让网页的暗箱操作彻底成为历史。

利用Inspect检查功能,我们还可以用鼠标在页面中直接选择一些区块,查看相应的HTML源代码和CSS样式表,真正的做到所见即所得,如果你使用了外部编辑器修改了当前网页,可以点击Firebug的reload图片重新载入网页,它会继续跟踪你之前用Inspect选中的区块,方便调试。

安装Firebug

需要安装firebug毫无疑问首先需要一款火狐浏览器,然后找到菜单栏下的附加组件,并在搜索框下输入firebug搜索后安装即可,安装成功后打开任意网页按下启动快捷键F12即可调出firebug的界面了。怎么样?介绍了这么多大家是不是迫不及待的要试一下了?

222.jpg

本文作者:陈子文

欢迎访问 EMLOG学院,本站致力于为您分享emlog优秀模板与常用函数。如果有任何疑问欢迎与我联系

版权所有:《EMLOG学院》 => 《火浏览器狐插件 -(Firebug)
本文地址:http://vps.lantk.com/?post=167
除非注明,文章均为 《EMLOG学院》 原创,欢迎转载!转载请注明本文地址,谢谢。

发表评论 您已登陆为:,注销,管理

...