當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端调试、兼容、适配指南与工具分享

發布時間：2024/4/14 HTML 58 豆豆

生活随笔收集整理的這篇文章主要介紹了前端调试、兼容、适配指南与工具分享小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前端調試

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>標簽中加入下面這段代碼：

3、html瀏覽器兼容

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

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

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中加入以下這一段代碼是至關重要的。

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

參考資料

Javascript術語

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

總結

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

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