html5页面的浏览器兼容性测试工具有哪些

12款很棒的浏览器兼容性测试工具推荐：

1、Spoon Browser Sandbox

点击需要测试的浏览器环境，安装插件就可以进行测试了。帮助测试网页在Safari、Chrome、Firefox和Opera浏览器中是否正常，IE以前也有的，网站上说应微软的要求去掉了。

2、Superpreview

这是为微软自己发布的跨浏览器测试工具，可以同时查看网页在多个浏览器的呈现情况，对页面排版进行直观的比较。

3、IETester

专门用于测试网页在IE浏览器各个版本中兼容性的工具，版本包含IE5.5至IE9的各个版本，很不错的一款工具，推荐。

4、BrowserShots

是一款免费的跨浏览器测试工具，捕捉网站在不同浏览器中的截图。这是最有名，也是最古老的浏览器兼容性测试工具。

5、Multiple IEs

这款工具同样用于测试网页在IE浏览器各个版本的兼容性。

6、IE netrenderer

Netrenderer 也是用于检查网站在IE浏览器中的呈现情况，包括各个常用版本的检测。

7、Viewlike

是一款新推出的工具，帮助检查浏览器在不同分辨率下得呈现情况。

8、BrowserSeal

这款工具的两个主要特色是独立的浏览器支持和带有自动化脚本的命令行界面。

9、Browsera

是一个可测试网站的跨浏览器布局的工具，会看到网站上存在的兼容性错误。

10、WebDevLab

这款工具专门用于测试网站在苹果Safari浏览器中是什么样子的

11、Litmus

这个工具可以帮助检查网站在多个浏览器中的呈现情况，跟踪Bug并创建报告。

12、Browsercam

这款工具是要付费的，可以帮助检查 Javascript 和 DHTML，提供不同的测试环境平台。

1、Adobe Edge

Adobe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏。该工具的重点放在动画引擎上，但adobe承诺将增加更多HTML5功能，比如Canvas、HTML5音频/视频标签等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各个平台。

2、Adobe Dreamweaver

Adobe Dreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。 [2]  访问代码提示，即可快速了解 HTML、CSS 和其他Web 标准。 [2]  使用视觉辅助功能减少错误并提高网站开发速度。

3、HBuilder

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。

4、WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

参考资料：百度百科——Adobe Edge

百度百科——Adobe Dreamweaver

百度百科——HBuilder

百度百科——WebStorm

1、打开手机web检查器。

通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图（点击查看大图），并且你会看到该选项下面对电脑 *** 作的相应描述，照做就好。

2、链接电脑（Mac）

2.1 先在手机Safari中打开你想调试的网页，并用数据线连接到电脑（我这里是Mac）

2.2 再在电脑上打开Safari点击【Develop】菜单，就会看到如下图所示（点击查看大图）：

2.3 点击2.2中的网站名就会在电脑上打开Safari的控制台，如下图（点击查看大图）：

3.调试网页

此时你可以查看手机网页的DOM结构，并且和电脑端网页调试无异，当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来，如下图（点击查看大图）：

---