面试题(五):如何调试手机上的HTML?

html-css07

面试题(五):如何调试手机上的HTML?,第1张

在开发中,为什么安卓的HTML下面有按钮,在苹果设备上没了?

下面我介绍如何通过手机调试html~

点击xx.xx.com-index.html 即可调试。

使用浏览器可以进行手机效果测试:

现在各大浏览器都有这种功能了, 谷歌、QQ、360搜狐等;

首先打开网页,点击右键列表里会有“审查元素”,再点击手机那个按钮,就可以调整屏幕宽度查看手机效果。

1、打开手机web检查器。

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

2、链接电脑(Mac)

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

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

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

3.调试网页

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