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

1.BrowserSync

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

注意?#21644;?#36807;BrowserSync调试工具需要PC和手机在同一局域网内。

比如下图:

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

BrowserSync

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


2.Chrome开发者工具

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

首先需要我们打开chrome开发者工具,点击?#20063;?code>... => Mroe tools => Remote devices,打开如下界面:

Chrome开发者工具

Chrome开发者工具

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

Chrome开发者工具

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

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


3.Eruda

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

npm安装

npm install eruda --save

引入JS或者CND

<script src="node_modules/eruda/eruda.min.js"></script>
<script>eruda.init();</script>

<script src="http://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

Eruda

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


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