当今有数十亿移动用户，构建在移动设备上可见的网站是必不可少的。 幸运的是，我们有许多工具和选项可用于在移动平台上调试网站 。
如果您仅在macOS和iOS环境中进行开发，则可能不需要这些第三方工具。 苹果已经为这项工作提供了一套工具。
在本文中，我们将向您展示如何利用它们来访问和调试 iPhone和iPad上的静态网站以及iOS中的WordPress网站 。
事不宜迟，让我们开始吧。
推荐读物： Google Chrome中的移动仿真
入门
首先，启动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上调试网站。
