10个前端开发必备的工具或使用方法

工欲善其事必先利其器，作为前端开发的你，有了本文介绍的工具和一些功能，就可以高效的处理任务和信息。下面的这些工具都是本人平时经常用到的，如果你有更好的更有效率的工具，请告知一声，补充一下！

火狐浏览器

前端要看网页，浏览器是必备的，但为什么要选择火狐浏览器而不是谷歌、IE、opera、360？首先，IE就不要谈了，360那些国产的也不要提了，Opera 国内使用率并不高。使用谷歌浏览器也是一个好的选择，但是我本人倾向于使用火狐。因为在之前的使用过程中，感觉 chrome 是拿来上网用的，而 Firefox 才是拿来开发用的，特别是下面介绍的一些功能插件都是基于火狐浏览器的。当然谷歌浏览器上面也有一套不错的开发工具。

Firebug

这个插件具有非常强大的功能，它把网页的 HTML 结构进行了整理，查看和修改 CSS 也非常方便。这只是基础的功能，还有控制台等可以调试 JavaScript 等，是前端不可缺少的工具。具体使用方法不再赘述。

查看选中部分源代码

这是火狐浏览器中内置的一个功能，通过选取网页上的一快内容，然后右击查看选中部分源代码，可以快速查看到你选中部分的源代码内容。这样就可以非常快速的了解到某个区域的 HTML 结构，从而避免从海量文件中寻找对应代码。

Yslow

网站性能优化也是前端的一个重要任务，而雅虎出品的 Yslow 插件，就是进行网站性能测试的工具。使用它进行测试之后，会给出一个等级以及存在哪些问题以及如何进行修正。官方地址： 点击这里

查看元素（三维视图）

火狐浏览器自带的查看源代码功能还是比较弱的，于是有 查看元素 这个功能。使用鼠标放在某个元素上，右击 查看元素 ，即可看到这个元素的 HTML 结构和对应的 CSS 样式，也可以很方便的修改。但是通常使用 FireBUG 来完成这个任务，因为自带的功能不是特别强。这里主要介绍的是 查看元素 功能中的 三维视图 功能。这个功能可以把你的网页变成三维视图，从而可以非常方便的查看到网站的结构是否合理、是否正确闭合、是否嵌套层数太多。

自适应设计视图

目前响应式设计越来越流行，这个功能就是来测试网页的响应式布局效果。同样也是火狐浏览器中内置的功能，在 菜单 中 Web开发者 选项中可以找到。虽然网上也有一些网页版的响应式测试工具，但是我个人觉得还是浏览器自带的比较方便实用，速度也比较快。此外，据说 chrome 上面也有类似的工具。

IE9

IE9 是用来做兼容性测试用的。如何做 IE 兼容性测试呢？IE9 已经像 firefox chrome 一样，内置了非常简陋、难用的页面调试功能，但是其中有一个非常重要的功能，就是设置浏览器和文档解析模式。它可以方便的切换到 IE7 、IE8 文档渲染模式，此外还有怪异模式等等。这样，用IE9就可以同时做IE7和IE8的兼容性测试。对了，IE6呢，IE6怎么办。原来你还在费力的做IE6的兼容？

有道云笔记

前端也是需要不断学习的，包括一些总结或者网上的资料。以及一些优秀作品的网页截图、图片资源等等，都是需要分类整理的。面多这么多的信息，你如果用文件夹和 Word文档或者浏览器的收藏夹来整理，那简直是弱爆了。有道云笔记是我用过最好的比较，容量大，使用方便。可以直接使用网易邮箱登陆开通，如果你还没有账号，可以通过 我的邀请链接注册。

火狐剪报

快速对当前网页进行截图，并且可以进行简单编辑。搭配有道云笔记，可以记录优秀的设计，提供一些灵感。此外有很多类似的网页截图工具。

notepad++

非常小巧好用的文本编辑器。用来快速高效的搜索修改代码。如果你想修改一点小代码的时候，却要忍受几秒的编辑软件启动时间，那么就用这个吧。无论是写代码还是修改代码，个人觉得都比那些功能齐全的编辑软件好很多。当然文本编辑器也有很多，但是用了一遍我个人觉得这是最好的。

>>> 继续阅读全文 ...

© 我爱水煮鱼 / 5条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 360 搜索推出站长平台，支持 Sitemap 文件
• 新域名 PR 更新为 5，顺便求友情链接
• 如何在 Chrome 和 Firefox 浏览器上屏蔽微博广告
• 使用百度统计跟踪和分析 WordPress 404 页面
• 美味书签：更便捷的书签工具
• 2013 年 HTML5 或将爆发