下面为您介绍在网页设计制作中经常使用到的火狐浏览器插件工具:
7sI:N_2k d051Testing软件测试网GL#tx-Md/M{1.Firebug51Testing软件测试网n.A0SL|S*zq51Testing软件测试网5_9VKT
J-kFirebug是开发人员们钟爱火狐浏览器的一个重要原因,Firebug是火狐浏览器上一个集成式的强大调试环境,很多调试应用插件都
必须基于Firebug平台,包括下面会介绍到了一些
Web测试和调试工具,所以Firebug可以说是每一个Web设计开发人员必备的工具。
51Testing软件测试网.V2vX#Z*H+db3u+I*[!X4YJ)a
V}0Firebug – Firefox
插件安装
eRb9D(xj0 zAHc;C FJZ0按照提示安装到Firefox中之后,在浏览器底部状态栏就可以看到Firebug的图标,点击之后弹出firebug调试窗口,这里面有除了Firebug自身的工具外,
其他选择性安装的Firebug平台插件的调试入口,比如Page
Speed等。
KY.f ^v(NTp
A051Testing软件测试网uRl$P~'`TSH Q(H2.Page Speed7M1D-i;|IWRZ051Testing软件测试网)P0j7R#sxk:|uv*vGoogle于今年4月确认将网页加载速度作为排名因素之后,站长们对页面性能更加重视。其实无论是对SEO而言,还是对用户体验而言,提高页面的加载速度都相当重要。Google也提供了这枚检测页面加载速度的工具。
N!@gTA7o#u
m07HN'GtX'Q,Es9Z h0Page
Speed插件是基于firebug平台的火狐插件,它为每一个页面进行加载速度评分,不仅如此,更提供了优化建议,因此,有改进网页加载性能的页面优化人员,这个工具是非常的必须。
51Testing软件测试网G0A-jO!KA)PX.]/ip(|:kmw0Page
Speed for firefox– Google官方插件安装7?}
|8ZU n0U8p(`rP{]0安装以后,Page
Speed就会出现在Firebug窗口中,可以为浏览器的当前页面检测加载性能,点击Page Speed界面中的“Analyze
Performance”按钮执行分析,Page
Speed会为分析的页面进行评分,满分100分,评分当然越高越好,不过优化的目标应该是达到85分以上。
51Testing软件测试网R$C$rjTAgN7nm+a!J03.Web Developer1i(LB{q"sG,K t+L0(O5Y$R8u.L!A0从这个工具名称应该能够大概猜到它的用途,没错,这是一个集众多页面
测试功能于一身的强大火狐插件,能够查看CSS错误和Cookies
信息,设置突出显示表格、Heading、图片URL等几乎所有页面元素,这对页面调试非常有用,尤其当页面结构非常复杂的时候,这些工具能够让你快速找
到特定元素的分布。
|(\'t qv
X)m
a4}2G$t051Testing软件测试网oD
F*_l小陆平时很喜欢用这个工具来查找页面的实效图片,因为在火狐里,实效的图片不会像IE那些显示小红叉。
7z/i0gTH0
Y{kx[Zc
A0Web Developer –
Firefox插件安装Nr`$Gz\(Ob051Testing软件测试网v8?4nxhU$s安装以后作为一个工具栏出现在浏览器中,如下图:
;Xd*_+F:C8N/Ea00}LeBJ!zT04.HTML ValidatorU q|_B051Testing软件测试网%}h7d@6eiP$aT网页符合W3C标准十分重要,一方面是为了让页面能够跨浏览器兼容,另一方面也是为了让搜索引擎能够顺利的抓取和理解你的页面。所有让页
面通过W3C校验是网页优化
工作很重要的一方面,使用HTML
Validator能够高效的检测页面的HTML代码有效性,不仅如此,它还能显示出错的代码位置,并给出错误说明和修改建议,是个非常不错的工具。
51Testing软件测试网:KE%{h
nk2h`
i]7u.k9s| wZ5q"^@0HTML Validator –
Firefox插件安装51Testing软件测试网+A)UA8m$}3{3C51Testing软件测试网A8q2GGcP EBq安装完成以后,在火狐浏览器右下角会出现一个红色的“叉”或者一个绿色的“勾”,分别表示页面无效和有效。如果在你的页面显示的是绿勾,那恭喜你,你的代码非常规范,如果有错也不用着急,双击红叉标志能够显示错误信息,根据提示逐个修改就行。
;}#t.w#e"m9c \H"\051Testing软件测试网l)H(d~XK'D'U6o{另外值得注意的是,HTML代码的有效性还是要以W3C官方的校验为准,小陆在使用此工具过程中发现它的校验规则跟W3C标准有些非常细微的差别,不过大部分时候还是一致,如果不放心,请使用
W3C Markup Validation Service确认验证。
51Testing软件测试网w
`P2q(Q:VGY51Testing软件测试网nGY;o_5.Simple Links Counter51Testing软件测试网7I*?'\,~{&E S
o@.U51Testing软件测试网Kp6|]9J,E)F-p~在网站维护的时候,链接的有效性检测是一个让人头疼的工作,页面中繁多的链接着实让维护难度倍增,可能一次不严谨的批量查找替换让很多链
接出错,这个错误是老板和用户都无法容忍的,所有对于这个问题,尤其要倍加小心。SLC(Simple Links
Counter)能够自动检测页面中的链接是否有效,你能够会说Dreamweaver里也有链接检查,没错,DW自带了链接检查功能,不过DW的检测仅
限于站内链接,对站外链接便无能为力。
51Testing软件测试网xj"r6^#Q:|iy51Testing软件测试网#F z1x?cP除了检测链接有效性,SLC还能显示页面分别有多少站外链接,多少站内链接,以及具体的链接URL地址,对网站不良外链检查也是很方便的。
51Testing软件测试网1`,S5YI r4x
o+X8R
e(L(|2[~no r8eK0Simple
Links Counter – Firefox插件安装51Testing软件测试网&j8?!w7T#B(vbkuT51Testing软件测试网 P| iO_mUM6.X-Ray51Testing软件测试网
RfO5TTU&hx1b&nV.V51Testing软件测试网2r-^V,q;`M? w如果能在浏览器里看到页面内容是被那一些HTML标签所包含,是不是很直观呢,X-Ray就是这样一款工具。普通的一个网页在前端设计师
们眼中,不仅是单纯的文字图片,而是各种网页标签组成的结构图,但这些画面纯粹存在于设计师们的大脑中,X-Ray提供了一个让让它视觉化的方法,尤其是
在浏览别人的网站时尤其有用。
0noG(KQw$Z01wn$q
^U2R I0X-Ray –
Firefox插件安装51Testing软件测试网 l)[d maPGI+v9x
R} m&Y `,v9D-l n0安装以后,浏览器邮件菜单就多了一个“X-Ray”选项。这个工具的缺点是会让页面变得很乱,不过只要研究的页面对象不是太多,还是能够应付得过来。
51Testing软件测试网l;FMRc/Hi51Testing软件测试网8@:`!z9m'Ki7.YSlow51Testing软件测试网8r` i9|N51Testing软件测试网?dMx,`y有一个比Google Page
Speed更强大网页性能优化工具,那就是YSlow,它是由Yahoo提供的页面性能评测和优化工具,YSlow也有页面性能评分,有趣的
是,YSlow评分接近的两个页面,Page
Speed评分却相去甚远,在实际的页面优化时,YSlow的评分并不作为重要参考,因为YSlow提供了其他更多有用的信息。它能够统计一个网页中包含
的所有元素,包括图片文件、CSS文件、JS文件等,而且显示了页面的HTTP请求数,小陆认为这是页面性能优化最重要的指标之一,所以根据YSlow提
供的信息进行针对性的优化,能够产生非常明显的效果。
51Testing软件测试网3@2?_$dB,mG51Testing软件测试网Y#_G.UT&C yfYSlow –
Firefox插件安装51Testing软件测试网*j/jE}$e| fAEi8K51Testing软件测试网t4Q Q$H&oYSlow同样是一个Firebug平台的插件,需要在Firebug里运行。
51Testing软件测试网1h$_.}x(X-h
k
fE'\ hC^7l^"{'v3?}i08.Colorzilla51Testing软件测试网"f.Yp,LdFk`51Testing软件测试网@'ZnS|回忆一下我们是如何给网页配色的?首先打开图形软件(比如PS或者Fireworks等),导入页面效果图,使用软件中的拾色器取得图片
上某个位置的颜色,然后将颜色的RGB或者十六进制值复制到Dreamweaver中,如果没有效果图的时候,我们还要先截图,额,这样实在太浪费时间。
RD`3Vlh051Testing软件测试网+S(itf0iY除了一些常用的颜色之外,很少有人能够在看到颜色时立刻准确的说得出它的颜色值,其实有一款火狐插件能够帮你“说出”颜色
值:Colorzilla能够取得浏览器中任何一点的颜色值,并且表示为RGB和十六进制值,可以非常方便的复制使用,在制作和修改页面时候大大提高工作 效率。
51Testing软件测试网i,pe$W^Uf%["q!J.s:m0Colorzilla
– Firefox插件安装51Testing软件测试网3~3X ~'I!}N{n0PM
ec6Pda
S#h09.MeasureItk7q#g:@Ou.Z051Testing软件测试网!p[k3V5w2C4}?"We除了取色以外,精确度量页面元素尺寸也是非常重要的操作,尤其是对像小陆这样页面设计“像素派”,并且很多时候在页面调试的时候,也需要
知道某些元素的尺寸以确定是否符合预留的空间。MeasureIt是一个很方便的页面测量工具,只需要拖动鼠标就能完成度量,是不是很直观?
?~N}4v|4B5Z|y8U:i05e vG)U:T-r&srn0MeasureIt –
Firefox插件安装"