如今拥有数十亿移动用户，构建可在移动设备上查看的网站是不可或缺的。幸运的是，我们有很多工具和选项可用于在移动平台上调试网站。您可以使用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。
激活后，路径网址将转为：
1
http://localhost:8888/wordpress/
…变成你在下面看到的东西：
1
/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上进行技术调试，就像在桌面上一样。