天津建设网站：在iPad如何调试网站

数十亿美元的手机用户现在,建设网站,可以在移动设备上是必不可少的。 幸运的是,我们有很多工具和选项 在移动平台上调试网站 。

如果您正在开发只在macOS和iOS环境,你可能不需要的第三方工具。 苹果已经为这项工作提供了一组工具。

在这篇文章中,我们天津建设网站将向您展示如何使用它们 访问和调试静态网站 以及 WordPress的网站 iPhone和iPad的iOS。

闲话少说,我们开始吧。

推荐阅读: 移动模拟在Google Chrome

开始

首先,发射 Safari 并使开发人员工具通过 Safari >首选项 . 在 先进的 选项卡,勾选 在菜单栏显示开发菜单 选择。

一个新菜单叫 开发 将出现在Safari菜单栏。

然后,在你的iPad或iPhone,去 设置>旅行 . 同样,在 先进的 菜单,使 网络督察 ,就像这样。

WordPress-based网站

天津建设网站需要一个相对路径的CSS,图像,和JavaScript链接是正确地加载在iPad或iPhone。 如果您正在开发WordPress-based网站,所有资产路径是绝对的。 让他们一个相对路径,安装和激活这个插件: 相对URL 。

一旦激活,url的路径将:

…变成像你见下:

调试网站

首先,您需要知道您的网络IP地址号码。 去 系统首选项>网络 . 在那里,你会发现IP地址。 同时,确保你的苹果设备- Mac, iPad, iPhone——连接在同一个无线网络,这样你就可以访问这个网站在iPad或iPhone上。

在你的iPad或iPhone,启动Safari浏览器应用程序和访问 localhost: 8888 您的web项目目录——例如紧随其后 localhost: 8888 / wordpress . 如果你设置你的本地服务器使用MAMP, localhost: 8888 应该是你默认本地服务器地址。

正如你所看到的,我们把我们的网站,在这种情况下WordPress-based,在iPad上。

此外,能够调试开发工具的网站,你需要 把你的iPad或iPhone使用USB Mac . 然后,去旅行 开发 菜单,并选择您的连接设备。

做完了。

在以下截图,我们选择 DOM树 从开发工具中,您可以看到各自元素的iPad或iPhone突出显示。 技术现在可以调试你的网站在iPad或iPhone,像你一样在你的桌面。