如何在iPad上调试网站

如今拥有数十亿移动用户，构建可在移动设备上查看的网站是不可或缺的。幸运的是，我们有很多工具和选项可用于在移动平台上调试网站。您可以使用Adobe Edge Inspect，Google Chrome Emulation或XIP.io等。

如果您仅在macOS和iOS环境中开发，则可能不需要这些第三方工具。Apple已经为这项工作提供了一套工具。

在这篇文章中，我们将向您展示如何利用它们来访问和调试静态网站以及适用于iPhone和iPad的iOS中的WordPress网站。

不用多说，让我们开始吧。

入门

首先，启动Safari并通过Safari> Preference启用开发人员工具。在“ 高级”选项卡中，勾选菜单栏选项中的“ 显示开发”菜单。

Safari菜单栏中将出现一个名为Develop的新菜单。

然后，在iPad或iPhone中，转到“设置”>“Safari”。同样，在“ 高级”菜单中，启用Web Inspector，如下所示。

对于基于WordPress的网站

需要相对路径，以便在iPad或iPhone中正确加载CSS，图像和JavaScript链接。如果您正在开发基于WordPress的网站，则所有资产路径都是绝对的。要使它们成为相对路径，请安装并激活此插件：相对URL。

激活后，路径网址将转为：

…变成你在下面看到的东西：

调试网站

首先，您需要知道您的网络IP地址编号。转到系统首选项>网络。在那里，你会找到IP地址。此外，请确保您的Apple设备（Mac，iPad，iPhone）连接在同一网络中，以便您可以在iPad或iPhone上无线访问网站。

在iPad或iPhone中，启动Safari应用程序并访问localhost：8888，然后访问您的Web项目目录 – 例如localhost：8888 / wordpress。如果使用MAMP设置本地服务器，localhost：8888应该是您的默认本地服务器地址。

如您所见，我们正在iPad上查看我们的网站，在本例中是基于WordPress的网站。

此外，为了能够使用开发人员工具调试网站，您需要使用USB将iPad或iPhone插入Mac。然后，在Safari中，转到“ 开发”菜单并选择已连接的设备。

我们完了。

在下面的屏幕截图中，当我们从开发人员工具中选择DOM树时，您可以看到iPad或iPhone上的各个元素都突出显示。您现在可以在iPad或iPhone上进行技术调试，就像在桌面上一样。