浏览器兼容性测试、网站调试与发布.PPT

Page: * 教育部软件工程专业教指委规划教材 Web前端开发技术-HTML、CSS、JavaScript(第2版）储久良编著 第17章浏览器兼容性测试、网站调试与发布 Page: * 教育部软件工程专业教指委规划教材 Web前端开发技术-HTML、CSS、JavaScript(第2版）储久良编著 * 第17章浏览器兼容性测试、网站调试与发布(选讲) 教学目标 掌握常用的浏览器兼容性测试工具。 能够根据浏览器兼容性测试结果对网站进行微调和优化。 学会使用各类Web网页调试工具。 熟悉各类网站发布平台的特点。 学会安装与配置Web服务器。 17.1 浏览器兼容性测试工具 解决浏览器兼容性问题需要从多个方面着手： 网站设计人员。在设计和制作网站的过程中，做好浏览器兼容性测试工作，尽量回避使用极易造成页面显示效果差异的HTML标记属性、CSS属性，这样才能够让网站在不同的浏览器下都正常显示。 浏览器软件开发人员。在开发和升级浏览器软件时应自觉遵守W3C推荐的HTML、CSS、JavaScript各类版本的规范，让所开发的浏览器软件对标准的更好兼容能够给用户更好的使用体验。 最终用户。建议用户尽量使用世界五大主流的浏览器，分别是IE、Chrome、Firefox、Safari、Opera；尽量使用最新版本的浏览器。 网站测试人员。测试人员需要选择好的浏览器兼容性测试工具，及时完成网站跨系统、跨设备、跨浏览器的测试工作，及时将结果反馈给网站开发人员，让开发人员对网站进行深度优化设计，从而使开发的网站有更高的可用性和更好的用户体验。 17.1.1 网站概况在线测试工具 所谓在线测试工具，是指在提供浏览器兼容性测试服务的Web网站上进行跨浏览器、跨设备、跨系统的测试工作，然后通过屏幕截图或在线查看等方式将测试结果反馈给网站管理员。 例如BrowserStack网站就是一个提供网站浏览器兼容性测试的在线云端应用，该测试工具支持9大操作系统上的100多款浏览器。支持本地测试，并且预装有完备的开发者工具。BrowserStack在近期发布了API，移动开发者将会进一步提高测试效率。 BrowserStack(官方网站/)可以帮助开发者在Windows和Mac两个系统上都可以对浏览器中的HTML、CSS、Javascript语言进行安全地测试。 17.1.2 本地测试工具 所谓本地测试工具,是指需要下载相关的软件包进行本地安装和设置后才能对网站进行器、跨设备、跨系统的测试工作，可以现场在不同版本的浏览器中查看页面的显示效果，一目了然。 例如比较有名的是IE Tester、SuperPreview，不过只能测试IE各个版本的兼容性。现在Chrome、Firefox、Safari、Opera等浏览器所占市场份额越来越高，要测试在非IE浏览器中的兼容性,还需要使用其他的本地化测试工具。下面以Multibrowser为例介绍多浏览器兼容性测试。 MultiBrowser功能简介 该软件菜单栏中有Home、Option、Design、VIEw、Compare等菜单，每一个菜单又包括若干个功能区等。 17.2 Web网页调试工具 17.2.1 IE IETester IETester(/wiki/)是一款IE浏览器多版本测试工具，能方便在IE5.5～IE11之间切换，只需安装一个软件，不需要安装多个IE浏览器，具有Office 2007的可视化界面。 17.2.2 FireFox Firebug Firebug(最新插件版本firebug-2.0.8-fx.xpi)是Firefox浏览器下一个出色的网页设计插件，随着浏览器的发展，Firebug也推出了支持IE、Opera、Chrome的Firebug Lite。凭借Firebug的出色代码调试功能，Firefox成为了网页设计人员的必备浏览器，虽然其他浏览器软件也开发了类似的插件，但总体来说Firebug功能仍然占据了上风。 Dragonfly(蜻蜓)是类似Firebug的开发工具，允许开发者在Opera浏览器上调试网页或Web应用程序。Opera在BSD许可证下公布了Dragonfly的源代码。 Dragonfly能够调试JavaScript，查看CSS和DOM，显示任何网页的错误，Dragonfly让开发工程师无论是在计算机上还是手机上通过Opera调试网页更加简单。 17.2.3 Opera Dragonfly 17.3 网站发布工具 搭建WEB服务器是一项重要工作。Web服务器也称为WWW(World Wide Web)服务器，主