背景

在 PC 上我们调试的话用 chrome 自带的 devtool 就可以，在移动端的方案就不是很好搞了，所以在这里记录一下。

1. 添加 console 控制台输出

在移动web中，添加控制台输出的话，主要有两个工具 vConsole 和 eruda

vConsole
vConsole
eruda
eruda

我个人更喜欢eruda，工具更全一些

vConsole基本使用

1
2
3
4
<script src="https://cdn.jsdelivr.net/npm/vconsole/dist/vconsole.min.js"></script>
<script>
  var vConsole = new VConsole();
</script>

eruda基本使用

1
2
<script src="https://cdn.jsdelivr.net/npm/eruda/eruda.min.js"></script>
<script>eruda.init();</script>

eruda 在 iOS 的 UIWebView 内击点会不流畅，主要用是 shadowdom 的原因, 可以按以下方案引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var load = function (src, cb) {
  var scriptEle = document.createElement("script");
  scriptEle.setAttribute("src", src);
  scriptEle.addEventListener("load", function () {
    cb();
  });
  cb != null && scriptEle.addEventListener("error", cb);
  document.body.appendChild(scriptEle);
  return scriptEle;
};

var loadEruda = function () {
  var loaded = false;
  var isSafari =
    (navigator.vendor &&
      navigator.vendor.indexOf("Apple") > -1 &&
      navigator.userAgent &&
      !navigator.userAgent.match("CriOS")) ||
    /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  var isUiWebView =
    isSafari && !(window.webkit && window.webkit.messageHandlers);

  load("https://cdn.jsdelivr.net/npm/eruda@2.3.3/eruda.min.js", function (err) {
    if (err) {
      return;
    }
    if (isUiWebView) {
      var el = document.createElement("div");
      document.body.appendChild(el);
      eruda.init({
        container: el,
        useShadowDom: false,
      });
    } else {
      eruda.init();
    }
  });
};

2. 代理到本地, 远程调试

之前的开发项目时，大家一定都有用过 charles 或者 finder 抓过包的经验，在这几年新推出的如 spy-debugger 和 whistle 现在整合了抓包功能的同时也有代理的能力, charles 和 nginx 也可以代理，就是配置起来麻烦, 日常开发中我已经很少用了。线上出现问题后可以代理到本地调试无疑是最快的方式。

HTTP 代理

HTTP 代理大家应该都有用过 charles 的 proxy 功能，但是我现在用的更多是 whistle, 它提供功能很多，我下面都以

不走 HTTP 代理

上述的 charles, finder, whistle 等都是走的 HTTP 代理方式，在一些 APP 中，为了安全起见是不会生效的, 如支付宝，银联APP，各大银行 APP 等。

3. 其它抓包工具

  • 4. 云真机调试平台

代理类方式

  • charles
  • spy-debugger
  • whistle

真机

  • debug 线上 – 清理缓存 x5 debugx5.qq.com
  • irma 磨刀石
  • react-native-debugger
  • 代理与mock数据
  • android 下 root 后安装面具，改host, 安装系统证书
  • 改不了hosts, 如ios, 本地起dns服务器 走起dns改路由表
  • genymotion – google-store/x86/transform/代理/adb/hosts
  • TBS Studio X5 Blink 内核判断 | ios | android
  • 微信校验是会暂存的

其它

  • chrome-dev-tools