我们将在本文中介绍一些关于页面构建常用的一些小工具，大部分是基于firefox的插件，通过这些小工具可以让我们在页面构建中事半功倍。
页面构建必备工具 — Firebug
相信每个页面构建的同学都有这个工具吧？如果没有的话，你赶紧安装（点击此处安装），Firebug就像它的名字一样，帮你找到虫子，烧掉它！同时有一些firefox的页面调试工具也是基于Firebug的，比如Yslow ， CSS Usage
网页测量利器– MeasureIt
当我们拿到一个设计稿，写完基本的结构后，我们的测量工具可能就开始了，那些间距高度宽度对齐，就需要一把好尺子来协助我们了，这里我像大家推荐 MeasureIt Firefox点击安装，通过这把尺子，我们就能很方便的进行一些测量对齐工作，但是这个工具的缺陷是由于那个尺子的边框，我们不容易达到像素级的标准，那我们就需要下面将要介绍的工具 Pixel perfect
实时颜色选取工具–Colorzilla
将版式调整好后的任务应该就是处理颜色方面的问题，通常我们会将其放到ps等图片编辑软件中来查看相应的色值，如果有了Colorzilla，我们就能更直观的使用颜色，特别是有时候我们用文本编辑软件编写CSS色值的时候，我们甚至可以将设计稿直接拖到浏览器里面直接去想要位置的颜色，而且支持 RGB，RGBa，HSL，十六进制，可以直接复制。同时这个软件还提供了色板和渐变生成工具。点击此处立刻体验
检查网页的相关信息–Web Developer
一个页面相关信息的集大成者，任何关于网页前端的信息你都能从里面找到，我们可以很方便的查看网页的大纲、无CSS，查看DOM节点等。只要你想，基本都有了。
让你的CSS更瘦一些 — CSS usage
随着产品经理一遍遍的调整产品，你是不是也感觉你的css文件慢慢变胖，但是又不敢轻易删掉一些样式，因为你不知道它们是不是被用到过，那就让下面的CSSUsage来帮你。
通过检查class名称使用情况，来查看页面中的CSS信息，从而方便开发者优化CSS样式表。
可显示4类信
Seen css中当页所使用的class
Seen before 此class曾经出现在此网站的其他网页，当然是在已经浏览过其他网页的情况下
Unseen css中的class，此页面并未使用过
：hover 伪类信息
网页评级工具–Yslow
Yslow是基于firebug的一个网页评级工具，它根据Yahoo用户体验部门订制的34条可能对网页前段表现产生影响的规则，这些规则中有23条可以通过这个工具来测试。即使我们不使用这个工具，了解这些规则也是很不错的。
网页截图存储工具 –Pearl crescent page saver basic
Page Saver可以将网页转化为图片，包括网页上的Flash也能同时被转化。网页可以按照你的要求保存为PNG或者JPEG格式。可以将整个网页或者在屏幕上看到的部分转化为图片。为了方便截取网页，插件提供了大量的设置选项，包括默认的文件名、文件后缀名、图片的质量。可以通过工具栏按钮截取图片，也可以通过浏览器的菜单选项截取图片，还可以通过命令行截取图片。
当前可见区域保存为图片：
将整个页面保存为图片
HTML页面与设计稿像素级比对工具–Pixel perfect
可以将设计师的设计图通过此插件作为蒙版加载到浏览器上，通过调节图片的透明度以及位置，可以进行设计稿与页面的细节比对，来优化提高页面样式的精确度。
先将设计稿添加到需要对比的页面中来：
让图片显示：
可以通过调整透明度和具体坐标位置来重合图片和网页，然后对样式进行修正。
【页面构建小工具】相关文章：
★ 页面设计细节总结