前端調試

1、對于新型創業公司來說，我們一般需要考慮以下的各種典型的瀏覽器：

PC端： chrome、firefox、IE、360、搜狗
移動端： IE、360、UC、safari、安卓、QQ瀏覽器

若是基于微信的網頁開發，那么需要在微信上進行調試：

• 個人：直接用手機打開網頁，alert
• 推薦：微信開發者工具。ps：需要有公眾號，并且開放開發者權限。跟一般瀏覽器的調試功能相似。

2、PC端如何調試？

直接打開：

• 對于無數據交互功能的靜態頁面 —— 直接用瀏覽器打開文件

• 涉及到后臺數據交互：搭建http-server，在不同的瀏覽器打開網址

  • 如何搭建一個本地的http-server？

    • window：搭建wamp環境
    • linux：搭建lamp環境
    • 輕量化： xampp（個人正在使用）

  • 如何訪問？

    • 學習各個環境文件放在哪里
    • 用http://127.0.0.1:port/路徑 或localhost:port/路徑訪問

虛擬機
If you like, everything is ok! ?

補充——打開瀏覽器的開發者工具

（1）在IE中調試
打開IE--使用Internet explorer打開--開發者人員工具--仿真

（2）在chrome中調試：
右鍵--檢查

3、移動端如何調試？

最簡單的，打開瀏覽器的開發者工具，選擇左上角的手機圖標：

4、測試工具分享

• 1、IETester
  顧名思義，模擬IE不同版本瀏覽器的一個測試工具。不過現在大多數公司都已經放棄了IE8以下的用戶了。所以看自己時間與精力吧。
• 2、云測試 testin.cn
• 3、安卓瀏覽器 Genynotion 有時需翻墻
• 4、省時的瀏覽器測試同步工具：browsersync（用npm安裝，支持遠程訪問，好酷！）

---

前端兼容性

1、polyfill與shim：填平瀏覽器兼容的坑

• shim的意思是在一個老（舊）環境中模擬出一個新API，有時也叫做shiv，例如著名的html5shiv庫。
• polyfill的意思和shim差不多，2010年10月份Remy Sharp引進了這個概念，一個polyfill是一段代碼或插件，用來提供瀏覽器不能提供的功能。程序庫先檢查瀏覽器是否支持某個API，如果不支持則加載對應的polyfill。
• polyfill這個詞最早來自居室裝修領域，是一個英國產品，在美國稱為Spackling Paste（刮墻用的，Spackle是美國抹墻粉的一個品牌。在中國稱為膩子或填泥，膩子英文是putty，而填泥英文是filler）。可以這樣理解：把舊的瀏覽器想象成一面有了裂痕的墻，這些polyfill會幫助我們把這面墻的裂痕抹平，桓我們一個光滑的墻壁。
• shim的概念要比polyfill更大一些，可以將polyfill理解為專門兼容瀏覽器API的shim。

我們可以這么理解polyfill：
如果瀏覽器X支持標準規定的功能，那么polyfill可以讓瀏覽器Y的行為與瀏覽器X一樣。

2、對于IE瀏覽器，用最新的渲染模式渲染

在<header>標簽中加入下面這段代碼：

<meta http-equiv= "x-ua-compatible" content= "ie=edge">

3、html瀏覽器兼容

同樣，在<header>標簽中加入下面這段代碼：

<!--[if lt IE 9]><script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->

其中各個英文對應的符號：

lt < 小于
gt > 大于
lte <= 小于或等于
gte >= 大于或等于

4、統一樣式

不同的瀏覽器都有內置的默認樣式，所以我們通常需要統一各個瀏覽器的樣式，所以在頁面中引入以下文件吧。
具體文件直接搜索即可?
css resets vs Normalize.css

5、通用兼容性方法

• cssHacks 通過browserhacks.com可搜索是否可用
• polyfill/shiv
• 使用Modernizr 防御性主動性編程 為我們主動加類，自己寫樣式 .svg{} .no-svg{}

6、caniuse查兼容性

我們可以看看，哪些我們可以使用，哪些屬性語法不能用，戳下面?
can I Use 官網

前端適配

移動端適配

如果你是做移動端開發的，在header中加入以下這一段代碼是至關重要的。

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

另外，還可以插入以下代碼：

<meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style">

參考資料

Javascript術語

每天堅持學習與輸出，歡迎來跟我交流！

總結

以上是生活随笔為你收集整理的前端调试、兼容、适配指南与工具分享的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。