前端調(diào)試

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

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

若是基于微信的網(wǎng)頁開發(fā)，那么需要在微信上進(jìn)行調(diào)試：

• 個人：直接用手機(jī)打開網(wǎng)頁，alert
• 推薦：微信開發(fā)者工具。ps：需要有公眾號，并且開放開發(fā)者權(quán)限。跟一般瀏覽器的調(diào)試功能相似。

2、PC端如何調(diào)試？

直接打開：

• 對于無數(shù)據(jù)交互功能的靜態(tài)頁面 —— 直接用瀏覽器打開文件

• 涉及到后臺數(shù)據(jù)交互：搭建http-server，在不同的瀏覽器打開網(wǎng)址

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

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

  • 如何訪問？

    • 學(xué)習(xí)各個環(huán)境文件放在哪里
    • 用http://127.0.0.1:port/路徑 或localhost:port/路徑訪問

虛擬機(jī)
If you like, everything is ok! ?

補(bǔ)充——打開瀏覽器的開發(fā)者工具

（1）在IE中調(diào)試
打開IE--使用Internet explorer打開--開發(fā)者人員工具--仿真

（2）在chrome中調(diào)試：
右鍵--檢查

3、移動端如何調(diào)試？

最簡單的，打開瀏覽器的開發(fā)者工具，選擇左上角的手機(jī)圖標(biāo)：

4、測試工具分享

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

---

前端兼容性

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

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

我們可以這么理解polyfill：
如果瀏覽器X支持標(biāo)準(zhǔn)規(guī)定的功能，那么polyfill可以讓瀏覽器Y的行為與瀏覽器X一樣。

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

在<header>標(biāo)簽中加入下面這段代碼：

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

3、html瀏覽器兼容

同樣，在<header>標(biāo)簽中加入下面這段代碼：

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

其中各個英文對應(yīng)的符號：

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

4、統(tǒng)一樣式

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

5、通用兼容性方法

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

6、caniuse查兼容性

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

前端適配

移動端適配

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

<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術(shù)語

每天堅持學(xué)習(xí)與輸出，歡迎來跟我交流！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。