整理:手机端网页调试方案

最近更新时间:2015年3月13日
又及,这里有一个提要ppt

(本文前身是技术分享的ppt,因此有些图直接是ppt导出的。画的图全是原创,转载请注明,谢谢。)

在手机端网页开发的特定阶段,需要查看手机端的界面、交互与体验。2011年时,开发时有很大麻烦:

  • 相应的静态文件在测试服务器上,没有上线,需要绑定hosts
    而手机端直接绑定hosts是需要越狱/root的
  • 有的手机浏览器根本不认hosts文件,如uc
  • 手机端的调试工具匮乏
    断点调试、查看变量、查看样式等都很困难
  • 在电脑端改变UA和屏幕大小,并不能简单的模拟手机端的情形。比如触摸的事件处理

在2012年后,一些成型的方案已经出现,本文将他们整理出来,并画出了相关架构。涉及:

  • 绑定hosts
  • 使用chrome、safari、firefox、UC浏览器的远程调试
  • 使用weinre构建调试服务器

hosts绑定

hosts绑定有两种方案:

  • root手机,修改手机端hosts文件,连接网页服务器。
  • 使用代理,连接代理服务器,修改代理服务器的hosts文件以连接网页服务器。

方案1如下图:

常用方案

方案2如下图:

代理方案

显然代理方案更优,不需要root手机或者给手机越狱,也规避了某些浏览器根本不读hosts文件的问题。

代理方案要点如下:

代理方案要点

端口和ip对应起来即可。

部分浏览器远程调试

各个浏览器远程调试及其所用工具如下表所示:

平台 浏览器 链接方式 使用ADB 调试工具
iOS Safari (Mac) 数据线 Inspector
Android Android Chrome 数据线 内置 Inspector
Firefox For Mobile 数据线 Firefox原生调试工具
UC 开发者工具 数据线 Inspector

Safari远程调试

具体步骤:

  1. 设备开启调试,绑定Mac机器,USB连接Mac
  2. 打开safari,Ctrl + , > “高级”> 勾选“在菜单中显示开发”
  3. 菜单 > 开发
  4. 找到你的设备,打开inspector

可以看David的《如何在移动设备上调试网页》的safari章节以了解详细步骤。

Chrome

具体步骤,见Google Developers:Remote Debugging Chrome on Android

新版自动化了曾经需要的ADB port的步骤,还可以测试WebView。这里还允许在调试时自动做port-forwarding,可以不用刷机,不用改hosts。

如果遇到页面白板问题,尝试着将手机和桌面的Chrome都更到最新吧,并尝试着使用桌面端的chrome://inspect/#devices打开并刷新页面,然后打开Inspector。

可以看David的《如何在移动设备上调试网页》的chrome章节以了解详细步骤。

Firefox

国内有翻译关于firefox远程调试的一篇文章,但是这篇文章仅仅介绍了比较早版本的firefox远程调试,2012年十月份firefox的远程调试有了些许的升级,比第一版的半残的断点调试稍微好了一些,可以使用console了。

具体步骤,见MDN相关页面

Opera

Opera的调试曾经是最便利的,只需要连接到同一个无线热点即可调试。。更新到webkit内核之后,就只能走Webkit的传统调试方式了。

UC浏览器

UC浏览器的开发者版本,参考视频即可调试。

ADB

在使用firefox和UC浏览器调试时,需要用USB连接设备,并使用adb方式连接。
ADB = Android Debug Bridge,即安卓机器的调试桥接工具,我在百度网盘上放了一个副本

把 adb.exe 及其dll 放入系统路径中,即可以在CMD/terminal中使用adb命令了。

adb forward = 端口映射,提供透明socket通信。

ADB的使用中,端口有可能有冲突,windows端的命令如下:

  1. 查看使用了5037端口的进程pid:netstat –ano | findstr "5037"
  2. 根据pid查看进程:tasklist /fi "pid eq 进程的pid"
  3. 强制关闭进程:taskkill /f /pid 进程的pid

腾讯手机助手、360手机助手、豌豆荚等手机管理软件都会使用adb来进行手机的管理,因此调试前应先关闭这些软件,节约时间。

ADB的架构如下图:

ADB的架构

构建Weinre调试服务器

在使用webkit内核的移动端浏览器(比如海豚浏览器等),还可以使用Weinre来进行远程调试,调试方法是构建一个调试服务器并在页面中嵌入相应代码。

安装 Weinre的方法:

npm -g install weinre

Weinre的架构如下图所示:

Weinre的架构

Weinre的配置要点如下图所示:

Weinre的配置要点

具体步骤:

http://blog.csdn.net/dojotoolkit/article/details/6280924

另外,Adobe 公司出品的 Adobe Edge 也是挂在 weinre 上的。不过看到其高昂的云服务费用,就望而却步了。

模拟器

模拟器个人并不喜欢用,有些体验没有办法模拟,这里记录了一下网上提到的模拟器。

  • android SDK + Eclipse + ADT Plugin + AVD 模拟器
  • iOS模拟器
  • Phonegap手机模拟器*
  • Opera mobile emulator

文中没有列出的参考文章:


整理强迫症患者的一生
本博客也会同步到:[链接] 不来star一下吗

阿里妈妈招前端,有兴趣请 email 联系~

16.4k 声望
2.8k 粉丝
0 条评论
推荐阅读
前端技术周刊 2019-04-16
Chrome 意欲实现原生自动 lazyload 功能,并支持 img 和 iframe 的 loading="lazy" 配置,该特性预计在 Chrome 75 中支持。🔗

Humphry6阅读 2.2k

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青54阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan43阅读 2.9k评论 14

封面图

阿里妈妈招前端,有兴趣请 email 联系~

16.4k 声望
2.8k 粉丝
宣传栏