如何在iPhone上进行本地测试

简介

我得向大家坦白。我不经常在移动设备上测试我的Web应用🙈。

好吧，这并不完全是真的；我在东西部署后/在暂存区进行检查，偶尔也会到BrowserStack上打探一下。但我几乎从来没有花时间去做一个本地测试设置，这样我就可以在手机上调试我的开发环境。

本教程告诉你如何在iPhone上使用localhost。我们将发现一个理想的工作流程，以确保我们的产品在iOS上稳如磐石。这可能比你想象的要简单

本教程假设你使用的是MacOS。

横向滚动的小偷

当我遇到大家最不喜欢的表弟--水平滚动盗贼时，我终于被推到了边缘。

这些年来，它窃取了我大量的时间。

这个反复出现的恶梦因为无法从台式电脑上重现而变得格外恼人。甚至在浏览器中模拟该设备时也不行!

被奇怪的无缺陷的Chrome移动模拟器哄骗到虚假的安全感中

我需要在一部真正的手机上检查这个问题，看看到底发生了什么。这是一个两步的过程。

• 在我的移动设备上加载localhost:8000

• 利用开发者工具，找出谁是罪魁祸首

让我们看看我是怎么做的。

在iPhone上访问localhost

我最初的策略是把我的手机和电脑放在同一个网络上，弄清我的电脑的IP，然后直接访问它。我最终能够让这一方法奏效，但这需要一些修补工作，而且需要特定工具的配置*。我想要一些比这更普遍的东西。

接下来，我研究了网络共享。应该有一种方法可以选择性地启用对USB连接的iPhone的访问。这个过程是一个混乱的过程，有几个听起来很可怕的提示。

我就不说兔子洞的故事了，但即使同意了这些提示，我也没有找到成功的方法。

令人高兴的是，有一条更光明的道路。我们可以将一个特定的端口暴露在网络上，像其他ngage一样访问它！有很多工具可以做到这一点。

有很多工具可以做到这一点，但我最喜欢的是ngrok。

什么是ngrok？

ngrok被称为一个隧道服务。你在你的电脑上运行一些软件，它在运行过程中钻过防火墙和你的路由器设置，使一个特定的端口公开可用。

有多种这样的服务，包括localtunnel和serveo。根据我的经验，ngrok是最可靠的。

有一个付费版本，但免费版本对我们的需求来说是绰绰有余的。

使用ngrok进行设置

以下是设置ngrok的步骤。

• 注册一个免费账户。

• 在仪表板上，找到你的认证令牌。把它复制到剪贴板上。

• 下载桌面客户端。

• 解压缩它。与许多桌面应用程序不同，这个应用程序不需要安装。它提供了一个你可以通过命令行工具运行的进程。大多数开发者把它放在他们的主目录中(~/ngrok)。

• 打开一个终端，然后cd 到这个目录。

• 通过运行./ngrok authtoken <YOUR_AUTH_TOKEN> 进行认证。粘贴我们之前复制的认证令牌。

有了这个，你应该都准备好了，可以通过隧道离开你的网络了

使用ngrok

我们可以使用这个命令将我们的本地开发服务器暴露在互联网上。

./ngrok http 8000

第一个参数是协议；它支持HTTP和HTTPS，取决于你的开发服务器。第二个参数是端口；因为我的博客是一个Gatsby网站，它运行在端口8000 。

你应该看到一些像这样的输出。

在iPhone上进行调试

能够访问localhost是一个很好的开始，因为我们可以验证一个问题是否发生了。但这并不能真正帮助我们解决这个问题我们需要在引擎盖下进行探查。

在我的例子中，我希望能够弄清楚哪个元素在拉伸容器的边界，但有很多原因你可能希望在移动端进行调试。

• 查看任何控制台日志、警告和错误

• 清除本地存储

• 在真正的移动设备上对性能进行分析

可悲的是，所有的iPhone浏览器都是秘密的Safari*，所以我们没有办法使用我们熟悉和喜爱的Chrome/Firefox开发工具。令人高兴的是，Safari的开发工具实际上是相当不错的而且它们足够相似，学习曲线应该不会感觉太陡峭。

初始设置

在你的iPhone上，进入设置 ' Safari ' 高级，并确保Web Inspector被启用。

由于令人费解的原因，这个开关在默认情况下是禁用的!

接下来，我们需要在我们的电脑上启用Safari中的 "开发"菜单。进入Safari浏览器 ' 首选项 ' 高级，并勾选底部的复选框。

连接和测试

为了让Safari（桌面）访问Safari（移动），我们需要用闪电电缆连接我们的手机。我总是忘记这一步!不要像我一样。

解锁你的手机，以便电脑可以访问它。你可能会遇到几个恼人的iTunes弹出窗口。打起精神来。

一切都连接好了，我们都准备好了!在你的iPhone上，访问我们从ngrok得到的URL（它应该看起来像http://abc123.ngrok.io ）。

在Safari浏览器中，让我们选择开发 ' 你的iPhone名称 ' abc123.ngrok.io。

这将打开远程开发工具!

这样做的效果非常好。例如，在 "元素"窗格中，试着将鼠标移到特定的DOM节点上，然后看看你的手机--它会高亮显示它们，就像在你的电脑上调试时一样!

培养习惯

现在你已经成功地设置好了一切，进行移动调试的过程要短得多。

1. 将你的iPhone插入你的电脑

2. 运行ngrok http 8000 （或你的开发服务器运行的任何端口）。

3. 访问你的iPhone上的URL

4. 用Develop ' Phone Name ' abc123.ngrok.io打开开发者工具。

早日养成在移动设备上测试的习惯是很重要的。这个解决方案的摩擦力很低，我希望我能够经常利用它!

iOS 模拟

有几个人联系我，让我知道了一个很好的东西。XCode的iOS模拟器可以用于同样的目的，包括通过桌面Safari的devtools进行调试。

这有一些折衷的地方。以下是我认为的优点。

• 如果你没有iPhone，也可以使用!

• 可以在iPad以及不同尺寸的iPhone上进行测试

• 不用大惊小怪地寻找闪电电缆和启动ngrok；可能会更快/更少的摩擦!

还有一些缺点。

• 虽然它比浏览器模拟要好，但它仍然不完美；我想，不是所有的问题都能从模拟器上重现。

• 不能给你同样的视角。使用触摸的手机与使用鼠标的屏幕有很大不同。

• 不能告诉你任何关于你的应用程序在设备上的性能。

我认为这两个工具的目的略有不同，但它们都值得保留在工具箱中