移动端调试

# 移动端调试工具

# 1. vconsole

1. 安装 npm 包使用

npm install vconsole --save

main.js中判断环境配置

import Vconsole from 'vconsole'

if (process.env.VUE_APP_VCONSOLE === 'true') {
  let vConsole = new Vconsole()
  Vue.use(vConsole)
}

1
2
3
4
5
6
7
8
9
10

环境 .env.development

# 是否开启调试模式 vconsole
VUE_APP_VCONSOLE=true

1
2

1. cdn 使用

index.html 中

<script src="https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.3.0/vconsole.min.js"></script>
<script>
  var vConsole = new VConsole(); // 手机端日志查看vConsole实例化
</script>

1
2
3
4
5
6

# 2. weinre

1. 全局安装 npm
  npm install -g weinre
1. 使用
- (1). cmd 启动：weinre --httpPort 8090 --boundHost -all-
- (2) 打开浏览器： http://localhost:8090
- (3) 在 html 中加入脚本
  <script src="http://192.168.0.113:8090/target/target-script-min.js#anonymous"></script>
- (4)PC 端调试点击 http://localhost:8090/client/#anonymous

# 3. eruda

CDN 使用

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init()</script>

1
2

npm 安装使用 npm install eruda --save

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

1
2

按需使用
如果 URL 中有参数 eruda=true 或者 sessionStorage 中 eruda 的值为 true 才加载 Eruda

(function() {
  var src = "//cdn.jsdelivr.net/npm/eruda";
  if (!/eruda=true/.test(window.location)) return;
  document.write("<scr" + 'ipt src="' + src + '"></scr' + "ipt>");
  document.write("<scr" + "ipt>eruda.init();</scr" + "ipt>");
})();

1
2
3
4
5
6

点击 10 次显示 -- 暂时不可用

<h2 onclick="showEruda">——规则详情——</h2>
<script>
var count = 0;
function showEruda () {
    if (count >= 10) {
        var erdua = sessionStorage.getItem('erdua');
        if (!erdua || erdua === 'false'){
            sessionStorage.setItem('eruda', 'true')
        } else {
            sessionStorage.setItem('eruda', 'false')
        }
        location.reload()
    }
    count++
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 真机调试

android 手机需要配合 windows，才可以进行真机调试（如果是配合 mac，需要在 mac 安装 Edge，在 Edge 里面调试）

1.安卓手机在设置里面打开开发者模式，打开 USB 调试。
2.Edge 浏览器输入： edge://inspect chrome 浏览器中输入：chrome://inspect

Discover network targets取消选中，不然刷不出页面。

3.手机和电脑用数据线连接。(或者连入同一个局域网，手动在手机的网络配置代理，ip 地址为电脑的 ip) --检测 USB 数据线是否自动弹出调试
4.在手机打开 app 壳子和测试环境的 app，Edge 浏览器调试界面出现设备，开始测试

更新时间: 9/18/2021, 12:45:01 PM

← sonar nexus→