移动端网站页面调试的一些经验分享

把静态资源指向到本地Mobile越来越重要，HybridApp越来越流行，在手机上进行网页的调试却并不像电脑上那么容易。大约半年前，我开始转向MobileWeb的开发，在调试方面做了不少的尝试，近期慢慢分享给大家。

开发过程离不开调试，特别是做前端开发，几乎是一边调试一边开发。

做调试的第一步：让浏览器/webview直接请求你本地的源码

PC端的经验如何实现目标？相信大家在做PCWeb开发时，有接触过以下一些解决方案：

编辑本地的hosts文件，把静态资源的域名指向到本地，在本地搭建静态资源HTTP服务器，使浏览器直接载入本地的源码。

在本地搭建一个代理服务器，设置浏览器的代理到这个代理服务器，在代理服务器中根据规则直接读取本地的源码返回给浏览器。例如有nproxy可以满足此类需求。

使用Fiddler的AutoResponder的功能。这个方法实际上和上一个是同样的，Fiddler是一个非常强大并且免费的GUI工具，很容易上手。

使用模块加载器提供的debug功能来做线上资源到本地资源的映射，例如seajs-debug。

这些方式要完成的任务都是：让浏览器直接请求你本地的源码。

只要做到了这一点，我们就可以在编辑器里改完代码，刷新浏览器立即看到改动后的效果，避免了部署代码的繁琐操作。

移动端的方案在移动端，应该怎么做呢？

无非要实现同样的目标：让手机浏览器/webview直接载入我们工作电脑上的源码。我们先看看PC上的这几种常用方式在手机上是否还适用。

编辑hosts的方案

在PC上编辑hosts文件的时候，大家应该注意过，在WIN7/8系统上，需要管理员权限，在Mac/Linux下，需要root权限。这确实是一个很安全敏感的文件。所以在手机上，要想编辑这些文件同样需要root权限。这就意味着iOS需要越狱，Android需要root。我认为这个方案在手机上不可取，在手机上编辑hosts困难重重，你还不能保证你的每台开发机都有root权限，调试兼容性的时候，遇到无法root的机器怎么办？

使用代理的方案（包括自建proxyserver和使用fiddler）

在iOS上配置系统的HTTP代理服务器是非常容易的，大部分Android机也可以配置，只是不同机型配置菜单的位置不一样。剩下要做的，就是和在PC上一样了，配置规则来把某些文件代理到本地。

使用这个方案可能会遇到的问题是：自建的proxyserver一般对HTTPS的兼容不够好，对于HybridApp，可能native部分有些请求是HTTPS的，webview里的页面是HTTP的。设置了HTTPProxy后，所有的请求都要经过这个代理服务器，如果对HTTPS的支持不够好，可能出现无法登录等情况发生。这点要赞Fiddler一下，处理的非常好。

另外Mac用户可能没有太好的Fiddler的替代品，Charles是收费的，而且没Fiddler好用。

使用模块加载器提供的debug功能

一般需要在页面上输入一些东西来完成资源映射。在手机上输入文字太麻烦了，而且屏幕太小，不太好展示这些内容，所以这个方案也不好。

综上所述，使用代理服务器的方案是可以从PC端沿用到移动端的。

但是上面我们也讲了，使用代理服务器也有一些缺点，那能不能在手机上无痛的实现绑定hosts的效果呢？答案是可以的。我们绑定hosts只是改变了域名的解析结果，正常情况下，域名是由谁来解析的呢？DNS!

自定义DNS的方案我们只需要在开发电脑上运行一个特殊的DNS服务器，然后把手机网络配置里的DNS改成开发电脑的IP。我们在DNS服务器里做一些手脚，把静态资源的域名解析到开发电脑上，就可以实现和编辑hosts文件一模一样的效果了。

而在手机上修改DNS服务器地址，是非常容易的，比修改代理服务器还要通用。

为了实现这些，我写了一个非常方便配置的DNSServer:xdns,兼容hosts文件的语法，同时提供了比hosts文件更高级的语法。

比如，xdns支持域名使用通配符的模式。支持IP地址用网卡接口名来作为占位符，运行时可以自动替换成该网卡接口上的IPv4地址，这样当你的开发电脑IP变了后就不需要修改配置文件。

安装和启动都非常方便，使用Node.js开发，Node对于前端来说应该很熟悉。npm安装后，一个命令就可以启动。具体请看文档：xdns。

远程调试PC端的经验在使用桌面浏览器开发时，几乎每种浏览器都有自己的开发者工具，比如大家常用的firebug,chromedevelpertools,safaridevelopertools.哪怕是IE甚至IE6，也有自己的开发者工具。我们利用这些工具来检查调试样式、javascript，查看修改cookie,查看网络请求等等。这些大家都非常熟悉了。

移动端的方案手机端的浏览器或者webview不可能在手机上集成一个developertools，因为屏幕太小。好在各大厂商还是很关注开发者的便利性的，现在有多种远程调试的方案。也就是在手机上加载页面，在电脑上来展示调试工具。下面我们看看目前主流的一些工具。

iOS平台

1.SafariMobile

safari支持远程调试，需要做如下的几步：

在手机里找到设置->safari->高级->Web检查器，打开此功能。

用数据线连接到你的Mac（没有Mac?找老板要去！）。

打开Mac下的safari,到偏好设置里，高级一栏最下部，勾选在菜单栏中显示“开发”菜单

用手机safari访问一个网页，在Mac上的safari开发菜单里找到你的手机，二级菜单里找到这个网页

做完这些，我们就进入了熟悉的safaridevelopertools，调试css,js网络请求等。

2.iOSwebview

iOSAPP里的webview同样支持远程调试，不过限制更多一点。这个APP必须是自己编译安装进手机的，也就是你必须要有iOS开发者账号。对于做HybridAPP开发的来说，这不是什么难事，团队肯定有开发者账号。你需要做的是了解一点iOS开发基础，起码能自助把代码编译安装到你的手机。

对于自己编译进去的APP，只需要在APP里载入你要调试的页面，其他步骤和safari的远程调试一样。

Android平台

1.ChromeMobile

Chromeforandroid32以及之后的版本具有远程调试的功能，你需要做的是：

开启Android的USB调试功能。

用USB先连接到你的电脑（windows用户需要安装Android驱动）。

在Chromeforandroid上打开你要调试的网页。

在电脑上打开chrome（同样最低需要32版本），进入菜单->工具->检查设备页面，确保DiscoverUSBdevices被勾选

如果设置正确的话，现在就可以看到你手机上打开的页面了，点击inspect进入我们熟悉的Chromedevelpertools。

由于Android手机各种各样，如果遇到麻烦，请仔细阅读官方文档

2.AndroidWebview

Android4.4开始，默认的浏览器已经是chrome了，所以webview也是chrome了，这就给了webview远程调试的能力。我们需要在Android里针对Webview做以下设置：

JavaCode复制内容到剪贴板

if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){

WebView.setWebContentsDebuggingEnabled(true);

}

然后在你的App里打开要调试的页面，其余步骤和使用ChromeforAndroid一样，进行远程调试。

3.使用Android模拟器

鉴于目前Android4.4的手机还比较少，你可以选择使用模拟器来进行调试。官方的模拟器太慢，推荐大家使用genymotion,X86架构的模拟器，速度和真机没什么两样了。对于只做webview调试的前端来说，只需要使用个人免费版就可以了。

4.其他方式

如果你的调试条件不能满足上面讲的任何一种，还可以使用weinre。只需要在页面里插入一段脚本，就可以进行远程调试，基本没其他限制。但是使用这个也是有明显的缺点的：

不能给javascript打断点，基本只能用console来调试

不支持查看元素的样式是写在css第几行，也不支持显示在哪个文件

由于是通过网络来连接的，所以在调试移动网络的情况时，不好操作（需要服务端运行在一个移动网络可以访问到的机器上）

总之，weinre仅仅适用于你没办法使用Safari或者Chrome进行远程调试的情况下，聊胜于无，调试AndroidhybridAPP时，经常会遇到这个情况。

总结

综上所述，可以根据下图来选择最优的调试方案：

由于我目前只接触了iOS和Android平台的开发调试，其他的移动平台不了解，所以本文没涉及到windowsphone等平台。欢迎大家留言或者email交流各种远程调试方案。

申请创业报道，分享创业好点子。，共同探讨创业新机遇！

专注SEO十年，以诚信经营为本，为企业、为客户创造价值为根。以技术实力为公司生命线。

诚接网站关键词优化、整站排名优化、负面处理等业务　　　　微信：BaisoTec　电话：海阔天空