Web前端頁面的瀏覽器兼容性測試心得（一）搭建測試用本地靜態服務器

自從實習以來，我體驗了由一個人編程再到多人協作編程的轉換。同時也接觸了很多新鮮事物，學到了很多東西。工作時，常常需要多個人協同測試一張H5頁面（PC、手機、平板等跨設備測試），也會經常把頁面給PM或老板看。這種情況下，把網頁上傳到公司服務器的測試目錄是個可行的辦法。然而這不是最好的辦法，因為前端開發人員往往沒有公司服務器的操作權限，每次更改一處都要讓別人上傳，這肯定很麻煩。這時，在自己機器上開一個在局域網內可訪問的本地服務器是最方便的做法。每次修改頁面之后，把頁面拖到本地服務器的目錄下，其他人訪問你電腦的IP地址即可預覽和測試頁面。

 

那么應該選用什么樣的技術方案？Apache和Tomcat是可行的，但在Windows系統下，如果不熟悉這兩種服務器的配置方法，就會存在一定的學習成本。最后，我用了一個最簡單的方法建立靜態服務器——使用幾乎每台Windows電腦上都有的IIS。既然用的是Windows系統，那么使用自帶的IIS建服務器，無疑是最方便的了。

 

作為.NET全家桶成員，IIS經常和后端的ASP.NET結合起來建站，但在這里我們不需要配置ASP.NET。只用幾個步驟，便可在電腦上開啟IIS服務。

 

以下步驟以我電腦上的Win10系統為例，和Win8、Win7上的操作都是差不多的：

 

 

1. 打開控制面板，進入“程序與功能”：
   
   
   
   
   

2. 點擊“啟用或關閉Windows功能”：
   
   

    
   
   

3. 參照圖中紅色圈出部分，勾選需要的組件。需注意：不能只勾選最上一級選項，必須從最底層選項開始勾選，直至所選組件全部顯示為“√”，如圖中所示。
   
   

    
   
   

4. 點擊“確定”按鈕，Windows開始添加IIS功能，這會持續幾分鍾，然后就可以使用IIS功能了。

   

    
   
   

5. 在開始菜單的“Windows管理工具”目錄下，找到並打開“Internet Information Services(IIS)管理器”（建議把該快捷方式放到桌面或固定在開始菜單，以后打開會更方便）。

   

    
   
   

6. 在界面左側列表找到自己的主機那一項，右鍵，選擇“添加網站”：
   
   

    
   
   

7. 這時會彈出“添加網站”的窗口，我們先不要管它。我們打開命令提示符（cmd），輸入“ipconfig”並回車，即可查看自己本機在當前局域網內的IP地址（注意是IPv4地址，而且以“192.168”開頭）。

   

   
   
   
   
   
   

8. 回到“添加網站”窗口，如下圖所示填寫網站名稱、設置服務器根目錄所在路徑（根目錄選在哪里看你喜好），並填入本機IP地址作為服務器的訪問地址，點擊確定。

   

    
   
   

9. 這時，我們發現網站已經建立並啟動了：

   

    
   
   

10. 接下來我們進入剛剛設置好的服務器根目錄下（我的是“C:\server-root”），在這里添加一個測試用的主頁。新建一個文本文檔，輸入“OK!”並保存，把文件名改為“index.html”。

    

     
    
    

11. 在瀏覽器中輸入你本機的IP地址，看看主頁是否成功顯示：

    
    
    
    

12. 你也可以在手機上輸入這個地址測試一下，前提是手機和電腦連着同一個WIFI：

    

     

13. 看來我們已經成功了！現在就可以把你做好的靜態頁面放進這個根目錄，進行跨設備測試了。你也可以把鏈接發給其他同事，只要你們連着同一個WIFI，他們就可以訪問到。
    
    

14. 補充：有時候，你的電腦在局域網內的IP地址會變化，比如當你換了個WIFI，或者重啟電腦重新接入WIFI等。如果發現IP地址變化導致原鏈接無法訪問，可以用“ipconfig”命令再次獲取當前IP地址，並更新服務器配置。更新配置的入口在管理器界面上的“綁定”：

    

     

15. 點擊“綁定”，彈出新窗口之后，再點擊“編輯”就可以修改IP了。

    

     

 

不得不說，巨硬家的軟件的特征之一就是傻瓜式操作，能大大提高工作效率。

 

在此基礎上，在接下來的文章里，我會總結一下如何在高版本的Windows系統下搭建令人頭痛的IE8測試環境。