生产环境调试

avatar

生产环境特点

  1. 代码压缩和混淆，没有sourceMap
  2. 环境差异，不同浏览器和设备上可能表现不一样
  3. 通常不会加入调试代码对加载性能的影响，如vconsole等调试工具，

因此调试会变得，调试工具尽量对流程和环境不会造成额外影响，避免环境差异造成问题还原。

一、Edge工具调试

解决问题

  1. 适用android机调试
  2. 适用真机兼容性（DOM，样式）调试
  3. 支持debugger

操作流程

  1. adb 下载地址：。
  2. 增加全局 path 访问配置环境变量。
    export PATH=${PATH}:~/Downloads/platform-tools
    配置好之后，关闭并重启终端，adb 环境即可生效。
  3. 查看是否配置成功。
    open -e .bash_profile 或者 执行 adb 能正常显示版本号
  4. 开启不同机型手机调试模式，在设备上找到「设置」，点击「关于设备」，找到「系统版本号」（或版本号）并连续点击 7 次；返回「设置」，然后点击「开发人员选项」；打开 USB 调试模式。
  5. 确认手机已打开调试模式，通过 usb 链接（选择 MIDI 模式或传输文件模式）电脑应可以看到设备。
  6. 命令行输入 adb devices，如果显示 List of devices attached, UJN0221428027042 device 则连接成功。
  7. 打开 edge 浏览器，输入 edge://inspect/#devices，回车
  8. 等待片刻，在目标列表会出现设备，打开的包含 H5 的 app
  9. 找到对应的 H5，点击 inspect
  10. 如果看不到webview页面地址，可能app包未开启android
    手机微信开启调试：微信内点击debugxweb.qq.com/?inspector=…
    手机支付宝不支持webview抓包：opendocs.alipay.com/mini/compon…

二、Charles安装

安装

  1. 安装地址：xclient.info/s/charles.h…
  2. 选择添加Help->SSL Proxying->Install Charles Root Certificate
  3. 从应用钥匙串访问搜索Charles，找到添加的证书，双击证书，在信任下选择始终信任

抓包

  1. pc 和手机同时设置同一网段
  2. 手机设置代理为 charles 的 IP 端口

  1. Charles 收到连接请求选择允许

  1. 取消 Proxy->macOS Proxy 勾选，过滤抓取 pc 请求
  2. Tools->Map Remote Settings，设置代理请求的域名

  1. SSL Proxying Settings，Location 设置为 "*"，支持 https

  1. 打开手机浏览器输入 Charles 证书网址（chls.pro/ssh）、下载安装证书
  2. 手机设置->安全与隐私或者系统安全->加密与凭据->安装证书
  3. 证书安装成功后没有信任，需要信任该证书 设置->通用->关于本机->证书信任设置

三、短租移动端charles代理到本地代码

解决问题

  1. 适用ios、Android
  2. 解决跨域
  3. 避免频繁打包和发布，真机调试及时验证

操作流程

  1. 取消勾选 macOS Proxy
  2. 配置Tools -> Map Remote

  1. package.json修改scirpts增加 export VUE_APP_LOCAL=1
  "scripts": {
    "fat": "export VUE_APP_ENV=fat; export VUE_APP_LOCAL=1; export NODE_ENV=development; vue-cli-service serve",
  },

4. npm run fat

四、某项目pc端charles代理到本地代码

  1. 勾选 macOS Proxy
  2. 配置Tools -> Map Remote
  3. webpack启用 https
  devServer: {
    server: 'https',
  },

4. package.json scirpts增加 export VUE_APP_LOCAL=1

  "scripts": {
    "fat": "export VUE_APP_ENV=fat; export VUE_APP_LOCAL=1; export NODE_ENV=development; vue-cli-service serve",
  },

5. npm run fat

五、chrome devTool 生产环境使用 sourceMap 调试

解决问题

  1. 通过手动添加source map文件定位源码位置
  2. 通过overrides调试持久化

操作流程

  1. 控制台报错
  2. 根据错误堆栈，打开错误的源文件

  1. 右键选择 [Add Source Map]

  1. 输入访问map文件的地址，点击 Add

  1. 点击报错自动定位至源码的位置
  2. 切换sources下左侧的 Overrides
  3. 点击 + Select folder for overrides，选择文件保存路径

  1. DevTools 请求获得对【文件路径】的完整访问权限。请确保您不会泄漏任何敏感信息。点击允许
  2. 重新请求页面，会拦截发送的网络请求转而请求本地保存的文件。

六、使用source map 进行堆栈还原

  1. 已知源文件的错误行、列
  2. 根据source-map 执行source-map库api推断出源码的位置
const fs = require("fs");
const sourceMap = require("source-map");
const rawSourceMap = JSON.parse(
  fs.readFileSync("./dist/source.js.map").toString()
);

const errorPos = {
  line: 2,
  column: 175248,
};

// 保留错误代码片段前后行数
const saveNum = 3;

async function test() {
  // 创建source map consumer
  const consumer = await new sourceMap.SourceMapConsumer(rawSourceMap);
  // 传入要查找的行列数，查找到压缩前的源文件及行列数
  const sourcemapData = consumer.originalPositionFor({
    line: errorPos.line, // 压缩后的行数
    column: errorPos.column, // 压缩后的列数
  });
  if (!sourcemapData.source) return;

  // 根据查到的source，到源文件列表中查找索引位置
  const sourceIndex = consumer.sources.findIndex(
    (item) => item === sourcemapData.source
  );
  // 到源码列表中查到源代码
  const sourceContent = consumer.sourcesContent[sourceIndex];
  const contentRowArr = sourceContent.split("\n");
  // 将源代码串按"行结束标记"拆分为数组形式
  const rawLines = sourceContent.split(/\r?\n/g);

  // 截取报错行前后代码片段，因为数组索引从0开始，故行数需要-1
  let code = [];
  for (
    let i = sourcemapData.line - saveNum;
    i < sourcemapData.line + saveNum;
    i++
  ) {
    if (i >= 0) {
      code.push(rawLines[i]);
    }
  }

  // 接下来根据行和列可获取更加具体的位置
  console.log(contentRowArr[sourcemapData.line - 1]);
  console.log(code.join("\n"));

  consumer.destroy(); // 使用完后记得destroy
}

test();

七、ADB (Android Debug Bridge)

adb 安装

  1. adb 下载地址：。
  2. 增加全局 path 访问配置环境变量。
    export PATH=${PATH}:~/Downloads/platform-tools
    配置好之后，关闭并重启终端，adb 环境即可生效。
  3. 查看是否配置成功。
    open -e .bash_profile 或者 执行 adb 能正常显示版本号
  4. 开启不同机型手机调试模式，在设备上找到「设置」，点击「关于设备」，找到「系统版本号」（或版本号）并连续点击 7 次；返回「设置」，然后点击「开发人员选项」；打开 USB 调试模式。
  5. 确认手机已打开调试模式，通过 usb 链接（选择 MIDI 模式或传输文件模式）电脑应可以看到设备。
  6. 命令行输入 adb devices，如果显示 List of devices attached, UJN0221428027042 device 则连接成功。

adb 调试

  1. 下载 adb
  2. 手机通过 adb 连上电脑，打开 app，进入需要调试的 H5 页面
  3. 打开 edge 浏览器，输入 edge://inspect/#devices，回车
  4. 等待片刻，在目标列表会出现设备，打开的包含 H5 的 app
  5. 找到对应的 H5，点击 inspect
  6. 如果看不到webview页面地址，可能app包未开启android
    手机微信开启调试：微信内点击debugxweb.qq.com/?inspector=…
    手机支付宝不支持webview抓包：opendocs.alipay.com/mini/compon…

adb 工具

  • 截屏 adb shell screencap 本地路径
    下载到指定路径：adb pull 本地路径 输出路径
    示例：adb shell screencap /sdcard/screen2.png
    adb pull /sdcard/screen2.png [电脑存储路径]
  • 指定时间录屏 adb shell screenrecord --time-limit 10 /sdcard/demo.mp4
  • 安装指定包 adb install <apk 文件路径>
  • 卸载包文件 adb uninstall <参数 package 为软件包名称>
  • 查看手机物理尺寸 adb shell wm size
  • 查看屏幕密度 adb shell wm density
  • 获取手机型号 adb shell getprop ro.product.model
  • 获取 android 系统版本 adb shell getprop ro.build.version.release
  • 清除应用数据与缓存 adb shell pm clear
  • 查询所有的偏好设置（系统的所有用户公开）adb shell settings list global
    查询指定条目的值 adb shell settings get global name
    设置条目的值 adb shell settings put global name value
    删除条目的值 adb shell settings delete global name
文件管理
  • 复制设备里的文件到电脑 adb pull <设备里的文件路径> [电脑上的目录]
    $adb pull /sdcard/abc.mp4 ~/tmp/
  • 复制电脑里的文件到设备 adb push <电脑上的文件路径> <设备里的目录>
    $adb push e:/ss.au3 /sdcard/test/ (提前建好测试目录)
代理设置
  • 设置代理 adb shell settings put global http_proxy 192.168.48.130:8889
  • 移除代理 adb shell settings delete global http_proxy && adb shell settings delete global http_proxy_host && adb shell settings delete global http_proxy_port
avatar
文章
阅读
粉丝