ipad发布会ipad_如何在iPad上调试网站

当今有数十亿移动用户，构建在移动设备上可见的网站是必不可少的。 幸运的是，我们有许多工具和选项可用于在移动平台上调试网站 。

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

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

事不宜迟，让我们开始吧。

入门

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

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

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

对于基于WordPress的网站

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

激活后，路径网址将从：

http://localhost:8888/wordpress/

…变成如下所示：

/wordpress/

调试网站

首先，您需要知道您的网络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上调试网站。

翻译自: https://www.hongkiat.com/blog/ios-debugging/