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

fish3129

　　如果你做的页面被老板或PM要求兼容IE8，你就值得同情了。IE8不支持HTML5，在2017年的前端界，开发者不涉及HTML5标准简直寸步难行。然而，有一个可怕的事实客观存在，那就是IE8是Win7系统的默认浏览器！！！一想到国内Win7用户的可观数量，简直男默女泪。对于普通用户，360安全浏览器的知名度和使用量都大大高于Chrome，而360浏览器的兼容模式（Win7系统下），大部分就是IE8版本的内核。
　　怎么办？当然是硬着头皮凉拌呗。有一个问题是，使用Win8、Win10、Mac、Linux系统的前端开发者，很难在本机上用IE8内核测试网页。除了借用产品经理的老电脑（产品经理的电脑通常都是跑什么东西都会出Bug的异空间），还有其他办法吗？当然有。主要有以下几类：

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

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

　　下载地址：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系统为例：

• 打开上文所给网页，如下图所示进行选择，然后下载虚拟机：
  
  　　
  
  
• 打开控制面板，进入“程序与功能”（以下步骤是开启Hyper-V服务。如果你的电脑上已开启Hyper-V，可以直接跳到第6步）：
  
  
  
  
• 点击“启用或关闭windows功能”：
  
  
  
  
• 勾选“HyperV”选项并确定：
  
  
  
  
• Windows开始添加Hyper-V功能，这会持续几分钟。完成时如果提示“Windows需要重启电脑才能完成安装所请求的更改”，可以选择立即启动电脑或不重新启动电脑，在下次重新开启电脑时就可正常开启Hyper-V虚拟机功能。
  
  
  
  
• 在开始菜单的“Windows管理工具”目录下，找到并打开“Hyper-V管理器”（建议把该快捷方式放到桌面或固定在开始菜单，以后打开会更方便）。
  
  
  
• 解压下载到的“IE8.Win7.For.Windows.HyperV_2012.zip”压缩包。该压缩包建议保留，最好不要删除，因为虚拟机的90天限期一到，就可以重新解压并更新虚拟机。
  
• 在Hyper-V管理器右侧点击“新建”>“虚拟机”：
  
  
  
• 在“新建虚拟机”向导中，前几步都可以自行配置或进行默认配置，但在“连接虚拟硬盘”页的三个选项里，要选择“使用现有虚拟硬盘”，并把下方的“位置”定位到压缩包解压目录的“\Virtual Hard Disks\IE8 - Win7.vhd”文件。
  
  
  
• 创建虚拟机后，如果你在之前向导里的“配置网络”页没有选项可选，那么你就需要创建虚拟交换机了。点击主界面右侧的“虚拟交换机管理器”，在新窗口开始创建虚拟交换机。依次点击“外部”、“创建虚拟交换机”，然后在“外部网络”的下拉菜单中选择你可以访问外网的设备并点击“确定”。
  
  
  
  
  
• 创建虚拟交换机后，在主界面选择第9步创建的虚拟机，在右下方点击“设置”，弹出“设置”窗口后点击左边“网络适配器”，选择刚刚创建的虚拟交换机，点击“确定”即可完成设置。
  
  
  
  
  
• 终于可以开始启动虚拟机了。在主界面选中创建的虚拟机，在右下方点击“连接”，在新窗口点击开机键。
  
  
  
  
  
• 稍等片刻，虚拟机就会开机了。使用微软给好的虚拟硬盘文件，就可以顺利初始化IE8-Win7测试环境，是不是很方便？
  
  
  
  
  
• 在本地服务器已经建立的情况下（见上篇文章“Web前端页面的浏览器兼容性测试心得（一）搭建测试用本地静态服务器”），打开IE8，输入本机IP地址，你会发现虚拟机里也可以访问本地服务器哦。这样，在服务器目录下丢入要测试的网页，就可以在原汁原味的Win7虚拟机上进行测试了。
  
  

　　

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