移动前端开发和调试

移动前端开发和调试，最常用的是在chrome开发人员中打开移动设备调试，可以调试iphone，iPad，Samsung，nexus等. 然后使用自适应插件调试其他宽度等等. 在本文中，于江水还谈到了使用真实计算机的本地调试方法. 感觉非常有用，值得尝试.

Android系统是份额最大的移动设备操作系统. 一方面，Android由Google开发，浏览器也基于Blink内核（早期版本基于Webkit），都是由Google开发的，因此不会出现技术问题. 另一方面，Google的免费开放源Android系统导致许多小型制造商自行对Android系统进行了更改，各种版本无处不在，并且出现了许多错误.

在计算机上安装Android虚拟机，即可使用该虚拟机打开进行测试. 通常建议两个:

一个出色的Android虚拟机. 但是第一次安装和配置需要麻烦一些. 因为它基于VirtualBox内核，所以您需要先安装VirtualBox，然后再向Genymotion注册一个帐户，该帐户可以免费使用，但存在功能限制. 如果您遇到重要的项目，可以暂时购买一两个月的高端帐户.

安装完成后，登录后，选择Android版本和手机型号，可以下载对应的虚拟机软件包，下载的虚拟机会显示在列表中，可以选择打开.

已安装的虚拟机和主机位于局域网中，因此您可以使用BrowserSync或类似工具打开局域网IP本地服务器并同时在移动设备上进行测试. 关于BrowserSync，如果您还没有接触过它，那么我将在下面进行讨论.

发现Genymotion虚拟机中的APP安装似乎更麻烦，这更让人痛苦. 安装Chrome并不容易. 连接到桌面版Chrome进行调试并不方便. Weinre仅可用于调试. 如果您有Genymotion的任何经验，请分享.

Parallels是基于Mac平台的虚拟机. 使用它创建虚拟机时，可以直接下载并安装Android系统. 这是超级傻瓜的操作，但使用起来超级简单.

是的，它也可以安装Chrome操作系统，只需单击并等待下载.

其他虚拟机软件也应该是可以实现的，而这两个软件不那么容易使用. 如果您不能同时使用两者，则可以搜索其他方法来尝试. Win系统可以直接安装Android SDK，也可以通过虚拟机安装Android SDK，此处不再赘述.

安装虚拟机后，可以使用内部浏览器打开网页进行测试. 虚拟机和虚拟机位于局域网中，可以使用局域网IP调试本地页面.

虚拟机不是真实的计算机，但是比直接使用浏览器进行测试要强大. 在桌面上操作更方便. 您还可以安装多个版本进行测试.

由于有Firebug和Chrome DevTools之类的工具，因此在桌面上进行前端开发和调试非常简单. 您可以通过右键单击打开该元素的CSS来查看它，并可以查看各种资源，修改操作和调试等. 移动浏览器显然无法执行这些功能，因此可以使用数据线连接设备手机浏览器调试，然后使用计算机上的Chrome DevTools调试移动设备上的页面.

首先，您的Chrome版本必须高于32. 其次，您的测试机Android系统高于4.0，只有在测试机上安装了Chrome for Android后，您才能使用Chrome for Android调试此功能.

首先使用数据线将Android测试机连接到计算机. 您需要在测试计算机上的“开发人员选项”中打开“ USB调试”功能. 在Android 4.2+系统上，默认情况下“开发人员选项”处于隐藏状态，因此您需要先打开“开发人员选项”（打开方法: settings-“关于本机”-多次打击版本号（内部版本号）打开开发人员选项）. 如果之后没有打开，或者没有响应，则可能是您的版本存在问题或单击错误. 您可以尝试几次滑动本机上的所有选项，然后它将打开.

然后打开镶边: //在桌面版本的Chrome中检查以找到您的设备，在设备上的Chrome中打开网页，您可以看到该页面，然后可以在桌面上的移动设备上调试该页面版本的Chrome DevTools.

此外，您还可以直接在桌面版Chrome上输入URL，然后在移动设备上打开它；使用Nodejs或其他功能在本地启动本地服务器，并使用端口传输让移动设备直接访问本地localhost上的页面，然后配合自动刷新LiveReload和BrowserSync之类的工具，而测试只是在刷新.

此处不再重复更多详细信息，您可以查看Remote Debugging的官方文档或我的翻译版本.

Chrome非常强大且易于调试，并提供许多调试功能. 但是，前提是必须先安装Android版本的Chrome浏览器，然后才能进行连接和调试.

之所以没有味道，是因为并非所有用户都使用Chrome浏览器，这在中国尤为明显. 大多数国内用户使用UC浏览器，百度浏览器，QQ移动浏览器等（数据报告），并且这些浏览器通常使用WebView或自己修改的内核. 由于Chrome是功能最强大的浏览器，因此通过测试并不意味着当前的Android内置浏览器是正常的，通常内置浏览器功能会很弱.

此外，一定比例的家庭用户还使用微信，移动QQ和其他内置浏览器访问网页，使用WebView借用本机浏览器（有待进一步测试和验证）. 其他人已经测试过，如果安装了QQ移动浏览器，那么微信和移动QQ中的浏览器将使用QQ移动浏览器的内核. 所有这些都导致了Android下移动终端调试的难度和复杂性.

因此，您需要分析您的用户使用份额，然后对其进行测试，而不仅仅是测试最新版本的Chrome. 从这个角度来看，Weinre是最实用的测试解决方案.

一系列苹果设备，例如iPhone，对前端非常友好. 性能好，Safari浏览器也好，模型固定统一，问题得到较好解决. 此外，Apple还提供了一系列开发人员工具.

Safari默认情况下隐藏开发选项. 首次使用时，您需要在Safari中选择“首选项”-“高级”-“在菜单栏中显示开发选项”:

iOS Simulator是Xcode开发工具中内置的iOS模拟器，因此此功能只能在Mac系统上使用. 可以如下打开它:

打开后，您可以在模拟器中使用Safari打开要调试的网页. 它可以直接打开本地localhost页面，而无需任何设置. 您可以在上面的菜单中选择“硬件”来模拟其他iOS设备手机浏览器调试，包括iPad等. 如果升级OS X系统和Xcode 6，您还可以模拟iPhone 6和iPhone 6 Plus.

如果需要调试，请打开Safari的桌面版本，在“开发”中选择要调试的页面，然后可以打开Safari调试面板:

这允许调试. 提示: 将URL粘贴到的地址栏中时，不能使用CMD + V粘贴. 如果要粘贴，请先按CMD + V，然后用鼠标单击地址栏，等待粘贴. 按钮出现，然后用鼠标单击该按钮将其粘贴.

模拟器足够强大且方便，但是某些手势操作测试和最真实的用户体验测试仍需要一台真正的机器. Safari在真实设备上调试网页也非常简单.

首先，您需要在iPhone和其他设备上设置Safari浏览器以启用调试. 具体步骤: “设置”-“” Safari“-”高级“-”“ Web Checker”. 用数据线连接计算机，使用设备上的Safari浏览器打开需要调试的页面，然后可以在Safari开发选项的桌面版本中看到调试信息. 与使用iOS Simulator相同，但现在已替换为真实计算机.

但是，要调试本地网站，您可能需要在LAN中连接手机和计算机，然后启动LAN IP服务器进行调试，这有点麻烦.

此外，Safari也可以在iOS上调试WebView，例如通过调试PhoneGap打包的APP. 方法是相似的. 这是一个测试APP. 即将开发iOS的朋友可以看看.

提示: iOS 8+设备需要使用Safari 7.1+进行调试，并且旧版本的Safari无法识别. 您可以将OS X更新到10.9.5，或升级到优胜美地. 有关详情，请参见此处.

MIHTool是由中国听众基于Weinre开发的，用于iOS设备的前端开发和测试.

如上所述，Weinre的一般工作方法是启动服务器，然后将JS插入页面，然后进行调试. MIHTool简化了此过程. 它是一个可以直接安装到您的iOS设备中的APP，然后构建了一个简单的浏览器来打开您的测试页面. 打开时，它将自动将Weinre的JS插入页面，并通知Weinre控制台URL和其他信息，以便您可以访问调试.

它还提供了公开的Weinre调试服务，该服务会生成一个链接，例如#AwAj，可以在打开时进行调试. 这很方便，只需几张卡.

此外，它还提供了许多便捷的调试功能，有兴趣的朋友可以看看iOS上的官方网站介绍和Debugging网站内容. 感觉有点难看，如果您可以要求设计师或互动设计，那就更好了.

移动设备太多了. 小公司或团队没有太多的资本和精力购买如此多的测试设备进行测试. 因此，有人购买了这些设备，将它们连接起来，并提供了调试服务.

例如，使用其他设备访问您的网站并截图:

它甚至允许您远程控制机器以进行测试操作:

BrowserStack提供这种服务. 它可以实时调试，还可以截取屏幕截图，测试响应性等.

此外，Keynote还提供此服务. 当然，这里的Keynote不是Mac上的幻灯片应用程序. 它提供了更现实的移动测试，我只是尝试了一下，并且它确实比较了卡，它应该是真实的机器测试:

UC浏览器是国内使用份额最大的移动浏览器. 令人高兴的是，它为开发人员提供了连接和调试的开发版本.

当然，配置起来有点麻烦，但是总比没有好.

官方配置和开发文档已经非常详细，因此在这里我不做详细介绍，请访问官方网站.

BrowserSync是我最喜欢的多终端测试工具. 使用BrowserSync之前的原始测试过程通常是这样的:

首先将本地网页上传到远程服务器（因为许多设备必须访问固定地址），然后将URL输入每台测试机的测试浏览器中以手动打开（或使用浏览器插件，等生成扫描QR码）. 然后手机开始下载页面，您需要等待下载. 要测试效果，必须再次操作每台测试机. 测试其他网页时，每台测试计算机都会重新输入URL并刷新. 如果代码被修改，则需要再次上传服务器以刷新.

BrowserSync工具可以使用您的LAN IP创建本地服务器并生成类似于3002的URL，以便与计算机位于同一LAN上的所有设备都可以访问您的本地页面.

建议使用无线路由器建立无线局域网，并且所有设备都已连接到无线局域网. 也可以使用软件启用与Win系统计算机的Wifi共享. Mac更悲惨. 仅在插入网络电缆后，才能打开Wifi共享功能.

BrowserSync还将监视文件更改. 当受监视的文件更改时，它将自动刷新连接到本地服务器的所有页面. BrowserSync的主要功能是同步和同步所有操作. 在浏览器中触发操作时，它将在所有测试浏览器中同步. 例如，在计算机上滚动页面，所有手机都会滚动页面；替换计算机上的URL以测试另一页，所有电话都跳到另一页.

应用BrowserSync工具后，测试过程的新版本如下所示:

使用BrowserSync打开本地服务器，所有测试设备都连接到局域网，然后打开: 3002 /（浏览器创建的本地服务器地址）. 在一个设备上操作，观察其他设备的状况，修改CSS，HTML或JS代码，保存并在所有设备上自动刷新.

BrowserSync使用非常简单，可以在要创建服务器的目录下执行: browser-sync start --server --files =“ *”命令，这意味着创建服务器并文件在此目录中更改. 它还提供了Grunt和Gulp插件，更多用法移至BrowserSync官方文档，此处不再赘述.

BrowserSync的原理通常是这样的，它将在HTML页面中插入JS，然后监视页面操作. 因此，当您滚动页面或跳转到新页面时，BrowserSync可以捕获此操作，并通过Socket.io将操作指令发送到所有客户端的JS，其他设备也将遵循scroll或location.href等，这确实很聪明

此外，有关BrowserSync的两个提示:

Charles是Mac系统下的数据包捕获和代理工具. 如果您的计算机是Win系统，则可以使用Fiddler来实现本节中介绍的技术.

使用场景示例: 当在本地开发时使用Intranet登录功能（需要相同的域）时，通常需要绑定主机，例如将本地计算机127.0.0.1绑定到xx.xx.com. 这样，当我们在访问本地服务器时使用xx.xx.com时，我们可以正常使用登录名和其他服务（需要使用cookie）.

当我们使用移动设备测试此页面时，我们还需要在移动设备上修改主机. 因此，Android需要root，iPhone需要越狱，并且每次都必须打开，这非常不方便. 目前，我们可以使用Charles数据包捕获工具作为代理.

打开Charles后，它将自动在计算机上启动代理服务，默认界面为8888. 这时，我们将移动设备的代理设置为与局域网IP在同一局域网中，它可以通过Charles转发请求，并访问移动设备上的计算机可以访问的内容. 基本原理如下:

通过此代理服务，移动设备请求被传输到计算机并发送出去，并且计算机接收到的响应被返回到移动设备. 其他类似的问题（想要使用移动电话访问只有计算机才能访问的内容）可以通过这种方式解决. 另外，由于它通过Charles代理传递，因此您可以使用Charles来查看相关的请求和响应，执行本地资源映射以及其他功能以简化开发和调试BUG.

有关激活方法的详细信息，请参阅: iOS开发工具-网络数据包分析工具Charles，在iPhone上拦截网络数据包，在此不再赘述.

向Charles提供一个小技巧: Charles仅提供全局监视和Firefox监视，但是我通常使用Chrome浏览器. 我只想在Chrome浏览器中监视某个页面的请求信息，或者您可以设置代理来解决. 在这里，SwitchySharp代理插件（墙上需要GAE才能使用）用于添加新的场景模式并绑定本地Charles代理.

这样，当我们要捕获某个页面时，我们只需要打开Charles并选中Proxy-》 Mac OS X Proxy和Mozilla Firefox Proxy，然后在SwitchySharp中检查此场景模式，您就只能刷新Chrome浏览器发送的请求.

关于Charles的使用，您可以自己搜索本教程. Fiddler具有相同的原理，因此不会重复.

Ghostlab是具有漂亮界面的集成测试工具. 常规功能等效于Weinre + BrowserSync，具有简单美观的界面，用鼠标拖动操作，单击几下即可启动本地LAN IP服务器，将监视网页的终端并同步各种操作. 当您单击“检查”时，Weinre将打开进行调试.

通过一个易于使用的界面，无需执行命令，并且有许多其他参数可以帮助调试. 因此，此软件需要付费，并且仅适用于Mac平台.

有关更多详细信息，请访问Ghostlab的官方网站. 有一个简短介绍视频，介绍相关功能.

相同类型的产品还具有Adobe Edge InspectCC和GapDebug，它们具有相似的功能，在此不再赘述.

与项目相关的新文件，然后使用BrowserSync之类的工具（可以与Grunt等配合使用）来启动本地服务器. 在Chrome中启用“仿真”功能，以模拟iPhone和其他设备的大小以进行编码开发. 这样，您无需刷新即可更直观地在手机上看到效果.

开发工作基本完成. 将测试计算机和虚拟机连接到局域网，输入本地服务器地址，然后开始测试. 对文件的修改会在所有设备上实时刷新，并且可以立即看到效果.

对于稍微复杂的错误或相关问题，请使用Safari或Chrome浏览器连接到虚拟机或真实计算机进行调试. 分析用户的浏览器使用习惯并针对相关浏览器进行测试.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/dianqi/article-210584-1.html