web開發如何便捷地同時檢查頁面在IE和chrome下分別的效果?

01-16

現在在做PC web端的頁面開發。需要兼容各種瀏覽器。雖然寫的過程很開心，可是每寫一段樣式以後需要查看它在不同瀏覽器下的效果，這個過程令我很苦惱。
我的做法非常的笨：每次都要點開幾個瀏覽器刷新一遍——這確實很麻煩。
所以在此請教前輩們，各位是如何解決這種問題的？
我希望各位前輩能給我如下建議：
1.需要進行這種多瀏覽器兼容的時候，各位前輩的工作流程是怎樣的？

2.遇到這種情況時，各位前輩有沒有什麼好的工具推薦給我？
3.在這種開發流程中，各位前輩有什麼好的心得可以傳授給我嗎？（比如如何增加效率，或者模塊化CSS的好文章之類的）
在此向能給我提供幫助/願意幫助我的人表示謝意：）

開虛擬機，然後使用橋接模式，然後虛擬機里跑ie測試就好了，直接綁主機的服務hosts，虛擬機只需要安裝瀏覽器和編輯hosts文件即可。

主機修改文件，虛擬機清緩存看效果。

蟹妖，

特種瀏覽器(e.g. IE6/7)兼容性問題我並不擅長，給不了意見。

但寫交互組件的時候，通常我會多接一個顯示器，一個Coding，一個看效果。而且可以大體上分個類，Webkit系列的一類，IE系列一類，Gecko 一類。因為後世代的渲染引擎，基本上不會像IE6/7這樣出幺蛾子了，更多時候會是一些新標準的特性實現與否，而這方面你寫的時候就會有大概的感知，會覺得這段CSS可能在某個早期版本並沒有實現云云，然後我會用Can I use... Support tables for HTML5, CSS3, etc 去驗證。

至於前綴問題：

要麼用預處理器：e.g. SASS

要麼用後處理器：e.g. Autoprefixer, cssgrace

要麼人肉：我摔...

至於刷新問題：

https://www.npmjs.com/package/gulp-livereload

大概就是這樣。

上個月，阿里雲給我發的一個廣告：

http://itest.aliyun.com/

可以在線的多機測試效果。傳個網址，就能一下測IE8~11，chrome和FF

看詳細效果，右上角按鈕，點進去就能遠程連上一台主機，用真實的瀏覽器查看。

目前自我覺察到的缺點：測試動畫效果不給力，就是在放幻燈片。畢竟是通過網頁連接的。。。

還有本地測試的功能。可測IE6 7

至少目前還是免費的

自己個人是安裝了虛擬機，裡面分別裝有IE6、IE7和IE8，然後系統安裝IE9(win7)，因為類似於ietester之類的瀏覽器模擬工具不靠譜。個人建議先看IE6的頁面效果，遇上兼容性問題，少用hack，嘗試換種實現方法。當IE6呈現沒多大問題後，其他瀏覽器存在的兼容性問題會少很多。

另外，平時工作中多積累兼容性的問題，記錄其在何款瀏覽器上出現、出現的原因以及工作中碰到的頻率。

積累到一定程度後，寫頁面基本就能繞過很多兼容性的坑了，最終只需略微調整即可實現兼容。

最後，IE6、IE7用戶現在所佔比例越來越低（根據自己用戶的情況，一般來說是少了），現在寫頁面比以前輕鬆多了。

不過，移動端貌似比IE6還坑爹，歡迎入坑～～

Saviio 已經說的很好了,在此我做一些補充和一些工具的推薦。

「每次都要點開幾個瀏覽器刷新一遍」

恩，是的，你可以繼續去使用之前的一些 Livereload 的工具

但是時候該使用自動化工具了，對於需要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting 等，自動化工具可以減輕你的勞動，簡化你的工作，不管你用的是 Grunt 還是 Gulp

在此推薦 Browsersync ，一個基於 NodeJs 構建的多瀏覽器同步的測試工具，可以方便的多瀏覽器，以及多終端的進行調試。

另外 Can i use 的確是一個好工具,推薦其 Sublime text 插件。