移动端开发的常见调试方法大集

发表于 | 分类于

移动端开发浅析

目前对于用户而言，移动端的使用场景基本已经替代了大部分PC的场景，所以对于前端开发人员来讲，移动端的开发和测试手段需要很好的了解；关键在于目前的移动端应用开发存在很多不一样的方案：

  • 纯web应用开发【WPA的应用】
  • 混合开发【hybrid方案：纯webview模式、react-native、weex、小程序等各种方案】
  • flutter新型跨端应用处理【基于dart语言的开发】

本文着重浅析的是关于web这一侧的开发和调试方案；

  1. chrome本地调试
  2. 模拟器调试【web和webview内容调试】
  3. 真机调试【安卓应用的webview】

而前端开发和调试最重要的一环就是在本地的各种环境[浏览器/模拟器/真机]中能够运行本地的代码，本地的修改能够实时反馈到对应环境中；而目前很多web侧的JavaScript代码都是通过各类打包工具完成的，其中webpack又是使用最为广泛的工具，所以我们需要的是打包后的代码，而打包后的代码需要存在一个启动了http服务的文件夹中，这样可以配合代理工具[nginx、charles等]来完成前端资源的本地调试。

移动端开发调试浅析

移动端关于web侧的本地开发和调试主要三要素：

  • 各环境端 ：【浏览器/模拟器/真机】
  • 代理工具[nginx、charles等]
  • http服务 【http-server 或者其他的集成http服务的脚手架工具】

可以理解成为如下的模型：

1
2
3
4
5
6
各环境端               代理              本地资源服务
+-----+             +-----+             +-----+
|  A  |-----------> |     |-----------> | HTTP|
|  B  +             |PROXY|             |  JS |
|  C  | <-----------|     |<----------- | CSS |
+-----+             +-----+             +-----+

浏览器本地开发和调试

浏览器调试可以说前端首推就是chrome，chrome的dev tools简直是前端开发的神器；常用功能：

  1. 元素审查【查看thml元素、样式，还可以直接调整、设置元素hover等状态】
  2. network【所有请求的查看地，可以查看请求的远程ip、消息/响应的报文内容等】
  3. source【可以查看请求的资源文件】

为了让浏览器能够把请求的资源走到本地，有两种常见的方法：

  1. host修改+http服务
    直接修改hosts文件的内容，可以把前端资源的域名指向本地，保持path和本地前端资源http服务路径一致即可，需要注意的是，修改hosts文件可能没有实时生效，chrome://net-internals/#dns 可以在这地址进行手动的清除操作。
    • 不方便的如果这个域名还有其他的资源想走线上的话，如果不作特殊配置，可能就会请求失败。
  2. 代理配置+http服务
    配合chrome的扩展应用处理，使用SwitchyOmega这样的代理工具，将请求代理到nginx、charles等监听的端口上，然后利用代理工具的灵活性，配置相应的规则，把需要走本的的资源映射到本地，非本地资源保持不变继续走线上常规请求。
    • 不需要修改host，可以很灵活的配置各种代理匹配规则，仅仅代理本地资源即可。

nginx的配置

可以通过nginx来配置本地的代理规则，仅仅代理本地资源即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
server {
    listen 80;

    listen 443 ssl;
    ssl on;
    server_name fesource.com;

    ssl_certificate /usr/local/fesource.com.crt;
    ssl_certificate_key /usr/local/fesource.com.key;

    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;

    location ~* /(feproject_1|feproject_2|feproject_3)/ {
        # 几个走本地的前端工程
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:8888;
    }

    location ~ /(common|const|cdn)/ {
        # 公共服务走线上
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_pass http://common.fesource.com;
    }

    location / {
        # 默认走线上
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_pass https://fesource.com;
    }

    access_log /var/log/nginx/fesource.com.log;
    error_log /var/log/nginx/fesource.com.error.log;
}

charles的代理规则

  • 安装需要破解
  • 关于charles的配置，想要代理 fesource.com/feproject_01/的所有请求，无论使用map local还是map remote，在实际请求map from的表单中的path里面写上/feproject_01/*，在代理请求map to的表单中的path里面写上/feproject_01/ 即可；
  • 需要开通macos proxy才可以代理ios模拟器
  • 需要开通ssl proxy才可以代理https的请求

模拟器本地开发和调试

对于一些安卓和ios的客户端开发而已，模拟器是调试的利器，而对于前端而言，特别是基于webview的混合开发，模拟器也是必备的，

  1. 生成模拟器应用[安卓和ios不一致]，以ios为例，需要安装xcode，带有模拟器
  2. 安装应用
    在应用所在根目录下执行：xcrun simctl install booted fesource.app
  3. safari调试webview内容
    运行模拟器上安装的应用，需要分别在模拟器与电脑上做设置
    • 模拟器端Safari打开调试: 设置=>Safari=>高级=>选中 “JavaScript”,”Web检查器”
    • Mac端Safari打开调试: 菜单=>Safari=>偏好设置=>高级Tab=>”在菜单栏中显示”开发“菜单”
  4. 可以在safari的开发tab中看到有一个simulator的选项，展示的就是模拟器的可调式页面。

真机本地开发和调试

在真机上进行测试，一般是指测试机上，安装了打包好的对应应用的beta可调式版本，

  1. 打包可调式版本应用[安卓和ios不一致]，以安卓为例
  2. 安装应用
  3. chrome调试：
    • 数据线连接测试机，打开chrome://inspect/#devices，可以查看真机中的页面，并进行调试。【打开调试页面需要chrome可以翻墙】
  4. 安卓线上问题的处理：virtualXposed+WebViewDebugHook 可以调试线上的应用bug

具体实践：
在大客户端里面有着很多的hy页面，这样的页面也是前端来负责开发的，那么如在在客户端运行并调试本地代码就变得特别的重要了，记录下自己的波折路程【主要记载的是安卓客户端的调试】，大概的步骤如下【需要准备好代理工具：charles 或者其他，本文以charles为例】：

  1. 下载最新版的开发者版apk，一般是名字含有beta的类似 beta_009_app.apk 的安装包，安装到手机；【各种方案不一样】
  2. 设置禁止缓存、https安全信任：进入HY页面=>设置”缓冲方式 线上资源”，”https通过无证书的站点”，”禁止浏览器缓存js和css”；
  3. 手机wifi链接内网，并使得pc和手机在局域网内【可以手机和pc都连接公司wifi或者手机链接pc共享的wifi】，设置手机连接的wifi代理，代理地址为pc的ip地址，端口是8888【charles的端口，若果是其他的代理工具，视情况修改端口】，这样的话所有的手机请求将会被 charles代理；
  4. 配合charles的代理功能【map local、map remote、rewrite等】，将charles代理的手机请求转移到本地，完成客户端执行本地代码；【https的安全连接需要特殊处理，charles的菜单栏=》help=》ssl proxying=》分别点击install charles root certifcate……3项：包括安装charles根证书、模拟器证书、客户端证书，其中客户端证书需要手机访问 chls.pro/ssl 来安装charles的证书，这样子就是客户端和charles建立了https安全连接，而charles可以吧这个https连接map到http连接上，起到了一个反向代理的作用，需要注意的是手机的下拉提示栏里面可能会提示手机上网被第三方（charles）监测，当你清除kill这个状态栏后，证书会被移除，需要重新访问chls.pro/ssl 来重新获取证书，不然https连接将会出错】
  5. 现在已经可以运行本地的代码了，那么怎么进行调试【这里需要注意的是：硬性要求是chrome可以翻墙】，需要使用chrome+数据线+手机的组合，手机通过数据线连接pc，手机打开开发者调试模式，然后就可以打开beta的app，进入hy的页面，此时使用chrome访问 chrome://inspect/#devices 这个网站【确保打钩选中Discover USB devices】，可以捕捉到移动端的hy页面列表，还可以点击，弹出一个移动端页面和chrome开发者工具组合窗口，就可以像网页一样进行调试，

tips：关于charles的配置，想要代理 fesource.com/feproject_01/的所有请求，无论使用map local还是map remote，在实际请求map from的表单中的path里面写上/feproject_01/*，在代理请求map to的表单中的path里面写上/feproject_01/ 即可；

微信小程序[其他小程序和快应用等方案]和其他各类方案

  1. 各类小程序使用对于的开发者工具
  2. TBS Studio 的使用： https://x5.tencent.com/guide/debug.html
  3. weinre和vconsole等调试工具的使用

React-native

待更新…

flutter

待更新…