移动端vConsole查看控制台信息

移动端开发及调试过程中，无法查看控制台打印信息大大影响了开发效率，虽然可以在chrome模拟器测试，但是因为部分内置浏览器的差异和调用插件的区别，导致打印结果不同，chrome模拟器无法解决全部问题。下面跟大家分享一个移动端调试利器，微信开源插件——vConsole。

一、使用方法

1、vue单页面项目中引入

npm下载依赖包

npm install vconsole

main.js入口文件下引入并实例化

 import Vconsole from 'vconsole'
const vConsole = new Vconsole()
Vue.use(vConsole)

2、html页面直接引入

引入在线资源（bootCDN等资源）

    <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script><!-- 或 --><script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>

引入本地js文件

    <script src="./js/vconsole.min.js"></script>

3、初始化及销毁

// 初始化
var vConsole = new VConsole();
console.log('init success');

// 销毁
vConsole.destroy();

二、示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>移动端vConsole查看控制台信息</title><script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
</head><body><script>// 初始化var vConsole = new VConsole();console.log('init success');document.addEventListener("dblclick", function() {// 销毁vConsolevConsole.destroy();})</script><script>console.log("%c ", 'margin-left:0px;padding:100px 100px;background-image: url("https://liujianwei695.gitee.io/minifile/images/officialAccount.jpg");background-size: 200px 200px;background-position: center;background-repeat: no-repeat;');</script>
</body></html>

二、移动端效果图

注：

1. vconsole在head中引入；
2. vconsole按钮如与页面元素位置重合，可自行修改vconsole.js相应参数；

标签：javascript，工具类，移动端，调试，控制台

更多演示案例，查看 案例演示

欢迎评论留言!

移动端vConsole查看控制台信息相关推荐

【H5】 h5运行在手机浏览器查看控制台信息
问题描述在开发H5项目时 pc端可以通过F12查看控制台信息,如果在手机上运行就看不到,此时需要在入口文件index.html中加上两行代码就可以了如下: 核心代码 <script src= ...
前端移动端测试查看控制台
手机端查看控制台的工具 console.log是前端经常用的,但是在手机上想查看却看不了,这时候我们就可以用这个工具了. 当我们在项目开发时,想要在实机上看控制台,在link的标签后面加入如下代码(放 ...
【web前端】移动端控制台插件，手机端页面查看相关页面控制台信息
一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并 ...
html页面手机端console,vue项目以及独立HTML项目在手机端查看控制台日志 vconsole
1 先说vue项目的在入口文件index.html 添加 // 移动端调试 // 初始化 var vConsole = new VConsole(); 然后npm run build 就可以查看控制 ...
【Flutter】Flutter 调试 ( 调试回退功能 | Debug 调试中查看变量的方式 | 控制台信息 )
文章目录一.调试回退功能二.Debug 调试中查看变量的方式三.Debug 控制台信息四.相关资源一.调试回退功能在调试过程中 , 经常错过关键位置的调试 , 如没有进入关键方法进行调试 ...
移动端 H5页面控制台输出
移动端页面如何查看控制台输出内容? 一.引入js <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js ...
什么是服务器信息怎么看,怎么查看服务器信息
怎么查看服务器信息内容精选换一换在您申请了云耀云服务器后,可以通过管理控制台查看和管理您的云耀云服务器.本节介绍如何查看云耀云服务器的详细配置,包括云耀云服务器名称.镜像信息.系统盘.数据盘.安 ...
ubtunu查看服务器信息,ubuntu查看服务器地址
ubuntu查看服务器地址内容精选换一换 OBS Browser+是一款用于访问和管理对象存储服务的图形化工具,支持通过配置内网DNS服务器地址的方式,使在华为云上的Windows ECS通过内网 ...
linux查cpu命令4可以选择哪些运动,Linux 查看cpu 信息的命令及简单实例
Linux 查看cpu 信息的命令及简单实例有的时候领导会问你某个服务器是多少核的,多少线程的,是不是会懵了,下面教你怎么看cpuinfo 1.查看cpu个数: # cat /proc/cpuinf ...