【前端】移动端调试

阅读数: 2021-11-18

对于移动端调试问题的一些思考

在生产环境上的内嵌应用往往会有非常严格的限制（无法开启控制台，代理阻断），当出现问题只能通过日志收集系统获取用户运行状态进行分析，因此建立前后端的日志收集系统非常有必要


// 辅助工具类
const $utils = {
  // 发起ajax请求
  ajax: function(options) {
    const xhr = new XMLHttpRequest()
    xhr.timeout = options.timeout || 60000
    xhr.onreadystatechange = function () {
      if (xhr.readyState !== 4) return

      const result = {
        status: xhr.status,
        headers: xhr.getAllResponseHeaders(),
        data: xhr.responseText
      }
      console.log('-response-', result)
      if (xhr.status === 200 || xhr.status === 304 || xhr.status === 202) {
        try {
          result.data = JSON.parse(result.data) || {}
        } catch (e) {
          console.log(e)
        }
        options.success && options.success(result)
      } else {
        options.error && options.error(result)
      }
      options.complete && options.complete(result)
    }
    options.async = typeof options.async === 'boolean' ? options.async : true
    options.data = typeof data === 'object' ? JSON.stringify(options.data) : options.data
    options.type = ['get', 'post', 'put', 'delete', 'update', 'patch'].indexOf(options.type.toLowerCase()) ? options.type : 'GET'
    options.type = options.type.toUpperCase()
    options.contentType = options.contentType || 'application/x-www-form-urlencoded'
    options.headers = {}
    console.log('-request-', JSON.stringify(options))
    xhr.open(options.type, options.url, options.async)
    xhr.setRequestHeader('Content-Type', options.contentType)
    for (const key in options.headers) {
      xhr.setRequestHeader(key, options.headers[key])
    }
    options.data ? xhr.send() : xhr.send(options.data)
  },
  // 获取URL参数并转换成对象
  getQueryParams: function(url, name) {
    const result = {}
    const reg = /[?&][^?&#]+=[^?&#]+/g
    const queryList = url.match(reg) || []
    for (let i = 0; i < queryList.length; i++) {
      const item = queryList[i]
      const temp = item.substring(1).split('=')
      const key = decodeURIComponent(temp[0])
      const value = decodeURIComponent(temp[1])
      result[key] = value
    }
    return name ? result[name] : result
  }
}

const colors = [
  '#0000CC',
  '#0000FF',
  '#0033CC',
  '#0033FF',
  '#0066CC',
  '#0066FF',
  '#0099CC',
  '#0099FF',
  '#00CC00',
  '#00CC33',
  '#00CC66',
  '#00CC99',
  '#00CCCC',
  '#00CCFF',
  '#3300CC',
  '#3300FF',
  '#3333CC',
  '#3333FF',
  '#3366CC',
  '#3366FF',
  '#3399CC',
  '#3399FF',
  '#33CC00',
  '#33CC33',
  '#33CC66',
  '#33CC99',
  '#33CCCC',
  '#33CCFF',
  '#6600CC',
  '#6600FF',
  '#6633CC',
  '#6633FF',
  '#66CC00',
  '#66CC33',
  '#9900CC',
  '#9900FF',
  '#9933CC',
  '#9933FF',
  '#99CC00',
  '#99CC33',
  '#CC0000',
  '#CC0033',
  '#CC0066',
  '#CC0099',
  '#CC00CC',
  '#CC00FF',
  '#CC3300',
  '#CC3333',
  '#CC3366',
  '#CC3399',
  '#CC33CC',
  '#CC33FF',
  '#CC6600',
  '#CC6633',
  '#CC9900',
  '#CC9933',
  '#CCCC00',
  '#CCCC33',
  '#FF0000',
  '#FF0033',
  '#FF0066',
  '#FF0099',
  '#FF00CC',
  '#FF00FF',
  '#FF3300',
  '#FF3333',
  '#FF3366',
  '#FF3399',
  '#FF33CC',
  '#FF33FF',
  '#FF6600',
  '#FF6633',
  '#FF9900',
  '#FF9933',
  '#FFCC00',
  '#FFCC33'
]

// 根据namespace选择颜色
function selectColor(namespace) {
  let hash = 0

  for (let i = 0; i < namespace.length; i++) {
    hash = ((hash << 5) - hash) + namespace.charCodeAt(i)
    hash |= 0 // Convert to 32bit integer
  }

  return colors[Math.abs(hash) % colors.length]
}

module.exports = {
  email: '',
  dataQueue: [],
  logNameSpace() {
    return window.localStorage ? window.localStorage.getItem('debug') : (window.debug || $utils.getQueryParams(window.localtion.href, 'debug'))
  },
  // 开关状态不能持久化保存，防止忘记关闭拖慢应用
  saveNameSpace() {
    return window.debugSave || $utils.getQueryParams(window.localtion.href, 'debugSave')
  },
  // 判断模块是否开启打印日志
  enableLog(namespace) {
    const logNameSpace = this.logNameSpace()
    return !!logNameSpace && !!namespace.match(new RegExp(`^${logNameSpace.replace('*', '.+')}$`))
  },
  // 判断模块是否开启保存日志
  enableSave(namespace) {
    const enablelog = this.enableLog(namespace)
    if (!enablelog) return enablelog

    const saveNameSpace = this.saveNameSpace()
    return !!saveNameSpace && !!namespace.match(new RegExp(`^${saveNameSpace.replace('*', '.+')}$`))
  },
  setup(level, namespace, options = {}) {
    level = level || 'log' // log、info、warn、error
    namespace = namespace || '*'

    options.format = options.format || '[$time_local] [$level] [$namespace] \n$context \n"$location_href" "$user_agent"'
    options.formatters = options.formatters || {}
    delete options.formatters.$context
    options.formatters = Object.assign({
      time_local: _ => (new Date()).toLocaleString(),
      level: _ => level.toUpperCase(),
      namespace: _ => namespace,
      location_href: _ => location.href,
      user_agent: _ => navigator.userAgent,
      referrer: document.referrer,
    }, options.formatters)

    const useColor = selectColor(namespace)
    const that = this

    return function() {
      if (!that.enableLog(namespace)) return

      const context = Array.prototype.slice.call(arguments).map(item => typeof item === 'object' ? JSON.stringify(item) : item).join(' 、 ')
      const reg = new RegExp(`\\$(${Object.keys(options.formatters).join('|')})`, 'g')
      const publicText = options.format.replace(reg, (match, format) => {
        const result = options.formatters[format]
        if (typeof result === 'function') {
          return result.call(that)
        }
        return result
      })

      const printText = '%c' + publicText.replace('$context', `%c${context}%c`)
      console[level](printText, `color: ${useColor};`, 'color: black;', `color: ${useColor};`)
      const sendText = publicText.replace('$context', context)

      that.enableSave(namespace) && that.data.push(sendText)
    }
  },
  download() {
    if (!this.dataQueue.length) return

    const aTag = document.createElement('a')
    const file = {
      name: `系统日志（${(new Date()).toLocaleString()}）`,
      blob: new Blob([this.dataQueue.join('\n')], {type: 'text/plain'}),
    }
    aTag.download = file.name
    const href = URL.createObjectURL(file.blob)
    aTag.href = href
    aTag.click()
    URL.revokeObjectURL(href)
  },
  send() {
    if (!this.dataQueue.length) return

    const that = this

    $utils.ajax({
      url: 'http:/xxx.xxx.xx',
      contentType: 'application/json',
      type: 'post',
      data: {
        email: that.email,
        content: that.dataQueue.join('\n')
      },
      success(res) {
        alert('上报成功' + JSON.stringify(res))
      },
      error(err) {
        alert('上报失败' + JSON.stringify(err))
      }
    })
  }
}

// LOG.email = '管理员邮箱地址'
// const loginfo = LOG.setup('info', 'main')
// localStorage.debug = '*'; window.debugSave = '*';
// loginfo('Hello world!')

除此之外，抓包是生产环境定位问题的绝佳手段之一，下面介绍生产环境抓包

移动端调试神器 Whistle

在前端开发中移动端开发技能必不可少。当我们遇到类似于这样的问题：

移动端Canvas渲染失败

微信获取openId回调页不匹配

微信浏览器文件上传失败

支付宝，微信H5支付域名校验不匹配

生产环境BUG，dev，test环境无法复现

当后端接口启用cors跨域时，本地环境无法访问

…

Chrome模拟器和微信开发者工具等都无法完美复现我们遇到的问题，这时候我们需要用到whistle来实现真机调试

Whistle原理

Whistle是一个Node实现的跨平台Web调试代理工具。它的作用可以理解为用Node开一个代理服务器，将我们需要调试的设备代理到whistle后，由whistle进行代理请求。同时whistle支持类似于hosts的转发规则，我们可以通过正则或者内置的一些指令对我们需要进行代理的域名进行转发，添加插件等。

安装whistle

1	npm install -g whistle

启动whistle

w2 start` or `w2 start -p 10086 ` or ` whistle start
➜  ~ w2 start
[!] whistle@2.5.23 is running
[i] 1. use your device to visit the following URL list, gets the IP of the URL you can access:
       http://127.0.0.1:8899/
       http://192.168.97.12:8899/
       Note: If all the above URLs are unable to access, check the firewall settings
             For help see https://github.com/avwo/whistle
[i] 2. configure your device to use whistle as its HTTP and HTTPS proxy on IP:8899
[i] 3. use Chrome to visit http://local.whistlejs.com/ to get started
复制代码

此时我们已经开启了whistle的代理，通过浏览器访问http://127.0.0.1:8899/即可看到 whistle控制台。

接下来我将介绍在window、mac、iPhone、Android中分别如何利用whistle进行代理抓包。

设置代理

移动端设置代理

连接到同一个WIFI下，iPhone及Android在wifi中设置代理，代理IP为：192.168.97.12（即是上面打印出来的局域网IP），端口号为：8899（也可以通过-p 10086 ）指定自定义端口号。保存后我们的移动端设备就已经连接上了whistle。

PC端设置代理

因为我们在PC日常开发中，常用Chrome浏览器，所以这里只展示下Chrome浏览器下的代理设置。

PC端Chrome代理时，我这里推荐使用 Proxy switchyOmega（Chrome插件）下载完成后，进入SwitchOmege配置。默认安装后，会有一个名为proxy的情景模式，我们将其改名为Whistle。

修改完名字后，我们将我们的局域网IP及whistle的端口号填入到代理服务器中并应用选项。

此时，我们就可以进行whistle在PC端的代理，这里还推荐修改一个配置。默认代理模式为系统代理，因为众所周知的原因，基本上程序员都会进行科学上网，所以这里将默认配置改为系统代理，避免我们日常使用时被代理到whistle，无法科学上网的问题。

安装HTTPS证书

现在基本上绝大多数域名都是走HTTPS协议，所以想要whistle进行HTTPS协议的代理我们还需要安装HTTPS证书。

下载证书

PC端：点击顶部工具栏中的HTTPS，打开whistle的HTTPS证书弹框，点击Download RootCA下载HTTPS证书。

移动端：连接上whistle代理后，通过浏览器扫码，会自动下载证书

window安装证书

下载完成后双击打开，将证书安装到受信任的根证书颁发机构 完成安装即可。

在这里插入图片描述

Mac安装证书

下载完成后双击打开，将证书安装到本地项目或者登录都可以，之后在你安装的地方搜索whistle，双击打开，选择信任，设置为始终信任

iPhone安装证书

设置—-通用—–关于本机——证书信任设置——>找到whistle证书打开信任

不同设备有点差异，总结可能有3步

扫一扫下载证书

设置 - 通用 - VPN与设备管理 - 配置描述文件 - 安装

设置 - 通用 - 关于本机 - 证书信任设置 - 开启

Android安装证书

视各个厂商系统而定，可以在具体扫码后根据提示设置。

Weinre调试

好了，至此我们完成了whistle的所有准备工作，接下来介绍whistle中给我们提供的功能

redirect 重定向

打开whistle控制台，我们可以看到左侧有个Rules，在这里面我们可以进行一些跳转规则的分组，配置。这里的配置类似于我们日常会修改的hosts文件的配置，前面的域名是需要代理的域名，后面的是需要指向的地址。这里我将https://www.baidu.com 重定向到 https://www.bilibili.com。

【！！注意！！这里在iPhone上有个坑，在iPhone上调试的时候，前面的域名一定要加上https，不然在iPhone中会出现证书验证不过的问题】

然后我们新开tab页，切换switchOmega到我们刚刚设置的Whistle情景模式，输入https://www.baidu.com 可以看到现在百度已经被成功跳转到B站了。

重定向在我们日常中的使用还是比较广阔的，举个例子：

当我们需要在本地访问线上接口时，会有cors跨域问题，这时候可以通过伪装域名来绕过这个限制

当我们在开发微信或者支付宝相关功能时，此时微信或支付宝后台有安全域名限制，这时候也可以通过这个重定向来完成

log 日志打印

移动端调试最痛苦的莫过于完全没办法看到log日志，特别是在生产环境下时我们也无法通过vconsole或者eruda等工具来辅助我们查看。所以这里我们可以通过在whistle中添加log://关键字来导出console日志。

配置好后，切换到Network选项中，我们可以在这里看到所有http请求，以此来排查接口或者资源请求等问题。选择到我们打开的域名所在的请求，例如我这里用https://www.baidu.com 举例。再通过右侧工具栏的Tools即可看到我们页面中使用到的console

这个功能适合我们在排查一些生产问题时，通过log日志去追踪问题所在，或者看到js中出现了那些错误。在一些机型兼容问题排查时有很大的帮助作用。

jsPrepend js注入

whistle支持让我们在加载网页时进行预制javascript代码的注入，点击左侧栏的Values，打开js脚本管理。这里我以注入eruda为例，首先我们去npm或者bootcdn等类似的网站上找到我们想要注入的一些工具库，例如我这里使用了eruda.min.js。通过Create创建一个新的脚本。将脚本文件拷贝进去。

然后新建脚本eruda.js嵌入初始化代码

OK，做好准备工作。我们再回到Rules中进行js注入的配置，这里我们注入刚刚写的eruda.min.js和eruda.js

然后我们再去打开下https://m.baidu.com查看下效果，可以看到eruda已经注入进来了

因为移动端不像Chrome的devTool一样，可以自由的修改及运行js代码，所以这个功能给我们提供了这种可能。同时也让我们可以在测试生产环境代码时可以注入一些方便调试的工具库进来。

weinre 移动端调试

weinre是一个历史悠久的移动端调试工具，其界面仿照Chrome的DevTool设计，可以轻松的看到Dom树的结构，Network请求，Console等等，不过因为其历史悠久目前稳定性较差，有些时候并不一定百分百生效，而且配置起来相对麻烦。whistle中也内置了weinre，让我们能够轻松快捷的去使用weinre。

同样，我们打开Rules，然后加https://www.baidu.com中加上weinew://baidu这个指令（这里最后的baidu是指weinre的实例名，可以自由指定）

完成后，我们可以通过顶部工具栏的Weinre中可以看到我们添加的baidu实例，点击后即可进入weinre调试中。

在浏览器中打开https://www.baidu.com后，即可看到weinre中提示百度已经连接上来了。

至此，whistle中常用的功能大概介绍完毕了。whistle中支持的功能还有很多，以上只是介绍了一些前端调试中经常用到功能，如果感兴趣的同学可以自行再去研究下whistle文档

作者：Wynne
链接：https://juejin.cn/post/6949363462766084103
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

whistle 的常用配置

配 host

我们可以为某个域名或具体的 url 指定 ip，绕过 dns 解析，让请求直接到达指定的 ip。通常在工作中，开发、测试和预发布境的切换都通过切换 host 来实现，这样访问不同的环境不需要改变代码，或根据环境配置文件访问不同的 url。

whistle 的 host 在 rules 下配置:

以下是常用的配 host 方法:

将 qq.com 映射到 127.0.0.1，你访问 http://www.qq.com/ 时，请求的是本地的 127.0.0.1

1	127.0.0.1 qq.com

你也可以把端口带上

1	127.0.0.1:3000 qq.com

你甚至可以将指定的路径映射到某个 ip 和端口

1	127.0.0.1:3000 https://www.qq.com/a/b/c

当然，把规则反过来写也是生效的

1	https://www.qq.com/a/b/c 127.0.0.1:3000

除了配 host，whistle 还有其它强大的功能，我们继续往下看

重定向

将 baidu.com 重定向到 qq.com

1	https://www.baidu.com/ redirect://https://www.qq.com/

此规则在移动端调试时有个场景特别有用：比如想在某个 APP 里打开一个的网页，但是该 APP 没有一个 url 输入框，我们可以随机地点击这个 app 的信息流，如果捕获到有页面请求，重定向为我们的 url 即可。

修改返回体

该功能在后端接口挂了或者没有开发好的时候，可以模拟返回假数据，让前端调试可以不依赖后端

1	http://example.com/api/getUserList file://D:/path/to/your/file/userList.json

将 getUserList 这个请求的返回替换成本地的 userList.json 文件，如果觉得文件放在磁盘里写路径麻烦，可以放在 whistle 自带的 Values 里，那么上面的规则就更简洁了：

1	http://example.com/api/getUserList file://{userList.json}

Values 是个很有用的功能，位置如下:

Values

创建的文件尽量带文件后缀，有语法高亮，另外如果不是 .json 结尾，whistle 不会在 Response Headers 里自动添加 content-type: application/json; charset=utf-8，那么一些请求库就拿不到正确的返回。

替换线上文件

如果有正式环境 bug，可以将 js 替换成本地文件或文件夹，提高调试效率。

1	http://example.com/cdn/example.js file://D:/path/to/your/file/example.js

替换请求 url

1	http://qq.com/a/b?c=d http://qq.com/v/w?x=y&z=z

注意：这个规则的修改在浏览器的 network 里体现不出来，因为请求已经发出去，到 whistle 层才被修改的，我们可以在 whistle 的 Network 右侧里看到 Real Url

url 替换

修改返回码

通过修改返回码，可以模拟接口出错

1	https://www.qq.com statusCode://500

Web 开发有时会遇到请求 header 设置不对带来的一些问题，如果问题出现在正式环境，我们可以通过修改请求 header （比如修改 Cookie、user-agent、Content-Type 等）来模拟修复，等确认问题后，再修改代码，提高效率。

1	https://www.qq.com reqHeaders://{loginCookie}

同样，我们可以通过 resHeaders 来修改响应头，上文提到我们可以通过 file://{userList.json} 来模拟假数据，但这么做可能导致一些跨域的 header 丢失，对此，我们可以通过 resHeaders 加上跨域相关 header

1	https://www.qq.com/some/ajax resHeaders://{CORSHeaders}

Values 中的 CORSHeaders 值为

Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, token
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
content-type: application/json
status: 200

插入 js

我们可以在不修改页面代码的情况下，通过 whistle 往页面插入 js，比如我们插入一个使页面刷新的 js:

1	https://www.google.com jsPrepend://{reload.js}

jsPrepend://{reload.js}

更有用的，是往页面中插入调试相关的 js，比如 vConsole.js，我们当然可以到 github 上将 vConsole.min.js 下载到本地，或放在 Values 中，然后把初始化代码也加上，最后将 vConsole.js 注入到页面来 debug。不过，whistle 提供了更方便的插件:

1 2	npm i -g whistle.inspect https://www.google.com whistle.inspect://

reqScript

考虑一种场景：我们要测一个视频上传接口返回 500 的情况，看是否走到了正常的提示逻辑，通常我们模拟状态码就可以解决，但如果接口跨域了，会先发起一个路径一致的 options 请求，我们希望这个 options 请求依然返回 200，只处理 post 请求，这时我们可以这么做：

1	http://qq.com/media/video reqScript://{onlyPostRule}

Values 中的 onlyPostRule:

1
2
3

if (method === 'POST') {
  	rules.push('http://qq.com/media/video statusCode://500');
}

https

抓取 https 请求需要安装证书，官网文档已经很详细了，这里就不再赘述，不过有两点要补充说明:

安装了某台电脑的 whistle 证书，换另一台，还需要继续安装另一台电脑的 whistle 证书
rootCA.crt 之所以能下载，是 whistle 做了代理，所以移动端安装证书时要先连上 whistle 的代理才能安装

作者：zhihuilai
原文链接：https://www.cnblogs.com/zhihuilai/p/9992533.html
文章声明：zhihuilai 的该篇文章受 “创作共用版权协议”（知识共享许可协议）保护，要求署名-非商业使用-禁止演绎 (by-nc-nd)。在满足创作共用版权协议的基础上可以进行转载，但请以超链接形式注明出处并保留此段声明。

我这里关于HTTPS补充2点：

要拦截https请求需要勾选Capture HTTPS CONNECTs, 详见：https://www.cnblogs.com/fafa-coding/p/10832212.html
部分证书如果安装后还是无法拦截HTTPS请求可以看：whistle 在Android7.0以上手机的证书安装
抓包的har文件可以在fiddler或者whistle或者http://www.softwareishard.com/har/viewer/查看

Android投屏神器使用（scrcpy）

PS: 如果不差钱或者只需要投屏不需要控制可以用：AirDroid Cast

scrcpy简介

注意：拼写是scrcpy，非Python爬虫框架Scrapy。

简单地来说，scrcpy就是通过adb调试的方式来将手机屏幕投到电脑上，并可以通过电脑控制您的Android设备。它可以通过USB连接，也可以通过Wifi连接（类似于隔空投屏），而且不需要任何root权限，不需要在手机里安装任何程序。scrcpy同时适用于GNU / Linux，Windows和macOS。

它的一些特性：

亮度（原生，仅显示设备屏幕）
性能（30~60fps）
质量（1920×1080或以上）
低延迟（35~70ms）
启动时间短（显示第一张图像约1秒）
非侵入性（设备上没有安装任何东西）

此项目为开源项目，Github地址：Genymobile/scrcpy: Display and control your Android device

使用scrcpy的要求

Android设备至少需要API 21（Android 5.0以上版本）;
确保在您的设备上启用了adb调试;
在某些设备上，您还需要启用其他选项以使用键盘和鼠标控制它。

adb调试的开启一般是多次点击手机系统版本，如我用的是MIUI10，开启方法是 “设置”->“我的设备”->“全部参数”-> 点击7下MIUI版本，开启“开发者选项”。然后在 “设置”->“更多设置”->“开发者选项” 中同时开启 USB调试和 USB调试(安全设置)。

注意：USB调试(安全设置)必须开启，否则不可以使用电脑控制手机，即上述要求的第三条。

使用电脑连接手机

在Android手机中打开了USB调试后，我们即可在电脑中使用adb进行调试。

我使用的是Windows10系统，以下以Windows为例，MacOS或Linux请点击这里。

程序使用了Java语言，我们需要在电脑中搭建Java运行环境，参考：Windows10 配置 Java 开发环境

首先下载scrcpy，可去releases下载最新版本，目前最新版本为v1.10。

下载地址：https://github.com/Genymobile/scrcpy/releases

解压后的目录：

打开cmd定位到此目录（在地址栏中输入cmd回车），或者将该目录如D:\Github_Run\scrcpy-win64-v1.10加入到系统环境变量中，程序的使用都在cmd命令行中操作。

使用USB进行连接

此方式推荐使用，相对更加流畅。

手机通过USB连接到PC上，首次连接会弹出是否信任该电脑，点击始终信任即可。
运行adb usb查看是否连接成功

1 2	D:\Github_Run\scrcpy-win64-v1.10>adb usb restarting in USB mode

运行scrcpy即可。

使用无线连接

可参考官方文档：Open Source Project - Scrcpy now works wirelessly

此连接方式更加方便快捷，若宽带速率高，使用效果更佳，使用方法也非常简单。

确保PC和手机在同一Wifi中
手机先通过USB与PC相连

在PC上运行 adb tcpip 服务端口，如端口为5555

1 2	D:\Github_Run\scrcpy-win64-v1.10>adb tcpip 5555 restarting in TCP mode port: 5555

拔下你的设备，断开USB连接
在PC上运行 adb connect 手机IP:服务端口（手机IP可通过手机的状态信息查看，或者登录路由器查看，一般以192.168开头）
1
2
D:\Github_Run\scrcpy-win64-v1.10>adb connect 192.168.0.4:5555
connected to 192.168.0.4:5555
运行scrcpy，在cmd中输入scrcpy.exe

这样弹出手机的屏幕，手机投屏成功！正如预期的那样，性能与USB不同，默认的scrcpy比特率是8Mbps，这对于Wi-Fi连接来说可能太多了。根据使用情况，降低比特率和分辨率可能是一个很好的折中方案。
1
2
3
scrcpy --bit-rate 2M --max-size 800
# 或者简写
scrcpy -b2M -m800
若要切换回USB模式：adb usb

常用快捷键（重要）

描述快捷键

切换全屏模式 Ctrl+f
点击手机电源 Ctrl+p
返回 Ctrl+b
返回到HOME Ctrl+h
多任务 Ctrl+s
更多操作长按鼠标左键
显示最佳窗口 Ctrl+g
调节音量 Ctrl+上下键
关闭设备屏幕（保持镜像） Ctrl+o
将设备剪贴板复制到计算机 Ctrl+c
将计算机剪贴板粘贴到设备 Ctrl+v
Tips：查看已连接设备命令adb devices，显示device则表示已连接，显示offline则离线：

1
2
3

D:\Github_Run\scrcpy-win64-v1.10>adb devices
List of devices attached
192.168.0.4:5555        device

使用命令行选项在启动时镜像时可以关闭设备屏幕，这一点也挺实用：

1 2	scrcpy --turn-screen-off scrcpy -S

这样我们就使用了两种方式（USB连接和Wifi连接）使用scrcpy，其它方法详见：README 如可直接拖拽APK进行安装，手机录屏等。

版权声明：本文为CSDN博主「was172」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/was172/article/details/99705855

干货！移动端真机调试指南，对调试说easy

前言

这么快就年终了，回顾2021年发现没干啥事，换了个城市，换了份工作，新公司新坑，现在主做Hybrid APP，那么年终就总结下移动端的调试方案来划划水吧🐰

移动端的真机调试，总结了下就大致就2种方法，要不就是网页面注入js脚本，劫持console、网络请求等，比如： vConsole、eruda等调试库。要不就是使用抓包工具劫持浏览器与服务器的请求，比如：Charles，下面分享下我使用过的方法。

1、`alert`大法

这有啥好说的，(⊙﹏⊙)
推荐指数0颗星

2、抓包工具`Charles`、`Fiddler`

平时只用抓取各种网络，需要设置手机的wifi代理
推荐指数2颗星

3、`vConsole`、`eruda`等调试库

这个方法需要在页面中插入一段 JS 脚本，这里以vConsole为例，导入vconsole.min.js，并实例化，注实例化代码最好放在头部，以便能一开始就能劫持内容：

<script src="./vconsole.min.js"></script>
<script>
    // 初始化
    new VConsole();
</script>

或

1
2
3

// npm i vconsole
import VConsole from 'vconsole';
new VConsole();

优点：方便，可查看console、network、elements等；
缺点：css调试不友好，console会劫持consloe的打印，不能定位到打印的代码位置，需要额外加载js脚本

推荐指数3颗星

PS: vConsole更轻量、eruda功能更完善，建议优先考虑vConsole

4、`Chrome` + `Android`

首先在chrome安装ADB Plugin
chrome中输入 chrome://inspect
通过数据线连接你的电脑和 Android 手机，打开USB的调试模式
就可以在上面的页面中看到自己的设备：

点击inspect

然后就可以欢乐地调试了，和使用谷歌调试pc端一样，可惜ios不适用推荐指数4颗星

5、`Mac` + `IOS` + `Safari`

打开手机点击设置 -> Safari浏览器 -> 高级

打开JavaScript和web检查器。

打开手机上的Safari，输入一个网址www.baidu.com

在Mac上打开Safari，点击开发-iPhone lh-www.baidu.com，就可以看到以下页面

注：app的webview也可以使用这个方法，只需要让客户端同学打包个debug版本

只适用ios，而且需要mac，而且有个缺点，没有打开调试窗口时，webview的网络请求和console都不会记录，webview关闭，调试窗口会直接关闭。推荐指数4颗星

6、whistle

安卓、ios都能调试，跨平台、代理抓包、H5调试、debugger、请求劫持、HTTPS支持、WebSocket数据捕获等，功能非常强大。 weinre是用node编写的，使用npm来进行安装
安装：

1	npm install -g whistle

运行：

w2 start

跨平台、抓包、 DOM、Console、Network 等，功能非常强大。查看文档
推荐指数5颗星

7、Mobile Debug

功能和whistle非常相似，我严重有理由怀疑Mobile Debug的开发者就是在whistle的基础上进行开发的。

Mobile Debug官网下载地址

下载安装后

抓包：

网页调试：

通过配置劫持规则将线上出bug的文件（如js）劫持到本地修改并调试：

需要把手机在同一个局域网wifi设置代理，便可使用，https需要增加安装证书步骤。

推荐指数5颗星

最后

3和7是我现在主要使用的方法，用这就能完全解决移动端的调试问题。

水完一篇，我撤~~~~~

作者：咸鱼翻身翻两次
链接：https://juejin.cn/post/7041049806562656293
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

移动端调试目前还是挺复杂的，即使该文章说可以完全解决，其实并不然，对于一些金融类安全性比较高的APP还存在一种情况会只信任本地证书或者隧道加密，导致代理不可用，对于这类情况也暂无较好的解决方案，只能考虑文章最开始提到的日志上报服务器，再从服务器导出来。

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/57786ed8.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！