如何在iPad上调试网站

如今拥有数十亿移动用户,构建可在移动设备上查看的网站是不可或缺的。幸运的是,我们有很多工具和选项可用于在移动平台上调试网站。您可以使用Adobe Edge Inspect,Google Chrome Emulation或XIP.io等。 如果您仅在macOS和iOS环境中开发,则可能不需要这些第三方工具。Ap WP网站建设

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

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

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

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

入门

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

WordPress网站建设

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

如何在iPad上调试网站

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

WordPress网站建设

对于基于WordPress的网站

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

激活后,路径网址将转为:

1

http://localhost:8888/wordpress/

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

1

/wordpress/

调试网站

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

如何在iPad上调试网站

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

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

WordPress网站建设

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

WordPress网站建设

我们完了。

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

WordPress网站建设

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/9746

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code