Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

时间:2021-04-04 21:43:23

如果你做的页面被老板或PM要求兼容IE8,你就值得同情了。IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行。然而,有一个可怕的事实客观存在,那就是IE8是Win7系统的默认浏览器!!!一想到国内Win7用户的可观数量,简直男默女泪。对于普通用户,360安全浏览器的知名度和使用量都大大高于Chrome,而360浏览器的兼容模式(Win7系统下),大部分就是IE8版本的内核。

怎么办?当然是硬着头皮凉拌呗。有一个问题是,使用Win8、Win10、Mac、Linux系统的前端开发者,很难在本机上用IE8内核测试网页。除了借用产品经理的老电脑(产品经理的电脑通常都是跑什么东西都会出Bug的异空间),还有其他办法吗?当然有。主要有以下几类:

  1. 安装第三方测试软件,如IETester。这种方法不推荐,因为目前根本没有好用的多版本IE内核测试软件。尽管IETester等软件的功能很诱人,但是问题多多,满是Bug,好像也不怎么更新。
  2. 在Win8、Win10下使用IE11的“仿真”功能。在IE11按下F12进入开发者工具,在“仿真”选项卡里可以设置想要模拟的内核版本号。这种方法最为简单,但这并不是原汁原味的Win7-IE8测试环境,有时候显示效果可能和在真实环境下有所不同。而且,不适用于Mac和Linux用户。
  3. 使用虚拟机。这也是本文着重讲述的方法,因为微软曾推出过专用来在IE8内核下测试网页的免费映像,这是真正原汁原味的测试环境。

2016年,微软在开发者中心发布了新版虚拟机,该虚拟机用来测试Windows10 Edge浏览器和IE8至IE11,有效期为90天(超过90天则需要重新配置),相关用户可免费下载。该虚拟机有Windows、Mac和Linux三大类版本,涉及IE8至Win10最新预览版的Edge浏览器,可用于VirtualBox、Vagrant、HyperV以及UMware等主流虚拟机。

Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

下载地址:https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

本文将介绍“IE8 on Win7”虚拟机在Hyper-V(Win8、Win10专业版自带的虚拟机软件)平台上的安装和使用。如果你是Mac、Linux用户,或者想使用不是Hyper-V的其他虚拟机软件,以下内容就可以跳过了。

我选用Hyper-V的理由和上一篇文章“Web前端页面的浏览器兼容性测试心得(一)搭建测试用本地静态服务器”相似,那就是Hyper-V也是Windows自带的,不用折腾而且配置方便,何乐而不为呢?以下操作步骤以Win10系统为例:

  1. 打开上文所给网页,如下图所示进行选择,然后下载虚拟机:

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

  2. 打开控制面板,进入“程序与功能”(以下步骤是开启Hyper-V服务。如果你的电脑上已开启Hyper-V,可以直接跳到第6步):

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

  3. 点击“启用或关闭windows功能”:

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

  4. 勾选“HyperV”选项并确定:

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

  5. Windows开始添加Hyper-V功能,这会持续几分钟。完成时如果提示“Windows需要重启电脑才能完成安装所请求的更改”,可以选择立即启动电脑或不重新启动电脑,在下次重新开启电脑时就可正常开启Hyper-V虚拟机功能。

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

  6. 在开始菜单的“Windows管理工具”目录下,找到并打开“Hyper-V管理器”(建议把该快捷方式放到桌面或固定在开始菜单,以后打开会更方便)。

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

  7. 解压下载到的“IE8.Win7.For.Windows.HyperV_2012.zip”压缩包。该压缩包建议保留,最好不要删除,因为虚拟机的90天限期一到,就可以重新解压并更新虚拟机。

  8. 在Hyper-V管理器右侧点击“新建”>“虚拟机”:

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

  9. 在“新建虚拟机”向导中,前几步都可以自行配置或进行默认配置,但在“连接虚拟硬盘”页的三个选项里,要选择“使用现有虚拟硬盘”,并把下方的“位置”定位到压缩包解压目录的“\Virtual Hard Disks\IE8 - Win7.vhd”文件。

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

  10. 创建虚拟机后,如果你在之前向导里的“配置网络”页没有选项可选,那么你就需要创建虚拟交换机了。点击主界面右侧的“虚拟交换机管理器”,在新窗口开始创建虚拟交换机。依次点击“外部”、“创建虚拟交换机”,然后在“外部网络”的下拉菜单中选择你可以访问外网的设备并点击“确定”。

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

  11. 创建虚拟交换机后,在主界面选择第9步创建的虚拟机,在右下方点击“设置”,弹出“设置”窗口后点击左边“网络适配器”,选择刚刚创建的虚拟交换机,点击“确定”即可完成设置。

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

  12. 终于可以开始启动虚拟机了。在主界面选中创建的虚拟机,在右下方点击“连接”,在新窗口点击开机键。


    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

  13. 稍等片刻,虚拟机就会开机了。使用微软给好的虚拟硬盘文件,就可以顺利初始化IE8-Win7测试环境,是不是很方便?


    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

  14. 在本地服务器已经建立的情况下(见上篇文章“Web前端页面的浏览器兼容性测试心得(一)搭建测试用本地静态服务器”),打开IE8,输入本机IP地址,你会发现虚拟机里也可以访问本地服务器哦。这样,在服务器目录下丢入要测试的网页,就可以在原汁原味的Win7虚拟机上进行测试了。

    Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

IIS和Hyper-V,还有微软提供的专用虚拟机,上篇文章和这篇文章里所介绍的利器一结合,测试前端页面再也不是什么困难事儿。后续我打算总结一些使HTML5兼容IE8的技术经验,祝你写的页面能够完美地兼容IE8!