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

Question

如题所述

Answer 1

1、打开手机web检查器。

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

2、链接电脑（Mac）

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

2.2 再在电脑上打开Safari点击【Develop】菜单，就会看到如下图所示（点击查看大图）：

2.3 点击2.2中的网站名就会在电脑上打开Safari的控制台，如下图（点击查看大图）：

3.调试网页

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

Answer 2

一、iOS + Safari
1、打开手机web检查器。
通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图（点击查看大图），并且你会看到该选项下面对电脑操作的相应描述，照做就好。

2.链接电脑（Mac）
2.1 先在手机Safari中打开你想调试的网页，并用数据线连接到电脑（我这里是Mac）
2.2 再在电脑上打开Safari点击【Develop】菜单，就会看到如下图所示（点击查看大图）：

3.3 点击2.2中的网站名就会在电脑上打开Safari的控制台，如下图（点击查看大图）：

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

二、Android + Chrome
1.设置手机

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

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

2.设置电脑（Mac）
这块比较麻烦，因为要装一下Android的SDK。
2.1 下载Android SDK，并解压，我把整个adt目录放在了 /Users/David/adt/ 这里。
2.2 设置环境变量 。打开终端在David路径下（形如 DaviddeMacBook-Pro:~ David$）输入 open .bash_profile，如果文件存在则会打开，如果不存在则再输入touch .bash_profile 创建并打开这个文件。在文件里输入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ，关闭保存。最后在终端里输入 source .bash_profile 来更新环境变量使其生效。终端里输入 adb 出现命令帮助信息就是成功了。
2.3 在终端里输入 adb forward tcp:9222 localabstract:chrome_devtools_remote 。

3.链接电脑
3.1 在手机上的Chrome里打开想要调试的网页，用数据线连接手机和电脑（我的是Mac。唉～我只是强调平台的不同，不要误会）。
3.2 打开电脑上的Chrome，在地址栏里输入 about:inspect 选中 【Discover USB Devices】前面的复选框。出现下图画面（点击查看大图）：

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

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

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

好的，完结。本回答被提问者和网友采纳

Answer 3

在移动设备上调试html5开发的网页的方法（以苹果开发者为例来说明）：

1、手机端设置：

打开设置 → Safari → 高级 → Web 检查器 → 开。

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

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

此法优点：便捷，简单，高端大气上档次，可以调试外壳包裹的浏览器如微信。

缺点：只局限于苹果开发者。

Answer 4

移动端更多是手动拖拽，像是支付宝的首页应用，手划选择布局安排。手机屏幕太小了，不是主流，建议用浏览器点击F12查看源代码。

网页代码是前端显示的，并不是过时的产品，谷歌浏览器不断推陈出新，前端开发也是很火的一个编程语言，ThingJS在线平台支持javascript编程语言开发3D可视化效果图，3D图像可以支持手机端查看 ，这是我们的3D可视化开发界面截图。

Answer 5

你好，移动设备调试页面。
一、当您做的只是静态页面时，可以直接拷贝到手机或移动设备，用机器的浏览器打开可测试。
二、用Chrome浏览器中所还的模拟器进行IOS，Android测试
三、在同一网络下，在PC端设置IIS，设置好机器IP，用移动设备访问IP地址进行测试

以上希望能帮到您。祝工作愉快！