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

之前经常用这种方法在手机上进行调试，打印错误日志。这次记录一下。
使用 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()
}

我们可以使用的cdn链接（列举了两个）：
https://cdn.jsdelivr.net/npm/eruda （不稳定）
https//cdn.bootcss.com/eruda/1.3.2/eruda.min.js (稳定但加载慢)

效果如下：

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

爬取小说并在手机上看
有时候在手机APP软件上看的一部小说到某一章看不了了,是vip章节,我在电脑浏览器上搜了下发现网页上是有全本的,都能看.但是网页广告多,啥都有,一不小心就点进去了,很是麻烦.我想,爬下来吧... 很简 ...
安卓APP_ 其他（1） —— 程序的签名打包并在手机上运行
摘自:安卓APP_ 其他(1) -- 程序的签名打包并在手机上运行作者:丶PURSUING 发布时间: 2021-03-29 20:58:26 网址:https://blog.csdn.net/we ...
怎么看在手机上看hbo_HBO Max上播放的最佳吉卜力工作室电影（2020年7月）
怎么看在手机上看hbo Studio Ghibli has created some of the best animated movies, and now, they're finally ava ...
怎么看在手机上看hbo_HBO Max上播放的最佳中医电影（2020年6月）
怎么看在手机上看hbo Turner Classic Movies (TCM) has films from almost every decade, and you can watch some o ...
《PyInstaller打包实战指南》第二节 PyInstaller的两种打包模式
第二节 PyInstaller的两种打包模式 1. 文件夹模式打包 2. 单文件模式打包 3. build, dist和spec文件(夹)简介 PyInstaller可以把python程序打包成多个文 ...
vue项目接口地址暴露_vue项目打包后可以配置接口地址的方法
因为项目测试的需要,我需要给测试人员一个项目的测试环境版本和生产环境版本,两个版本的区别就是请求的接口地址不一样而已,一开始,我是在webpack配置了不同的命令,让测试去打包,比如:使用npm ru ...
一种改版后检查硬件PCB生产资料的方法***-----Gerber对比，检查的方法
一种改版后检查硬件PCB生产资料的方法-----Gerber对比,检查的方法一.前言硬件电路设计改版是常有的事,不管小的实物,还是需求变更经常会遇到要增加或者减少器件,修改走线这些.在第一版已经做 ...
iphone已停用怎么解锁_两种无密码解锁iPhone锁屏密码的方法
现在很多手机都配备指纹解锁功能,大家平时用惯了指纹解锁,有时候在需要输入锁屏密码的时候反倒记不清密码是什么了.像是手机重启后就需要输入密码解锁,iPhone锁屏密码忘了怎么办? 多次输入错误密码还可能 ...
两种在QGIS中打开CAD文件的方法
概述经常使用ArcGIS.Global Mapper和水经微图打开CAD文件,一般都是直接拖进去或者点一下类似打开的按钮就可以打开CAD文件,但是当直接把CAD文件拖入到QGIS的时候会报错,所以查 ...

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

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

最新文章

热门文章