移动端调试

发表于 2019-06-18 分类于 阅读次数：

一些调试工具

  1. 直接在 chrome，firefox 等开启模拟器调试，简单直接，还能模拟网络等，但是无法 100% 还原手机的真实情况

  2. chrome 远程调试功能

    chrome://inspect/#devices

    需要连接数据线，其次是设置比较繁琐，而且还限制了 android 手机。对于 IOS 的调试则可能要使用 Safari 的另一套工具

  3. weinre：远程调试，在 PC 上生成一个像 chrome 开发工具一样的调试器，需要手动引入 js

  4. Eruda、vConsole：在移动端页面上生成一个调试器，调试信息会挡住操作元素，查看复杂数据结构的 log 不方便，需要手动引入 js

  5. 安装各种虚拟机 sdk，在电脑上进行手机调试。能比较真实模拟手机，但是安装繁琐，操作不方便，无法模拟真实的手势操作

Eruda

https://github.com/liriliri/eruda

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

  1. 按钮拖拽，面板透明度大小设置。
  2. Console 面板：捕获 Console 日志，支持 log、error、info、warn、dir、time/timeEnd、clear、count、assert、table；支持占位符，包括%c 自定义样式输出；支持按日志类型及正则表达式过滤；支持快捷命令加载 underscore、jQuery 库；支持 JavaScript 脚本执行。
  3. Elements 面板：查看标签内容及属性；查看应用在 Dom 上的样式；支持页面元素高亮；支持屏幕直接点击选取；查看 Dom 上绑定的各类事件。
  4. Network 面板：捕获请求，查看发送数据、返回头、返回内容等信息。
  5. Resources 面板：查看并清除 localStorage、sessionStorage 及 cookie；查看页面加载脚本及样式文件；查看页面加载图片。
  6. Sources 面板：查看页面源码；格式化 html，css，js 代码及 json 数据。
  7. Info 面板：输出 URL 及 User Agent；支持自定义输出内容。
  8. Snippets 面板：页面元素添加边框；加时间戳刷新页面；支持自定义代码片段。

使用

通过 CDN 使用：

<script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script>
<script>
  eruda.init()
</script>

通过 npm 安装：

npm install eruda --save

在页面中加载脚本：

<script src="node_modules/eruda/eruda.min.js"></script>
<script>
  eruda.init()
</script>

Js 文件对于移动端来说略重（gzip 后大概 100kb）。建议通过 url 参数来控制是否加载调试器，比如：

;(function() {
  var src = 'node_modules/eruda/eruda.min.js'
  if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return
  document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>')
  document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>')
})()

初始化时可以传入配置：

  • container：用于插件初始化的 Dom 元素，如果不设置，默认创建 div 作为容器直接置于 html 根结点下面
  • tool：指定要初始化哪些面板，默认加载所有
let el = document.createElement('div')
document.body.appendChild(el)

eruda.init({
  container: el,
  tool: ['console', 'elements'],
  useShadowDom: true
})

vConsole

https://github.com/Tencent/vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板

特性

  • 查看 console 日志
  • 查看网络请求
  • 查看页面 element 结构
  • 查看 Cookies、localStorage 和 SessionStorage
  • 手动执行 JS 命令行
  • 自定义插件

使用说明

下载 vConsole 的最新版本（不要直接下载 dev 分支下的 dist/vconsole.min.js），复制 dist/vconsole.min.js 到项目中：

在 HTML 中引入 vConsole 模块

<script src="dist/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole()
  console.log('Hello world')
</script>

在 vue 项目中：使用 npm 安装

npm install vconsole

在 main.js 中引入

import VConsole from 'vconsole'
const isDebug = true
// 本地开发调试注入 vConsole
if (isDebug) {
  new VConsole()
}

weinre

http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

  1. Element： 查看/修改 dom，查看/修改 dom CSS
  2. Resources：查看/修改 localStorage, sessionStorage
  3. Network：查看网络请求
  4. Timeline：
  5. Console：查看控制台输出

不能做 JS 调试

使用

# 安装
npm install -g weinre

# 启动 weinre 服务
weinre --boundHost 192.168.3.44 --httpPort 8888

启动调试客户端
在浏览器中打开 'http://192.168.3.44:8888' 即可启动调试客户端

在需要调试的页面中添加如下
<script src="http://192.168.3.44:8888/target/target-script-min.js#anonymous"></script>

spy-debugger

https://github.com/wuchangming/spy-debugger

微信调试，各种 WebView 样式调试、手机浏览器的页面真机调试。便捷的远程调试手机页面、抓包工具，支持：HTTP/HTTPS，无需 USB 连接设备

spy-debugger 集成了weinre，简化了weinre需要给每个调试的页面添加 js 代码。原理是拦截所有 html 页面请求注入weinre所需要的 js 代码。让页面调试更加方便

1、页面调试＋抓包
2、操作简单，无需 USB 连接设备
3、支持 HTTPS
4、spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
5、自动忽略原生 App 发起的 https 请求，只拦截 webview 发起的 https 请求。对使用了 SSL pinning 技术的原生 App 不造成任何影响。
6、可以配合其它代理工具一起使用(默认使用 AnyProxy) (设置外部代理)

基本使用

# 安装
npm install spy-debugger -g
# 启动
spy-debugger
#设置手机的HTTP代理
代理IP地址设置为PC的IP地址，端口为spy-debugger的启动端口(默认端口：9888)
# 手机安装证书
手机浏览器访问 http://s.xxx
设置->通用->描述文件与设备管理->找到node-mitmproxy CA（安装）
设置->通用->关于本机->证书信任设置-> 找到node-mitmproxy CA（打开）

自定义选项

# 自定义端口
spy-debugger -p 8888

# 设置页面内容为可编辑模式
spy-debugger -w true

# 是否只拦截浏览器发起的https请求(默认： true)
spy-debugger -b false

# 是否允许weinre监控iframe加载的页面(默认： false)
spy-debugger -i true

# 是否允许 HTTP 缓存(默认： false)
spy-debugger -c true

m-console

https://github.com/fwon/m-console

手机远程调试工具，手机通过代理连接上 PC 后，可以在 PC 版浏览器打印 log 和错误日志

需要手动给每个调试的页面添加 js 代码

DebugGap-VIDE

https://www.debuggap.com/debug_webview.html

Mobile Debug

https://www.mobiledebug.com/

whistle

https://segmentfault.com/a/1190000016058875?utm_source=tag-newest
http://wproxy.org/whistle/

chii

https://github.com/liriliri/chii

抓包工具

AnyProxy
https://github.com/alibaba/anyproxy
Zan Proxy
https://youzan.github.io/zan-proxy/