APP 混合开发中如何查看 H5 的控制台

前言

本文主要介绍在使用原生客户端 + JS-bridge 的混合开发的时候，如何在移动端打开查看 h5 部分的控制台。 在开发阶段 H5 部分大部分是在电脑端完成，在嵌入 APP 端之后，若想查看接口调用是否正常，代码运行是否异常，则需要开发控制台。那么，我们需要用到 vConsole 手机前端开发调试利器。

vConsole 是一个轻量、可拓展、针对手机网页的前端开发者调试面板。

• 特性：
  • 查看 console 日志
  • 查看网络请求
  • 查看页面 element 结构
  • 查看 Cookies、localStorage 和 SessionStorage
  • 手动执行 JS 命令行
  • 自定义插件

使用方法

• 用 NPM 安装（推荐）
  $ npm install vconsole

import VConsole from "vconsole";

const vConsole = new VConsole();
// 或者使用配置参数进行初始化
// const vConsole = new VConsole({ theme: 'dark' });

// 调用 console 方法输出日志
console.log("Hello world");

// 完成调试后，可销毁 vConsole
vConsole.destroy();

• CDN 使用

原生 HTML 页面开发

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 会自动挂载到 `window.VConsole`
  var vConsole = new window.VConsole();
</script>

CDN 地址:
https://unpkg.com/vconsole@latest/dist/vconsole.min.js
https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js

• VUE 中开发

index.html 中引入 CDN 或者安装 VConsole 依赖

let vc: any = null;
const initVconsole = () => {
  if (env.currentEnv !== env.ENV_ENUM.PRODUCT) {
    vc = new VConsole({
      disableLogScrolling: false,
      defaultPlugins: ["system", "network"],
      log: { maxLogNumber: 200 },
    });
  }
};

onMounted(() => {
  initVconsole();
});
onUnmounted(() => {
  vConsole.destroy();
});

小结

任性一回，点击查看具体配置