干货：远程调试以及针对iOS和Android平台的具体调试方法

将静态资源指向本地Mobile越来越重要，Hybridapp越来越受欢迎，但在手机上调试网页并不像在电脑上那么容易。大约半年前，我开始转向MobileWeb的发展，在调试方面做了很多尝试，最近慢慢与大家分享。开发过程离不开调试，尤其是前端开发，几乎边调试边开发。调试的第一步：让浏览器/webview直接要求您的本地源码PC端体验如何实现目标？相信大家在做PCWeb开发的时候都接触过以下解决方案:编辑本地hosts文件，将静态资源域名指向本地，在本地建立静态资源HTTP服务器，让浏览器直接输入本地源代码。在本地建立代理服务器，将浏览器代理设置为代理服务器，并根据代理服务器中的规则直接读取本地源代码返回浏览器。例如，nproxy可以满足此类需求。Autoresponder功能采用Fiddler。事实上，这种方法和上一种方法是一样的，Fiddler是一种非常强大和免费的GUI工具，很容易使用。利用模块加载器提供的debug功能对本地资源进行在线资源映射，如seajs-debug。所有这些任务都是让浏览器直接要求您的本地源代码。只要我们这样做，我们就可以在编辑器中更改代码，刷新浏览器，立即看到更改后的效果，避免繁琐的代码部署操作。移动终端的移动终端方案应该怎么做？无非是实现同样的目标:让手机浏览器/webview直接输入我们工作计算机上的源代码。让我们来看看这些常用的PC方法是否仍然适用于手机。编辑hosts计划在PC上编辑hosts文件时，要注意管理员权限需要在WIN7/8系统上，在Mac/Linux下，root权限需要。这确实是一个非常安全和敏感的文件。因此，在手机上编辑这些文件也需要root权限。这意味着iOS需要越狱，Android需要root。我觉得这个方案在手机上是不可取的，很难在手机上编辑hosts。你不能保证每台开发机都有root权限。调试兼容性时，遇到不能root的机器怎么办？在iOS上配置系统的HTTP代理服务器非常容易使用代理方案(包括自建proxyserver和fidler)。大多数安卓机器也可以配置，但不同型号的菜单位置不同。剩下的要做的就是把一些文件代理到本地，就像在PC上一样。使用这个方案可能会遇到的问题是:自建proxyserver一般与HTTPS兼容性不够好。对于Hybridapp，native部分的一些请求可能是HTTPS，webview中的页面是HTTP。HTTPProxy设置后，所有请求都必须通过该代理服务器。如果HTTPS的支持不够好，则可能无法登录。这一点要赞Fiddler，处理得很好。此外，Mac用户可能没有太好的Fidler替代品，Charles是收费的，也不如Fiddler好用。使用模块加载器提供的debug功能通常需要在页面上输入一些东西来完成资源映射。在手机上输入文本太麻烦了，屏幕太小，不容易显示这些内容，所以这个方案不好。综上所述，使用代理服务器的方案可以从PC端沿用到移动端。但正如我们上面所说，使用代理服务器也有一些缺点，那么绑定hosts的效果能在手机上无痛地实现吗？答案是肯定的。绑定hosts只会改变域名的分析结果，正常情况下，域名是由谁来分析的？DNS!我们只需要在开发计算机上运行一个特殊的DNS服务器，然后将手机网络配置中的DNS改为开发计算机的IP。在DNS服务器中做一些手脚，将静态资源域名分析到开发计算机上，就能达到与编辑hosts文件完全相同的效果。与修改代理服务器相比，在手机上修改DNS服务器地址非常容易。为了实现这一点，我写了一个非常方便配置的DNSServer:xdns,与hosts文件的语法兼容，同时提供了比hosts文件更先进的语法。例如，xdns支持域名使用通配符模式。支持IP地址使用网卡接口名作为占位符，在运行过程中可以自动替换到网卡接口上的IPV4地址，这样当您的开发计算机IP发生变化时，就不需要修改配置文件。安装和启动非常方便，使用Node.js开发，Node应该熟悉前端。npm安装后，可以启动一个命令。具体请参阅文档：xdns。在使用桌面浏览器开发时，几乎每个浏览器都有自己的开发工具，比如常用的firebug，chromedevelpertools,safaridevelopertools.即使是IE甚至IE6，也有自己的开发工具。我们使用这些工具来检查调试样式javascript，查看修改cookie，查看网络请求等。大家都很熟悉这些。由于屏幕太小，手机端的浏览器或webview无法在手机上集成developertols。幸运的是，主要制造商仍然非常*开发商的便利性，现在有各种远程调试计划。也就是说，在手机上加载页面，在电脑上显示调试工具。让我们来看看一些主流工具。iOS平台1.SafariMobilesafari支持远程调试，需要做以下步骤：在手机中找到设置->safari->高级->打开此功能的Web检查器。将数据线连接到您的Mac(没有Mac)去找老板！）。打开Mac下的safari，在偏好设置中，在高级栏的底部，检查菜单栏中显示“开发”菜单，用手机safari访问一个网页，在mac上的safari开发菜单中找到你的手机，在二级菜单中找到这个网页，然后进入熟悉的safaridevelopertols，调试css，js网络请求等。2.在iOSwebviewiOSAPP中，webview也支持远程调试，但有更多的限制。这个APP必须自己编译安装在手机上，也就是说，你必须有iOS开发者账号。开发HybridAPP并不难，团队必须有开发者账号。您需要做的是了解一点iOS开发基础，至少可以自行将代码编译安装到您的手机上。对于自己编译的APP，只需将要调试的页面加载到APP中，其他步骤与safari的远程调试相同。Android平台1.chromemobilechromeforandroid32和后续版本具有远程调试功能。您需要做的是打开android的USB调试功能。将USB连接到您的电脑上(Windows用户需要安装Android驱动器)。在Chromeforandroid上打开要调试的网页。在电脑上打开chrome(最低也需要32个版本)，进入菜单->工具->检查设备页面，确保检查DiscoverUSBdevices。如果设置正确，现在可以看到手机上打开的页面。点击inspect进入熟悉的chromedevelpertols。由于Android手机种类繁多，如遇麻烦，请仔细阅读官方文件2.WebviewAndroid4.从4开始，默认浏览器已经是chrome了，所以webview也是chrome，这给了webview远程调试的能力。在Android中，我们需要为Webview做以下设置：Javacode将内容复制到剪贴板ifew(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {      WebView.setWebContentsDebuggingEnabled(true);  }  然后在你的应用程序中打开要调试的页面，远程调试的其余步骤与使用ChromeforAndroid相同。3.使用Android模拟器，鉴于目前Android4.4的手机还比较少，可以选择使用模拟器进行调试。3.使用Android模拟器。由于Android4.4的手机仍然很少，您可以选择使用模拟器进行调试。官方模拟器太慢了。建议您使用genymotion和X86架构的模拟器。速度与真正的机器没有什么不同。对于只进行webview调试的前端，只需使用个人免费版即可。4.其他方法，如果您的调试条件不能满足上述任何一种，也可以使用weinre。只需在页面中插入一个脚本，就可以进行远程调试，基本上没有其它限制。但使用这个也有明显的缺点：不能给javascript中断点，基本上只能使用console调试不支持查看元素的风格写在css的第一行，也不支持显示哪个文件通过网络连接，所以在调试移动网络时，不容易操作（需要服务运行在移动网络可以访问的机器上），weinre只适用于当你不能使用safari或chrome进行远程调试时，聊天总比没有好。在调试androidhybridAPP时，经常会遇到这种情况。综上所述，您可以根据下图选择最佳调试方案：由于我目前只接触IOS和Android平台的开发和调试，其他移动平台不了解，本文不涉及windowsphone等平台。综上所述，您可以根据下图选择最佳调试方案：由于我只接触IOS和Android平台的开发和调试，其他移动平台不了解，本文不涉及windowsphone等平台。欢迎留言或电子邮件交流各种远程调试方案。