干货：远程调试以及针对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等平台。欢迎留言或电子邮件交流各种远程调试方案。

以上就是关于干货：远程调试以及针对iOS和Android平台的具体调试方法的相关介绍，更多干货：远程调试以及针对iOS和Android平台的具体调试方法相关内容可以咨询我们或者浏览页面上的推荐内容。我们将让你对干货：远程调试以及针对iOS和Android平台的具体调试方法有更深的了解和认识。