导读:很不错的文章,涵盖了目前前端开发者经常要用的一些测试工具与网站,对于前端开发来说测试各类网页在浏览器中的兼容性是必须掌握的技能,其中也包括使用许多软件来提高工作效率,当然本文并不包含所有的测试工具,但大多数都十分有用。
前端开发人员最头疼的,莫过于形形色色的浏览器间的兼容性问题。每天绞尽脑汁地为这些本不应该存在的东西费尽心思。由于各个浏览器内核及解析方式的不同,使得相同的前端代码不能实现相同的效果。所以,培养良好标准的代码编写习惯的同时,熟练掌握浏览器兼容性测试的常用工具也是必需的了。这里是网络上传播较多的13个不同操作系统中各色浏览器兼容性测试的软件工具。
HTML和CSS验证
首先让我们先看一看检查验证HTML与CSS的方法。我应该说到的是由于我在MAC上工作,会略微偏向于MAC。不要担心,仍然有许多平台独立解决方案的。
除了验证你的文件以外,你也应该很好的格式化自己的代码”HTML/CSS格式化实例与提示“是有关此类主题的文章。
1. W3C 验证 – HTML
可能大多数人都知道在线的W3C验证服务你可以通过链接地址进行验证,或者是上传文件或者直接提交代码。有很多的验证选项,尽管很多时间你不真的需要他们。

2. W3C 验证 – CSS
你很可能知道W3C的也有一个CSS校验服务。与HTML验证服务一样,这个CSS版本更多的选择,并允许在必要时通过的URI验证,文件上传和直接提交代码。

3. [Firefox] 网页开发工具条
The Web Developer toolbar extension for Firefox的网页开发工具条非常受欢迎,拥有很多非常棒个的功能,附加了很棒的HTML与CSS验证工具,你可以快速的对当前浏览的本地文件网站进行验证。他会发送URI或者文件到W3C,并在新的选项页里面显示验证结果。
你也可以打开“验证显示页面”来快速查看HTML和CSS的验证信息,无需再打开新的标签页面。假如你在开发一个项目非常有帮助。不仅仅是HTML与CSS你也可以验证更多的选项。

4. [独立的浏览器] W3C Validator Favelets
我使用Safari浏览器作为我的主要网络浏览器,但是Firefox已经宠坏了我,它拥有强大的扩展选择,如网络开发工具栏和Firebug。 Safari浏览器的Web Inspector,一个类似Firebug的工具,但不能进行文件验证。
涵盖几乎任何主要浏览器验证HTML和CSS的快速和轻松的方法是使用favelets 。 Favelets是通过JavaScript增加额外的功能的书签片段。 W3C的提供了几种验证favelets,我经常使用的是Safari 。

5. 你的开发编辑器
大多数的编辑器提供少许的验证工具。目前我使用的编辑器Coda和CSSEdit都提供验证工具。

6. 验证 S.A.C.
如果您需要迅速验证大量的文件,在最喜爱的编辑器或通过浏览器打开所有文件是痛苦的事情。这个应用会让这个过程快速而且简单。
S.A.C验证器是OS X的单机应用程序,可以使用favelet验证HTML文件(with W3C),拖放或者通过URL的或仅仅是应用程序的文件> 打开。我用的是拖放方法尤其频繁。
![]()

验证的一些想法
虽然验证是非常重要的,不过它只是一种工具,以帮助确保您的代码达到标准和接近完美。如果您使用的是一些新的网络技术,它可能无法验证,这并不意味着你不应该使用它。创新的问世往往是打破了规则。
尽管如此,如果需要提交的模板进行销售,请确保所有的文件验证后提交。如果有由于CSS3这样的验证错误,只需要在后面的说明中注明。
![]()
浏览器兼容测试
如果每个人都只使用最新版本的Firefox或Safari浏览器,浏览器的测试将是一件轻而易举的事。还是让我们面对现实吧,这是不会发生,我们未来几年都将会与Internet Explorer的问题做斗争(不只是IE6) 。
以下是一些我常用的和一些我不用的工具,测试Internet Explorer,Safari,Firefox和其他浏览器的兼容性。
当前的IE, Firefox 与 Safari
很明显,如果你在使用的Windows,目前肯定安装了例如Firefox 3.5 , Safari4 , Opera和Internet Explorer等浏览器。

7. 老版本的Firefox
如果需要测试的旧版本Firefox。这里有几个我认为最简单的方法可以做到这一点。
Windows: Standalone Firefox (older versions) via Portableapps.com
Mac: MultiFirefox 2.0
Portableapps在Windows上作为单独的应用软件运行Firefox,因此没有必要安装,也不会干扰到当前安装的Firefox。
Mac下的MultiFirefox 2.0,可以让你运行不同版本的Firefox,并管理不同的账户。

你可以访问 http://releases.mozilla.org/pub/mozilla.org/firefox/releases/ 下载其他版本
情非得已
21个Sketch实用高频小技巧2019-02-15
25款值得收藏的优秀网站模板免费下载2015-09-16
20套高质量的免费网页模版PSD素材2013-09-02
20款国外时尚大气的按钮开关PSD素材下载2013-07-31
CSS实例教程:十步学会用CSS建站2011-10-05
网页设计师:浅淡网页BANNER设计2010-09-27
网页细节教程:WEB设计精确点滴2010-09-13
网页设计中的点滴细节把握2010-09-01
总结交互组件创新的四种方式2010-06-28
最全的国外电子商务CSS模板下载2010-06-18
5个网站设计实例解析网页设计趋势
相关文章4452018-11-29
实例分析9款惊艳的网页设计作品
相关文章5142018-10-10
11款2018年最值得关注网页开发博客
相关文章2022018-08-14
优秀的网页设计和开发资源干货集合
相关文章5102018-05-10
5个作品集网站设计中常见的问题
相关文章3742018-05-10
精选5月最流行的网页设计趋势
相关文章4832018-05-10
详解深色系网站界面的设计技巧
相关文章2092018-05-10
详解个性化网站设计的优点和缺点
相关文章3702018-01-10
