如何处理兼容性及在多个设备上进行调试

桌面端浏览器调试方法

通常只需要在Google、Firefox、Opera、Safari、IE五大主流浏览器进行测试。

移动端浏览器调试方法

移动端浏览器调试的最好方法是真机测试，因为很多手机生产厂家会根据原生的安卓系统开发自己的操作系统，在没有真机测试的情况下会出现很多意想不到的兼容性问题。

对于纠结需要进行哪些真机测试的问题，我们可以根据手机设备活跃度选择活跃度较高的主流设备进行测试。

除了购买真机测试，我们也可以使用云测试的方式，例如 https://www.testin.cn/ 提供了云测试服务。

当然虚拟机测试也是OK的，在Max OS中，有自带的苹果虚拟设备。对于大部分Windows用户，苹果的虚拟机就没有了，需要用苹果真机测试。对于安卓设备的测试，以前会使用eclipse自带虚拟机测试，因为这个虚拟机非常的慢，每次打开都需要长时间等待，我们并不推荐。推荐 www.genymotion.net ，一个基于VirtualBox（一个免费的虚拟机管理软件）的安卓模拟机软件。

兼容性通用处理方法

CSSHack——针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果

CSSHack的写法很多，无法一一记住，推荐网站：http://browserhacks.com/

 可查询各个浏览器的hack写法，集合所有浏览器CSS和JavaScript的HACK写法。这个网站提供了Chrome、IE6/7/8/9/10、Opera、Safari几个主流浏览器的CSS HACK，当然还有Javascript和Media Query Hack写法，内容更新快，是设计师和前端人员最佳选择。

Polyfill——一个用在浏览器API上的shim

Polyfill是用在浏览器API上的shim。我们通常的做法是先检查当前浏览器是否支持某个API，如果不支持的话就加载对应的polyfill。这样新旧浏览器就都可以使用相同的API了。把旧的浏览器想象成为一面有了裂缝的墙，这些polyfill（腻子）会帮助我们把这面墙的裂缝抹平。

polyfill 是 shim 的一种。一个polyfill可以是一段代码(或者插件)，提供了那些开发者们希望浏览器原生就支持的功能。主要抚平不同浏览器之间对js实现的差异。

shim 是将不同 API 封装成一种的库，shim将一个新的API引入到一个旧的环境中，而且仅靠旧环境中已有的手段实现。

比如 jQuery是一个shim库，jQuery 的 $.ajax方法 封装了 XMLHttpRequest 方法和 IE 用 的ActiveXObject 方式来创建 xhr 对象（通俗地讲，依靠浏览器原生支持的两个API，封装成$.ajax这个新的API，使用时，只需调用$.ajax这个新的API ，而不是调用XMLHttpRequest或ActiveXObject这两个原生API ）。

可以把shim，理解成能够兼容之前版本的库，是一种优雅降级。

polyfill 特指 shim 成的 api 是遵循浏览器标准的，其典型做法是在IE浏览器中增加window.XMLHttpRequest ，内部实现使用 ActiveXObject（见下面举例）。

举例1：如何区分polyfill和shim

问题：旧版本的 IE 不支持标准的 XMLHttpRequest，但支持自家的 ActiveXObject 方法

解决办法1-shim（jQuery中，把XMLHttpRequest和ActiveXObject这两个新旧浏览器中的原生API，封装成 $.ajax 这个新的API。使用时，只要熟悉 $.ajax这个新的API 的使用就可以了，不用考虑浏览器的兼容问题）

$.ajax = function(url) { 
  if (isIE) {
    XMLHttpRequest(url) 
  } else {
    ActiveXObject(url) 
  }
}

解决办法2-polyfill（判断浏览器  是否支持新版浏览器中XMLHttpRequest这个原生API，如果不支持，就用旧版浏览器中ActiveXObject这个原生API 来实现  一个功能跟  新版浏览器中XMLHttpRequest这个原生API   完全一样的函数，并赋值给XMLHttpRequest这个原生API，这样，开发者使用时，就还可以使用XMLHttpRequest这个原生API啦，不用再去学习jQuery库咯）

if (!window.XMLHttpRequest) { 
  window.XMLHttpRequest = function(url) {
    ActiveXObject(url) 
  }
}

举例2：如何区分polyfill和shim

问题：旧浏览器不支持 ES6 的 Array.prototype.find 方法

解决办法1-shim（封装一个新的API，使用时也调用这个新的API）

function arrayFind () { 
  if (Array.prototype.find) {
    // ... 
  } else {
    // ... 
  }
}

解决办法2-polyfill（判断浏览器  是否支持新版浏览器中Array.prototype.find这个原生API， 如果不支持，就实现一个函数，并赋值给Array.prototype.find这个原生API，这样，开发者使用时，就还可以使用Array.prototype.find这个原生API啦）

if (!Array.prototype.find) { 
  Array.prototype.find = function() {
    // ... 
  }
} 

总结：如何区分polyfill和shim

以上举例中，两种解决办法都能解决跨浏览器兼容的问题，看着也没有特别的差别。

但是我们更推荐【解决办法2】，

首先，像shim这样应用一个新的API，有一定的学习成本，特别是在多人协作的过程中，如果你自己定义了一个方法去解决兼容问题，就需要告知其他开发人员这个新的API应该如何调用。而polyfill的做法，还是调用原生API就OK啦！

其次，polyfill可以实现按需加载，只在旧浏览器上加载兼容代码。

shiv——使得不支持HTML5标签的浏览器（诸如ie6-8）, 支持html5标签

举例几个比较著名的shiv库：

html5shiv，让低版本IE浏览器也能支持header、section、nav、footer这些语义化标签。html5shiv的原理就是把在IE 9 以下不支持的新标签用createElement方法声明出来。

Github地址：https://github.com/aFarkas/html5shiv

使用方法：当IE浏览器版本小于9时，引入这个html5shiv：

<!--[if lt IE 9]>
	<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

Respond，IE6-8不支持CSS3的媒体查询，想要在IE6-IE8实现响应式设计基本是不可能的。Respond库的引用能够让低版本IE浏览器能够支持媒体查询中 min/max-width这两个特性（A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)）

Github地址：https://github.com/scottjehl/Respond

使用方法：同上，使用IE表达式引入

Modernizr ——一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性

官网地址：https://modernizr.com/

一种主动检测兼容性的方式，对于一些实验性或不确定兼容性的新特性推荐这种主动检测兼容性的方式，而不是到测试的时候再发现兼容性问题（防御编程）。

如何在多个设备上同步调试？

推荐一个很实用的工具：http://browsersync.cn/

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。

安装Browsersync，工具类插件，建议全局安装： 

npm install -g browser-sync

 启动Browsersync：

【--server】服务器的根目录设置到src目录下，【--files】监听src目录下文件变化

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server "src" --files "src"

Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址。我们可以打开多个浏览器进行同步测试啦，在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中。

与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！