开发者文档

Appearance

本页导航

MFA调试方式打开Vconsole ​

注意！此方式只有今日投资工作人员使用，不允许外传以及其他人员包括券商客户调试使用

  1. 前端项目左下角点击【5】次唤起校验页面，是连续点击5次！

这里以南京金博士为例 示例图片

  1. accountId 这里填入 developer，并输入动态码唤起debug页面 示例图片

如果没有对应APP，请前往下载安装 Google Authenticator 如果已安装，根据以下信息填入来获取动态码

测试环境的密钥:
用户名: developer
密钥: E4QBNH7QUYAN3TCX
测试环境的密钥:
用户名: developer
密钥: E4QBNH7QUYAN3TCX

示例图片 3. 打开APP添加 accountId 以及 key 后获取动态码并输入后点击验证，这里如果没有 Google Authenticator 请自行前往下载 示例图片 4. 如果验证通过即可手动开启vconsole，下次进入会自动开启 示例图片

真机远程代码调试 ​

Android ​

  1. 在手机上开启USB调试功能

设置 -> 开发者选项 -> USB调试

  1. 使用数据线连接手机和开发主机

允许USB调试

  1. 打开科学上网工具（必须）

联系同事或者上级领导

  1. 打开Chrome DevTools

在地址栏输入chrome://inspect，确保开启了Discover USB devices，找到你的webview，点击inspect即可调试

IOS ​

  1. 在手机上开启网页检查器

设置 -> safari 浏览器 -> 高级 -> 网页检测器

  1. 开启Safari上的Develop功能

菜单 -> Preferences（偏好设置） -> Advanced（高级）,勾选【在菜单栏中显示“开发”菜单】

  1. 使用数据线连接手机至开发主机

信任电脑

  1. 打开devtool

Develop -> 你的ios设备 -> 要调试的页面 -> 找到你的设备

无线调试工具-Weinre ​

  • 无需数据线
  • PC和移动端都可以调试
  1. 环境准备与安装

任何nodejs环境

sh
npm install weinre -g
npm install weinre -g
sh
yarn global add weinre
yarn global add weinre
sh
pnpm install weinre -g
pnpm install weinre -g
  1. 启动weinre
sh
weinre -h  #获取帮助信息
 weinre --boundHost=-all- --httpPort=1000 # 启动，boundHost为all是允许本机所有有效ip访问，默认端口8080
weinre -h  #获取帮助信息
 weinre --boundHost=-all- --httpPort=1000 # 启动，boundHost为all是允许本机所有有效ip访问，默认端口8080
  1. 在项目里引入
html
<!-- 往被调试页面添加脚本 -->
<script src="http://ip:端口/target/target-script-min.js#anonymous"></script>
<!-- 示例 -->
<script src="http://172.20.10.11:1000/target/target-script-min.js#anonymous"></script>
<!-- 往被调试页面添加脚本 -->
<script src="http://ip:端口/target/target-script-min.js#anonymous"></script>
<!-- 示例 -->
<script src="http://172.20.10.11:1000/target/target-script-min.js#anonymous"></script>

  1. 调试移动手机的页面需要手机访问局域网内的页面服务（例如开启了8080端口的服务，那么手机访问ip+8080）

  2. 打开浏览器：ip:1000 或 http://localhost:1000

移动端调试 ​

VConsole ​

VConsole项目主页

html
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vconsole.min.js" />
<script>
  new VConsole()
  console.log('vconsole debug')
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vconsole.min.js" />
<script>
  new VConsole()
  console.log('vconsole debug')
</script>
sh
npm install vconsole -D

# app.ts
# import VConsole from 'vconsole'
# new VConsole()
# console.log('vconsole debug')
npm install vconsole -D

# app.ts
# import VConsole from 'vconsole'
# new VConsole()
# console.log('vconsole debug')

Eruda ​

eruda项目主页

PageSpy ​

在线调试

项目主页

html
<script src="https://std.investoday.net/debug/page-spy/index.min.js"></script>
<script>
window.$pagespy = new window.PageSpy({
    title: '项目名称',
    api: 'std.investoday.net/debug'
});
</script>
<script src="https://std.investoday.net/debug/page-spy/index.min.js"></script>
<script>
window.$pagespy = new window.PageSpy({
    title: '项目名称',
    api: 'std.investoday.net/debug'
});
</script>
ts
var script = document.createElement('script')
script.src = 'https://std.investoday.net/debug/page-spy/index.min.js'
script.onload = function() {
    window.$pagespy = new window.PageSpy({
        title: '项目名称',
        api: 'std.investoday.net/debug'
    });
}
document.body.appendChild(script)
var script = document.createElement('script')
script.src = 'https://std.investoday.net/debug/page-spy/index.min.js'
script.onload = function() {
    window.$pagespy = new window.PageSpy({
        title: '项目名称',
        api: 'std.investoday.net/debug'
    });
}
document.body.appendChild(script)

使用代理服务进行调试 ​

WARNING

（仅限android 7及以下，以及所有IOS版本） ​

这里使用Charles工具进行调试，前往下载

HTTP抓包 ​

  1. 移动端配置（配置代理）

点击手机连接的Wi-Fi->HTTP代理->配置代理

  1. 填入电脑的ip地址(可以在charles查看 help->Local IP Address)，端口默认8888

  2. 访问百度查看Charles面板是否有对应请求

HTTPS抓包 ​

charles不能直接抓包https，还需要以下操作

  1. 移动端配置代理

与上面http配置完全相同（切记！！！这一步一定要做，只有配置了代理服务，才能下载证书，因为这是你电脑上charles给你颁发的，你换了电脑还需要另一个电脑给你颁发）

  1. 添加要解析的域名列表
  • 菜单栏Proxy-> SSL Proxying Settings
  • 在Host一栏设置要解析的域名，也可以*表示所有的HTTPS都做解析,port:443；点击ok后重启charles。
  1. 信任Charles根证书

在移动端用浏览器访问 https:chls.pro/ssl 下载证书描述文件

  • 安卓直接安装即可（仅支持安卓7.0及以下的机型，除非自己root且手动上传证书至系统安全目录）
  • IOS
  1. 在设置 -> 通用 -> 描述文件与设置管理中安装证书
  2. 然后开启 设置 -> 通用 -> 关于本机 -> 针对根证书启用完全信任

使用Map请求重定向 ​

Map Local / Map Remote ​

  • 生产环境代码打包压缩后不利于debug
  • 调试时不方便频繁发布
  • Map Local：将某请求重定向至本地某个文件
  • Map Remote：将某请求重定向至另一个请求
  • 将生成环境的代码替换成本地的代码
  1. Map Local 示例图片

Map Local可以替换任意charles能抓包到的文件，甚至可以将api请求替换成本地的json文件，做接口的一个mock， 其实就是一个文件的代理功能。 如果想取消Map Local / Map Remote：charles顶部tools-> Map Local / Map Remote -> 不勾选enable map local/Remote-> ok

  1. Map Remote 示例图片
  • 尝试改动代码，查看页面变化

使用Rewrite请求重定向 ​

  • 可作用于：request & reponses
  • 可修改：header、host、path、url、params、body等
  • 采用新增、替换的形式
  1. 向生产环境页面注入vConsole脚本

顶部tools-> Rewrite

  • 添加匹配location

示例图片

  1. 添加rewrite规则 示例图片

上面其实就是将</head>标签替换成

  • <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/2.5.0/vconsole.min.js"></script><script>new VConsole()</script></head>

或者也可以替换

  • <script>location.href = "http://192.168.xx.xx:8080"</script>来跳转你的本地地址测试

lhiro

Copyright © 2002-present Evan investoday