如何在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。 激活后,路径网址将转为: 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上进行技术调试,就像在桌面上一样。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 如何在iPad上调试网站
分享到:
赞(0)
广告位820*80