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

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

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

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

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

编辑本地的 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 的机器怎么办？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

iOS 平台

1.Safari Mobile

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

在手机里找到 设置 -> safari -> 高级 -> Web 检查器 ，打开此功能。
用数据线连接到你的 Mac（没有 Mac ? 找老板要去！）。
打开 Mac 下的 safari , 到偏好设置里，高级一栏最下部，勾选在菜单栏中显示“开发”菜单
用手机 safari 访问一个网页，在Mac上的 safari 开发菜单里找到你的手机，二级菜单里找到这个网页
做完这些，我们就进入了熟悉的 safari developer tools ，调试 css , js 网络请求等。

2.iOS webview

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

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

Android 平台

1.Chrome Mobile

Chrome for android 32 以及之后的版本具有远程调试的功能，你需要做的是

开启 Android 的 USB 调试功能。
用 USB 先连接到你的电脑（windows 用户需要安装 Android 驱动）。
在 Chrome for android 上打开你要调试的网页。
在电脑上打开 chrome （同样最低需要 32 版本），进入 菜单 -> 工具 -> 检查设备 页面，确保 Discover USB devices 被勾选
如果设置正确的话，现在就可以看到你手机上打开的页面了，点击 inspect 进入我们熟悉的 Chrome develper tools 。

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

2.Android Webview

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

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

3.使用 Android 模拟器

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

4.其他方式

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

不能给 javascript 打断点，基本只能用 console 来调试
不支持查看元素的样式是写在 css 第几行，也不支持显示在哪个文件
由于是通过网络来连接的，所以在调试移动网络的情况时，不好操作（需要服务端运行在一个移动网络可以访问到的机器上）
，weinre 仅仅适用于你没办法使用 Safari 或者 Chrome 进行远程调试的情况下，聊胜于无，调试 Android hybrid APP 时，经常会遇到这个情况。

，可以根据下图来选择最优的调试方案

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