前端跨平台调试

· 2020-04-27 · # Debug # 移动端 # 调试

如何调试移动端页面一直是比较头疼的事。与桌面浏览器不同，当H5页面嵌入到app后，无法很方便地按出F12来查看元素，或者断点调试js。另外，移动端设备差异化非常严重，iphone 6 到 iphone 11，android 更是不用多说。

移动端调试痛点

设备差异、环境差异、系统差异。PC端浏览器开发者工具，VS Debug。移动端，我的手机是好的，测试小姐姐说她的手机有bug。微信微博等第三方环境，怎么调试？

常用调试方法

Charles/Fiddler

抓包工具，可以截取包括 https 在内的各种网络请求并方便的查看具体信息。通过配置 WIFI 代理，也可以拦截手机发出的请求，在一定程度上帮助 debug。软件付费，而且它定位不了 js 的报错，所以只能作为一个辅助工具。

Android + Chrome浏览器

第一步：打开 Android 手机 设置 > 开发者选项 > USB调试。

第二步：通过数据线连接你的电脑和 Android 手机，允许USB调试。

第三步：Android手机下载一个手机版的Chrome浏览器，并在手机上的 Chrome浏览器 中打开你需要调试的页面。

第四步：打开电脑上的 Chrome浏览器，输入chrome://inspect/#devices

Mac+IOS+Safari

第一步：打开苹果手机 设置 > Safari浏览器 > 高级 > Web检查器

第二步：打开 Mac 上的 Safari浏览器 > 偏好设置 > 高级 > 在菜单栏中显示“开发”菜单

第三步：用数据线连接你的 Mac 电脑和苹果手机，并选择信任设备。然后在手机的 Safari浏览器 中打开你需要调试的页面，然后在电脑Safari中打开调试页面，菜单 > 开发 > 设备名。选择打开的页面。

vConsole

腾讯出品的 Web 调试面板。vConsole 会在你网页中加一个悬浮的小按钮，可以点击它来打开关闭调试面板，并查看 DOM、Console、Network和 本地存储 等信息。基本可以满足普通前端开发的需求。使用方法也很简单，通过npm安装或者直接在需要的页面引入 js文件 ，然后 new VConsole() 就可以了。

Eruda

Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。

weiner

weinre是一款很不错的网页检查工具，可以通过在本地启动一个 weinre 服务，并向手机网页嵌入一段 js 脚本来实现和电脑的通信，已达到类似浏览器开发工具那样的的调试效果，它的操作界面和 vConsole 差不多，主要包括查看 DOM、Console、Network 等，只不过这一切是在电脑上操作，而不是在手机上。

常见调试场景

本地开发host映射，如微信，微博授权，支付域名固定
独立H5页面真机调试
嵌入第三方调试
特定第三方环境调试
线上环境调试

调试工具推荐

whistle是基于Node实现的跨平台web调试代理工具，主要用于查看、修改HTTP、HTTPS、Websocket的请求/响应，也可以作为HTTP代理服务器使用，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能。

官方文档：wproxy.org/whistle/

安装使用

安装
```
npm install -g whistle
```

命令

w2 help

  Usage: whistle <command> [options]

  Commands:

  status              Show the running status of whistle
  use/add [filepath]  Set rules from a specified js file (.whistle.js by default)
  run                 Start a front service
  start               Start a background service
  stop                Stop current background service
  restart             Restart current background service
  help                Display help information

使用

// 启动
w2 start
// 重启
w2 stop
// 停止 
w2 stop

设置代理

1、全局代理

2、浏览器代理

安装浏览器插件，如Chrome： SwitchyOmega

3、移动端设置代理
访问配置页面
- 方式1：域名访问 http://local.whistlejs.com/
- 方式2：通过ip+端口来访问，形式如 http://whistleServerIP:whistlePort/ e.g. http://127.0.0.1:8899
- 方式2：通过命令行参数 -P xxxx 自定义webui的端口(xxxx表示要设置的端口号)，自定义端口支持上述两种方
  
  式访问，也支持 http://127.0.0.1:xxxx
注入文件配置
```
w2 add [filepath]
```

常用功能

Host映射

# host映射
192.168.0.107 http://checkout.m.xiaodianpu.com
192.168.0.107 http://oauth2.m.xiaodianpu.com
192.168.0.107 http://shop12345678.m.xiaodianpu.com
127.0.0.1 http://shop.m.xiaodianpu.com    # 直接的host配置
192.168.0.107:8081 one.test.com two.test.com         # 对全部域名路径替换host
192.168.0.107 three.com/ads                # 对特定的路径替换host

请求转发

# 请求转发
shop02604127.m.xiaodianpu.com https://shop02604127.m.xiaodianpu.com
oauth2.m.xiaodianpu.com https://oauth2.m.xiaodianpu.com
checkout.m.xiaodianpu.com https://checkout.m.xiaodianpu.com
**.m.xiaodianpu.com https://shop02604127.m.xiaodianpu.com  # 所有子域名转发生效

调试远程页面

https://shop02604127.m.xiaodianpu.com weinre://test

开启Eruda，插件形式注入

# 开启eruda
shop12345678.m.xiaodianpu.com whistle.inspect://e
checkout.m.xiaodianpu.com whistle.inspect://e

开启Vconsole, 插件形式注入

# 开启eruda
shop12345678.m.xiaodianpu.com whistle.inspect://e
checkout.m.xiaodianpu.com whistle.inspect://e

数据Mock

基于Mock.js

	
http://mock.local/data.json vase://mock_json_demo

开启跨域

# 开启跨域
test.com file://{createData.json}

脚本注入

# 脚本注入
test.com html://Users/fan/xdp-webapp/whistle/debug.html
shop02604127.m.xiaodianpu.com js://Users/fan/xdp-webapp/whistle/debug.js
test.com css://Users/fan/xdp-webapp/whistle/debug.css

重定向

# 重定向
https://www.baidu.com/ redirect://https://m.xiaodianpu.com

替换线上文件

static.seecsee.com/ufs/webapp/3de34c68/main-es2015.ce5beedbe4b13d68c4ab.js file:///Users/fan/xdp-webapp/dist/apps/webapp/browser/main.js

修改请求

# 修改url参数
www.qq.com urlParams://E:\test\params.json        
 
# 请求方法
www.qq.com method://post
 
# 添加请求头
www.qq.com reqHeaders://(x-a=1&x-b=a%20b)
 
# 修改referer(修改referer快捷方法)
www.qq.com referer://http://ke.qq.com/
 
# 修改cookie(修改请求cookie快捷方法)
www.qq.com reqCookie://{reqCookie.json}
 
# 修改请求表单
www.qq.com params://{form.json}

# 修改接口返回状态
https://test.com/test statusCode://500

修改响应

# 修改响应状态码
www.qq.com statusCode://500 # 请求不会发送到后台服务器，可以用来模拟4xx、5xx请求
www.qq.com replaceStatus://404 # 请求返回后再修改statusCode
 
# 添加响应头
www.qq.com resHeaders://(x-res-a=1&x-res-b=a%20b)
 
# 修改响应类型(修改响应类型的快捷方法)
www.qq.com resType://text/plain # 或者： www.qq.com resType://text
 
# 请求替换
www.qq.com https://www.baidu.com
 
# 本地替换(windows中目录分割符可以用`\`，也可以用`/`)
www.qq.com file://E:\xxx # 等价于： file://E:/xxx www.qq.com
# Mac或Linux
www.qq.com file:///User/xxx/test
# 如果要让本地没有对应文件的请求继续请求线上，可以采用
www.qq.com xfile://E:\xxx
 
# 本地替换jsonp
www.qq.com tpl://E:\xxx.json # xxx.json: {callback}({"ec": 0})
www.qq.com xtpl://E:\xxx.json # xxx.json: {callback}({"ec": 0})
	
# 说明：会把内容 append 到请求后面
http://mydomain.com/style.css resAppend://{myAppend.css}
# 说明：完全替换请求内容
http://mydomain.com/style.css resBody://{myResBody.css}

启用或禁用一些配置

# 拦截url里面有baidu的https请求
/baidu/ enable://intercept

# 拦截域名www.google.com下的所有https请求，且不在Network上显示
www.google.com enable://intercept|hide

# 禁用请求的缓存，只要经过代理且匹配到的请求都不会使用缓存
# 跟 cache 协议的区别是，cache 只是用来设置响应的缓存头
wwww.test.com disable://cache

# 禁用请求和响应的cookie
wwww.test.com disable://cookie # 也可以写成复数形式cookies

# 只禁用请求的cookie
wwww.test.com disable://reqCookie # 也可以写成复数形式reqCookies

# 只禁用响应的cookie
wwww.test.com disable://resCookie # 也可以写成复数形式reqCookies

whistle更多使用及插件开发请参考官方文档：wproxy.org/whistle/

项目中具体的问题，根据场景，选择合适的工具方法，搭配使用！