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

前端调试

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术语

每天坚持学习与输出，欢迎来跟我交流！