如何在移动设备上调试html5开发的网页

  长期从事计算机组装,维护,网络组建及管理。对计算机硬件、操作系统安装、典型网络设备具有详细认知。

  通过【设置】【Safari】【高级】【Web检查器】打开。见下图(点击查看大图),并且你会看到该选项下面对电脑操作的相应描述,照做就好。

  2.1 先在手机Safari中打开你想调试的网页,并用数据线连接到电脑(我这里是Mac)

  2.2 再在电脑上打开Safari点击【Develop】菜单,就会看到如下图所示(点击查看大图):

  3.3 点击2.2中的网站名就会在电脑上打开Safari的控制台,如下图(点击查看大图):

  如上3.3图所示,此时你可以查看手机网页的DOM结构,并且和电脑端网页调试无异,当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来,如下图(点击查看大图):

  1.1【设置】【关于手机】【版本号(Build number)】,对版本号这一项连点7下(这是官方文档里的说法)就会提示“你已成为开发者”。

  1.2 再返回【设置】【开发者选项】【USB调试】打开手机USB调试。

  3.1 在手机上的Chrome里打开想要调试的网页,用数据线连接手机和电脑(我的是Mac。唉~我只是强调平台的不同,不要误会)。

  4.1 你可以点击图3.2中检测到的设备上正在运行的网站下面那个【inspect】,或者在浏览器中输入 localhost:9222 打开手机正在浏览的网页列表,如下图:

  4.2 点击上图中的网站缩略图,就会跳转到Google的一个代理链接(链接可能被墙……,挂代理)就会打开如下图所示的控制台(点击查看大图):

  4.3 这就和电脑上网页调试没什么差别了,鼠标经过DOM节点,手机上的布局同样也会高亮起来:

  1【专注:Python+人工智能Java大数据HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】

  2、mac端打开调试:Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。

  3、在 OS X 中启动 Safari 之后,以 USB 电缆正常接入 iOS 设备,并在此移动设备上启动 Safari。此时点击计算机上的 Safari 菜单中的“开发”,可以看到有 iOS 设备的名称显示,其子菜单项即为移动设备上 Safari 的所有标签页,点击任意一个开始调试。

  黑马程序员为大学毕业后,有理想、有梦想,想从事IT行业的年轻人改变自己的命运。黑马程序员成就IT黑马

  通过【设置】【Safari】【高级】【Web检查器】打开。见下图(点击查看大图),并且你会看到该选项下面对电脑操作的相应描述,照做就好。

  2.1 先在手机Safari中打开你想调试的网页,并用数据线连接到电脑(我这里是Mac)

  2.2 再在电脑上打开Safari点击【Develop】菜单,就会看到如下图所示(点击查看大图):

  2.3 点击2.2中的网站名就会在电脑上打开Safari的控制台,如下图(点击查看大图):

  此时你可以查看手机网页的DOM结构,并且和电脑端网页调试无异,当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来,如下图(点击查看大图):

  一、当您做的只是静态页面时,可以直接拷贝到手机或移动设备,用机器的浏览器打开可测试。

  三、在同一网络下,在PC端设置IIS,设置好机器IP,用移动设备访问IP地址进行测试

上一篇:杭州Unity3d游戏项目实战玩家背包及生命的制作过   下一篇:花钱学习制作糖炒山楂(雪里红)的过程?如题
用户名: 新注册) 密码: 匿名评论
评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规。)
热门搜索:

如何在移动设备上调试html5开发的网页

长期从事计算机组装,维护,网络组建及管理。对计算机硬件、操作系统安装、典型网络设备具有详细认知。 通过【设置】【Safari】【高级】【Web检查器】打开。见下图(点击查看大图