兼容性處理
瀏覽器
現在主流的瀏覽器大多自帶調試工具，可以通過快捷鍵 F12 調出。Firefox除了自帶的調試工具外，通常可以使用Firebug調試工具；Safari瀏覽器自帶的調試工具中提供了響應式調試，其中對應多種蘋果移動端設備；Opera瀏覽器自帶的調試工具與谷歌類似，但是Opera瀏覽器開發者版的VPN功能是一大亮點。
PC瀏覽器調試
IE瀏覽器調試方法：用IE瀏覽器打開項目http://192.168.0.104:8888/，通過修改“文檔模式”來修改IE的版本進行調試。（ie9不只是picture，ie8以下不支持H5新增標籤header、footer、nav、section等）。對於IE瀏覽器的調試，我們可以使用IETest進行調試，但是建議用虛擬機進行測試。微軟官網提供了許多虛擬機下載（網址：IE虛擬機下載），另外，github官網也有虛擬機下載（網址：虛擬機下載），需要虛擬機軟件VirtualBox來安裝。
移動端瀏覽器調試
移動端瀏覽器的調試，一般採用真實的手機來調試。但是，不可能把全部類型的手機都買來，我們可以參考友盟官網數據統計來購買測試機，或者進行雲測試，比如：https://www.testin.cn。另外，我們也可以採用虛擬機測試，比如：最快的安卓模擬器 genymotion (網址：http://www.genymotion.net/），該軟件及基於VirtualBox的。
兼容性調試的通用方法
方法1：csshack
推薦網站：http://browserhacks.com/，可以查詢多種瀏覽器的hack寫法。
方法2：respond（js庫）
推薦網址：https://github.com/scottjehl/Respond，因爲ie8以下不支持css3的媒體查詢，respond是一種polyfill，應用廣泛。(js庫）
方法3：html5shiv（js庫）
推薦網址：https://github.com/aFarkas/html5shiv，使用範圍很廣。在ie8以下版本的IE瀏覽器不支持新增的標籤，通過引入html5shiv，可以支持新增的標籤，具體方法可以通過條件表達式引入。(js庫）
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
方法4：modernizr（js庫）
推薦網址：http://modernizr.com 引入該js庫，會檢測瀏覽器對css3的支持情況，如果支持，會對元素添加對應的類；反之，增加no-開頭的類；主動檢測兼容性，是一種防禦性編程思想。使用方法舉例（查看是否支持svg）：
（1）按圖所示，進行操作；
（2）在項目中新建modernizr.js，將生成的代碼複製到modernizr.js中，在項目中引入（第一個引入，首先檢測），即可檢測是不是瀏覽器是不是支持svg。
（3）運行項目，打開開發者工具，發現html標籤新增了class = “svg”。
（4）根據是否支持svg格式的文件，我們可以全面的考慮屬性樣式。比如：
.svg .logo {
background-image: url("img/logo.svg");
}
.no-svg .logo {
background-image: url("img/logo.png");
}
備註：在處理兼容性問題之前，我們首先登錄Can I Use 官網（網址：https://caniuse.com/）查看屬性的兼容性，而後在進行處理。
在多個設備上進行調試
在項目完成的時候，我們需要在不同的設備上進行調試，比如：安卓手機，蘋果手機，iPad等等。我們每修改一次代碼，我們就要在每種設備上刷新一次，修改代碼→刷新→修改代碼→刷新→修改代碼→刷新......無語，這肯定是會花費我們大量的時間。我們推薦使用browsersync，一款省時的瀏覽器同步測試工具，解決上述問題。
Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）並自動刷新頁面。更重要的是 Browsersync可以同時在PC、平板、手機等設備下進項調試。您可以想象一下：“假設您的桌子上有pc、ipad、iphone、android等設備，同時打開了您需要調試的頁面，當您使用browsersync後，您的任何一次代碼保存，以上的設備都會同時顯示您的改動”。無論您是前端還是後端工程師，使用它將提高您30%的工作效率。官網：http://browsersync.cn/
Browsersync使用方法：
1、安裝
npm install -g browser-sync
2、啓動
browser-sync start --server "src" --files "src"
備註：--server "src" 表示服務器設置到src目錄下， --files "src" 表示Browsersync會監聽files參數下src文件夾下的所有文件的修改（實際上，我們可以單獨監聽某一文件“**/*.css”）
注意：啓動browsersync的前提是已經安裝了browsersync，並且項目啓動（http-server src），否則輸入上面指令之後，沒有任何反應，正常的反應如下：
此時，在不同設備或瀏覽器中打開http://localhost:3000/（本人打開了IE瀏覽器，Chrome瀏覽器，小米note3瀏覽器），在滾動一個瀏覽器的時候，三個設備同時滾動。如圖：
在修改的同時，也會同時自動刷新，對於調試很方便的。更多內容，請參考官網。