在做移动端web开发的时候，头痛遇到移动端调试的问题，虽然现在很多PC浏览器的开发工具都自带移动端调试功能，但是显然和真机测试还是有一定差距，因为移动端不同的设备会出现不同的问题，在PC模拟器上显示正常的换到真机上测试就是会出问题。

在这里整理一些常见的移动端调试方法。

一、console 调试

在pc端浏览器debug最常见的方法就是通过console在浏览器控制台打印出每步所需的回调数据（详细可以参考Web API接口：https://developer.mozilla.org/zh-CN/docs/Web/API/Console），或者利用浏览器开发工具设置断点。

在移动端可以通过集成vConsole（https://github.com/Tencent/vConsole）来模拟pc端的开发者工具。

二、官方自带模拟器

这个现在也比较常见了。最常用的是chrome的模拟器，当然现在流行的浏览器基本上都有开发者的模式，也都携有移动端的模拟器。比如火狐浏览器、360浏览器等。

基本上浏览器开启开发者模式的方法都统一了，在windows环境下按F12进入开发者攻击界面，mac环境则是下按option+command+i。

移动端的浏览器有的会提供开发模式方便开发者们连接测试。

例如UC浏览器的开发模式，详见：UC浏览器开发者版，http://plus.uc.cn/document/webapp/doc5.html

以及微信官方开发的微信开发者工具：

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html。

三、第三方平台在线模拟器

第三方开发的平台比较方便，功能也相当强大，对于一些需要完善测试的，其实使用第三方的平台还是比较方便的。 这里我就推荐几个比较有名的第三方平台： - BrowserStack - Keynote - BrowserShots - Browsera - Ghostlab等等...

下面介绍一些我比较喜欢的一些远程测试工具。

1、Weinre

早期版本微信开发者工具中有个远程调试的功能，就是基于这个开发的，安装方法也很简单快捷。

安装Weinre：

装完成之后，输入指令启动：

显示示如下则启动成功。

此时我们访问地址：http://localhost:8081/会显示下图：

在页面中也有提供几种方案，在你的项目中添加对应的js。例如：<script src="http://localhost:8081/target/target-script-min.js#anonymous"></script>随后便可以通过PC访问http://localhost:8081/client/#anonymous就可以看到手机上访问的项目页面了。

2、代理应用

这类代理应用实际上是用于抓包的，但是比起Weinre是基于开发者自身开发测试的。如果我们想要去获取其他网站的一些资源，例如http请求，或一些js源码等。这时候使用代理工具比较合适。 mac下常使用的是Charles,windows环境下可以用Fiddler

默认开启的是8888端口。在手机上设置一个网络代理即可，这个不多详细介绍了。

BrowserSync

这是一个很强大的多终端测试工具，它可以跨设备同步操作行为，还可以监听你的文件，在文件修改时自动刷新所有设备中页面。BrowserSync官方网站也可以通过npm全局安装

随后进入项目根目录下

若显示如下，则启动成功：

终端中显示默认访问地址：http://localhost:3001则可直接进入到控制台界面。 之后和weinre类似，也是添加一段js在自己的项目底下。 BrowserSync还可以和gulp以及webpack搭配使用，详细的可以看官方文档。

四、真机测试

真机测试是一概而论的说法。由于像ios系统本身就提供了一些对前端十分友好的开发者工具。 例如，Safari浏览器自带的开发者工具，或则xcode也有测试的方法，这里我局限性比较高，有这方面条件的是可以去搜罗一下相关的方法。 再者，PhoneGap也是有调试工具的，只不过需要安装它测试app。这也是一种方法，不过相对来说使用一些模拟器更加简单方便。

文 / Mob 团子