记录两种打包后在手机上看日志的方法（vconsole和eruda）

时清云

已于 2022-05-23 22:38:57 修改

阅读量1.1k

点赞数 4

分类专栏：工作学习总结笔记项目总结文章标签：移动端调试手机上看错误日志 log vconsole eruda

于 2020-12-18 10:04:43 首次发布

本文链接：https://blog.csdn.net/xiaolinlife/article/details/111353477

版权

笔记同时被 3 个专栏收录

110 篇文章 1 订阅

订阅专栏

工作学习总结

100 篇文章 7 订阅

订阅专栏

项目总结

84 篇文章 2 订阅

订阅专栏

之前经常用这种方法在手机上进行调试，打印错误日志。这次记录一下。
使用 vconsole.min.js，代码如下：

<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>加载中</title>
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta content="telephone=no" name="format-detection" />
  // 在这里进行引入调试组件
  <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
</head>

<body>
  <div id="product">
  </div>
</body>
<!-- 引入组件库 -->
<script>
  // 初始化 引入的调试组件
  var vConsole = new VConsole();
  console.log('Hello world');
  </script>
</html>

调试画面：
在这里插入图片描述

在这里插入图片描述

或者直接安装
以vue项目为例

1、使用 npm 安装：

npm install vconsole

2.在main.js中引入一个js文件,并且实例化

import VConsole from 'vconsole/dist/vconsole.min.js' 
let vConsole = new VConsole() // 初始化

vconsole调试工具，官方出的，但是只能解决安卓手机调试问题，在ios手机上我们只能在log里面看到代码里面console.log()的东西，但是去network看调用的接口，却看不到。

eruda 一个很好的移动端调试神器，没有ios相关的问题。
使用方式（vue项目）：

let script = document.createElement('script')
// script.src = "//cdn.jsdelivr.net/npm/eruda"
script.src = "//cdn.bootcss.com/eruda/1.3.2/eruda.min.js"
document.getElementsByTagName('head')[0].appendChild(script)
script.onload = function(){
   eruda.init()
}