移动端真机调试

BeautyLee
3,050 阅读6分钟

前言

在开发环境中，我们可以用谷歌的f12大法，轻松的查看页面的内容和接口的请求，排查问题。那我们为什么还需要真机调试呢？相信我们在开发的时候遇到过这种问题：开发环境下没报错，可一到真机问题（bug）就暴露出来。让人很是懵逼。就不得不用我们真机排查问题啦!在最开始没有这个移动端调试利器之前我们都是alert栏代码有没有进入执行，但是这样的调试方法效率极其低下，很多时候，都是靠经验，或者是靠排除法。那么本文就以上难点，介绍几种移动端真机调试的方法。

安卓手机 + 数据线 + 电脑chrome浏览器

调试web的移动端页面

第一步：使用 USB 数据线将手机与电脑相连

第二步：打开手机的开发者模式（不同的手机不同，自行百度）

第三步：电脑打开 Chrome 浏览器，在地址栏输入：chrome://inspect/#devices 并勾选 Discover USB devices 选项

第四步：安卓手机下载chrome浏览器，用它访问你要访问的移动端页面。

第五步：电脑点击 inspect 按钮，即可打开对应的页面。

点击inspect我们就可以打开页面。

这个最大的优点支持我们在电脑上进行单步调试。也可以让我们调试基于WebView的Hybrid App。

调试Android上WebView

第一步：开启手机上的USB调试功能

第二步：打开Chrome浏览器，地址栏输入：Chrome://inspect，回车

第三步：Chrome会自动检测手机上打开的App，并列出可调试的WebView页面，如图：

Eruda

Eruda 是一个专为前端移动端、移动端设计的调试面板，类似Chrome DevTools 的迷你版。其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie信息、浏览器特性检测等等。

引入方式：

  1. 通过cdn
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
  1. 通过npm
npm install eruda --save
<!--把如下脚本引入到页面中-->
<script src="node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>

安装成功之后，可以看到如下图的一个悬浮的小icon,点击这个按钮就可以打开和关闭调试面板。

控制面板打开如下图所示：

我们可以在network面板看到所有的请求，并且包含请求和返回数据,如下图所示：

vconsole

腾讯出品的vconsole。他会在你的页面生成一个悬浮的vconsole的小按钮。点击这个按钮可以打开或关闭调试的面板。这个面板包含Log,System,Network,Element,Storage这几个选项 。类似Chrome DevTools 的迷你版。他其实和eruda 非常的相似，只是没有eruda那么强大,但也可与满足一些基本需求。如下图：

使用方法：

  1. 通过npm
npm install vconsole
<!--Import dist/vconsole.min.js to your project:-->
<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>
  1. 通过cdn外链

在html页面引入如下代码:

<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>
  1. vconsole-webpack-plugin

前面2种引入方式都需要我们在开发环境打开这段代码，生产环境注释掉。有点麻烦，如果生产环境忘记注释可就尴尬辣。那么就不得不我们的第三种方式vconsole-webpack-plugin

首先安装npm install vconsole-webpack-plugin --save-dev

然后在webpack.config.js文件

var vConsolePlugin = require('vconsole-webpack-plugin'); 
module.exports = {
...
	let envType = process.env.NODE_ENV != 'production'
    plugins: [
        new vConsolePlugin({
            filter: [],  // 需要过滤的入口文件
            enable: envType 
        }),
        ...
    ]
    ...
}

weinre真机调试

weinre 是一款较老的远程调试工具，功能与 Chrome DevTools 相似，需要在页面中插入一段 JS 脚本来实时调试页面 DOM 结构、样式、JS 等，另外它使用的是代理的方式，所以兼容性很好，无论是新老设备系统通吃，可以在PC上直接调试运行在移动设备上的远程页面。

如何使用：

第一步：weinre安装

全局安装: npm install –g weinre
局部安装: npm install weinre

第二步：启动weinre

weinre --httpPort 8099 --boundHost -all-
参数说明：
boundHost: [hostname | Ip | -all-]: 默认是 ‘localhost’
deathTimeout:  如果页面超过这个时间都没有任何响应， 那么就会断开连接。
httpPort: 设置Weinre使用的端口号，默认是8080

访问你的ip+端口,我们会看到如下页面：

第三步：debug client user interface，进入调试页面。

启动weinre之后，我们还要进入调试页面。点击页面上的debug client user interface。进入如下页面：

我们发现上面的Targets是none,这里还需要我们做另外一个操作。在调试页面引入脚本。

第四步：在调试页面引入脚本

<script src="http://localhost:809/target/target-script-min.js#anonymous"></script>

引入脚本文件之后，我们可以看到页面在Targets选项中有了内容，并且高亮了。这时，我们就可以进行调试。

这种方式好处是在页面上进行查看。并且可以实时的进行样式的修改。但是记得在生产环境把我们的脚本删除

代理 + spy-debugger

spy-debugger是一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy，自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。

如何使用:

  1. 安装插件(全局安装)
npm install spy-debugger -g
  1. 命令行输入spy-debugger，按命令行提示用浏览器打开相应地址
  2. 手机与电脑置于同一 wifi 下，设置手机的HTTP代理，代理IP地址设置为PC的IP地址，端口为spy-debugger的启动端口(默认端口：9888)
  3. 手机打开浏览器或者 app 中 H5 页面
  4. 打开桌面日志网站进行调试，可以查看页面结构和网络请求。

这种方式不区分ios和安卓，安装也不怎么麻烦，不需要我们引入额外的脚本信息，使用过程非常愉快。

工欲善其事必先利其器，没有好的调试工具或方法，移动端真机下的 debug 简直是前端的噩梦。有了好的工具解决bug的速度也变快啦！

本文使用 mdnice 排版

avatar
文章
阅读
粉丝