关于页面调试，想必作为前端工程师来说是在常见不过的了。很多调试工具和方法大家也都耳熟能详，比如Chrome开发者工具，firebug，等等。但是现在的应用场景，大多数都已经从PC端转向了移动端，而真机实测部分出现错误，我们如何调试呢？下面给大家介绍三种方式，帮你轻松搞定移动端的页面调试。

1.BrowserSync

BrowserSync是一款前端开发的调试神器，不但可以实现边改边看的功能，而且可以多端同步预览，也就是说你在手机、Pad等移动设备上操作的时候，全部操作都会PC端同步显示，从而达到调试移动端设备的目的。

注意：通过BrowserSync调试工具需要PC和手机在同一局域网内。

比如下图：

我在本地启动了一个端口为8888的server，通过BrowserSync开启代理模式，这时可以看到PC端被映射到了3000端口，而移动端可以通过IP + 端口的形式访问。之后你在移动端或者PC端的操作，就会实时同步过去啦。

教你如何在移动端调试WEB页面

更多BrowserSync的用法请查看小呆之前的文章《前端调试神器——BrowserSync》

2.Chrome开发者工具

第二种方式就是使用Chrome自带的开发者工具来进行移动设备的真机调试了，并且此种方式不需要在移动设备上安装任何软件。

首先需要我们打开chrome开发者工具，点击右侧... => Mroe tools => Remote devices，打开如下界面：

教你如何在移动端调试WEB页面

教你如何在移动端调试WEB页面

接下来我们需要把手机跟电脑用数据线相连。如果提示请求权限，请点击允许。如果连接成功，则左侧会出现手机信息。（小呆用的公司测试机 华为Mate 9，但是显示的是个什么鬼….）

教你如何在移动端调试WEB页面

之后点击左侧手机名，然后用手机打开页面，就会在右侧空白处出现页面链接，点击链接右侧的inspect，会弹出一个窗口, 之后就可以像PC一样去调试啦。（华为Mate 9 测试未成功，同事的小米和魅族亲测可用）

注意：IOS暂不支持此功能，但据说Safari也有此项功能，有Mac的童鞋可以去发掘下

3.Eruda

第三种方式是使用第三方JS插件，在移动端页面中添加各种Debug信息和Error信息，这里推荐Eruda。使用方法很简单：

npm安装



  1. npm install eruda --save



Shell





引入JS或者CND






    

  1. 
<script src="node_modules/eruda/eruda.min.js"></script>

    2. 

  2. 
<script>eruda.init();</script>

    3. 

  3.  
    4. 

  4. 
<script src="//cdn.jsdelivr.net/npm/eruda"></script>

    5. 

  5. 
<script>eruda.init();</script>

    6. 




HTML





教你如何在移动端调试WEB页面


其他更多关于Eruda的详细使用方法，请移步GitHub。




好了，到这里小呆比较常用的移动端调试工具就介绍完啦，快去试试吧~