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 : xdns , 兼容 hosts 文件的语法，同时提供了比 hosts 文件更高级的语法。
比如，xdns 支持域名使用通配符的模式。支持 IP 地址用网卡接口名来作为占位符，运行时可以自动替换成该网卡接口上的 IPv4 地址，这样当你的开发电脑 IP 变了后就不需要修改配置文件。
安装和启动都非常方便，使用 Node.js 开发，Node 对于前端来说应该很熟悉。npm 安装后，一个命令就可以启动。具体请看文档：xdns 。
第一篇就到这里，如果你有其他方案能方便实现让浏览器/webview直接请求你本地的源码文件，欢迎留言探讨。
