关于页面调试，想必作为前端工程师来说是在常见不过的了。很多调试工具和方法大家也都耳熟能详，比如Chrome开发者工具，firebug，等等。但是现在的应用场景，大多数都已经从PC端转向了移动端，而真机实测部分出现错误，我们如何调试呢？下面给大家介绍三种方式，帮你轻松搞定移动端的页面调试。
1.BrowserSync
BrowserSync是一款前端开发的调试神器，不但可以实现边改边看的功能，而且可以多端同步预览，也就是说你在手机、Pad等移动设备上操作的时候，全部操作都会PC端同步显示，从而达到调试移动端设备的目的。
注意：通过BrowserSync调试工具需要PC和手机在同一局域网内。
比如下图：
我在本地启动了一个端口为8888的server，通过BrowserSync开启代理模式，这时可以看到PC端被映射到了3000端口，而移动端可以通过IP + 端口的形式访问。之后你在移动端或者PC端的操作，就会实时同步过去啦。
更多BrowserSync的用法请查看小呆之前的文章《前端调试神器——BrowserSync》
2.Chrome开发者工具
第二种方式就是使用Chrome自带的开发者工具来进行移动设备的真机调试了，并且此种方式不需要在移动设备上安装任何软件。
首先需要我们打开chrome开发者工具，点击右侧... => Mroe tools => Remote devices，打开如下界面：
接下来我们需要把手机跟电脑用数据线相连。如果提示请求权限，请点击允许。如果连接成功，则左侧会出现手机信息。（小呆用的公司测试机 华为Mate 9，但是显示的是个什么鬼….）
之后点击左侧手机名，然后用手机打开页面，就会在右侧空白处出现页面链接，点击链接右侧的inspect，会弹出一个窗口, 之后就可以像PC一样去调试啦。（华为Mate 9 测试未成功，同事的小米和魅族亲测可用）
注意：IOS暂不支持此功能，但据说Safari也有此项功能，有Mac的童鞋可以去发掘下
3.Eruda
第三种方式是使用第三方JS插件，在移动端页面中添加各种Debug信息和Error信息，这里推荐Eruda。使用方法很简单：
npm安装
- npm install eruda --save