每天一点网站优化之：web页面移动端调试

carry12138
2,626 阅读6分钟

title: 每天一点网站优化之：web页面移动端调试 date: 2019-08-16 17:00:00 tags: -JavaScript categories: JavaScript

在web开发的过程中，调试是不可或缺的一部分。pc的调试可以通过debugger和console来完成，对console感兴趣的同学，可以参考 chrome调试技巧之console

但是，如果我们的web页需要兼容移动端，那么调试就变得没那么容易。在本篇文章中，我将介绍几种第三方工具帮助你完成移动端web的调试。

移动端调试的工具有很多，当前市场上比较流行的有以下几种。各种工具有不同的特点，适合使用场景也各有不同，大家可以按照自己的需求选择。

名称 兼容的移动端浏览器 debug环境 是否需要修改源码 所需硬件 优点 缺点
Mac+Ios+Safari safari mac浏览器 否 数据线+iphone/ipad+mac 无需修改代码 兼容性差，需要数据线
Chrome+Android android浏览器 pc端chrome 否 数据线+安卓手机/平板+任意电脑 无需修改代码 需要数据线，需要翻墙
weinre all pc chrome/safari浏览器 是 任意移动端设备 无需数据线，调试方便 需要修改代码
vConsole all 移动端当前网页 是 任意移动端设备 无需其他设备，调试方便 需要修改代码，会修改移动端页面样式，可能引发冲突，性能差
Eruda all 移动端当前网页 是 任意移动端设备 无需其他设备，调试方便 需要修改代码，会修改移动端页面样式，可能引发冲突

1.Mac+Ios+Safari Chrome+Android

Mac+Ios+Safari

如果你有mac电脑和iphone或ipad，那么你就可以通过数据线连接电脑和移动端，随后在mac上调试iphone的safari浏览器中打开的网页。

这个方法适用于满足以下几点的情况

  • 拥有mac和iphone/ipad的高级（you qian）开发人员
  • 页面只需要在safari浏览器中正常运行，不用兼容微信浏览器和Android

下面是使用方法

第一步打开iphone手机的开发者模式，流程是：【设置】->【Safari】->【高级】->开启【Web检查器】,如图1.1

image

第二步：打开Mac上Safari的开发者模式，流程是【Safari】->【偏好设置】->【高级】->【在菜单栏中显示“开发”菜单】勾选

image

用数据线将iphone手机和mac连接起来，在电脑的safari中按照流程执行：【开发】->【手机名称】->【正在调试的网站】

image

最后，就可以按照调试pc端页面的思路来调试ios的页面了

image

2.Chrome+Android

  • android系统 4.0以上， 移动端chrome浏览器
  • pc端chrome浏览器

使用方法

1.使用usb将移动段与PC相连接；

2.移动段中选中"开发人员选项"->"USB调试"；

3.打开pc侧chrome, 在地址栏中输入chrome://inspect 选中discover usb devices。可以看到我们的移动设备，如下图所示

iamge
4.点击inspect，（需科学上网）就可以开始调试了
image

  • 优点：可以调试js
  • 缺点：仅限chrome浏览器

3.weinre

api参考： people.apache.org/~pmuellr/we…

weinre原理

image

  • Debug客户端（client）：本地的WebInspector，远程调试客户端。
  • Debug服务端（agent）：本地的HTTPServer，为Debug目标页面与Debug客户端建立通信。
  • Debug目标页面（target）：被调试的页面，页面已嵌入weinre的远程js。

客户端、目标页面与Debug服务端之间使用XMLHttpRequest (XHR)进行HTTP通信，你通常的使用情形是将Debug客户端与服务端搭建在桌面开发环境，Debug目标页面放在移动设备。 由于Weinre的debug客户端是基于Web Inspector开发，而Web Inspector只兼容WebKit核心的浏览器，所以只能在Chrome/Safari浏览器打开Weinre客户端进行调试。

weinre使用方法

在待测试页面head中嵌入script

<script src="http://myIp:port/target/target-script-min.js#anonymous" type="text/javascript"></script>

或通过npm安装weinre

// 全局安装命令 
sudo npm instal -g weinre

接下来，在命令行中输入

weinre --boundHost [hostname | ip address |-all-] --httpPort [port] //启动weinre
  • boundHost 为可以访问weinre server的设备，默认为localhost，我们可以把它设置为all，确保移动端和本地环境都能使用weinre。
  • httpPort 必须为闲置端口，默认8080，如果8080已被占用，需要手动设置为其他端口
  • 要确保调试页面所在设备与当前开发环境（包括Debug客户端和Debug服务端）都处于同一网段内

最后，用chrome或safari浏览器打开刚刚启动weinre时设置的ip和端口，如我使用的启动命令为

weinre --boundHost 10.13.1.91 --httpPort 8889

则我在浏览器中打开的页面为 http://10.13.1.91:8889/

如果你的weinre启动成功，那么主页应该如下

image

点进 debug client user interface 链接，Targets目录下就是当前weinre监控的所有页面

image

  • url上的id与页面嵌入的script #后面添加的id一一对应
  • tab的用法与chrome相同
  • 调试过程中移动端不能息屏，否则连接会丢失

4.vConsole Eruda

vConsole 和 Eruda之所以放在一起讲解，是因为二者无论从用法还是功能上，都十分相似。

eruda

官网 github.com/liriliri/er…

使用方法

首先用npm安装eruda

npm install eruda --save

然后在页面的head中添加以下代码

<!--引入目录中的eruda配置文件-->
<script src="node_modules/eruda/eruda.min.js"></script>
<!--或无需安装，直接通过cdn引入-->
<script src="//cdn.jsdelivr.net/npm/eruda"></script>

<script>eruda.init();</script>

最后，页面执行后右下角将出现eruda标志，轻触标志将会在当前页面下方弹出调试框

image

vConsole

vConsole是腾讯开发的一款移动端调试工具 官网：github.com/Tencent/vCo…

使用方法

在head中嵌入以下代码

<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
</script>

效果如下

image

点击 vconsole 就可以弹出调试框

eruda 和 vConsole 的优缺点

  • 优点：不需要其他的硬件，只需要有移动端，就可以进行页面调试。可以在任意浏览器中执行调试，因此可以用来解决兼容性bug。
  • 缺点：调试工具的使用依赖页面的正常加载，如果页面打不开，按钮也不会出现； 调试框占用了大部分页面，导致调试效率低； 操作按钮的行为会对页面有影响，如ios系统有一个经典问题，输入框弹出后页面移位导致的失焦问题，用eruda或vconsole调试时，点击按钮相当于移动页面，问题就不复存在了。

关于移动端web调试的总结：

在移动端web开发大行其道的今天，移动端web页面的调试问题也变得更为重要。前文总结了当前流行的几种移动端调试工具，但都存在各种各样的问题。 现阶段同学们遇到移动端调试的相关问题时，可以回到文章开头的表格，根据自己的需求选用一样工具。

avatar
文章
阅读
粉丝