搞快点

移动端调试

一些调试工具

  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="https://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内部集成了weinrenode-mitmproxyAnyProxy
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/

抓包工具

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

赞(0) 打赏
未经允许不得转载:稻草人 » 移动端调试

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址