平时在web应用开发过程中,我们可以console.log去输出一些信息,但是在移动端,也就是在手机上,console.log的信息我们是看不到的。

这种情况下,可以选择使用alert弹出一些信息,但是这种方法不怎么方便,也会阻断JS线程,导致后面的线程都不执行。也影响调试体验。

那么,如果将console.log应用到移动端呢?
需要借助第三方插件:vConsole

使用方法:

<script src="path/to/vconsole.min.js"></script>
<script>
console.log("test")
</script>

在Vue-JS项目中使用:
1.package.json安装vconsole包(可以放在devDependencies中)

2.main.js中引入:

// 因为vConsole并不需要调用,
// 所以前面加“eslint-disable no-unused-vars”规避掉eslint语法检查 /* eslint-disable no-unused-vars */
import vConsole from 'vconsole'

3.此时可以使用console.log
原理:改写了console.log,重写了实现,用vConsole代理

原文链接:https://www.jianshu.com/p/f79d223ca616

vue--vConsole的更多相关文章

  1. vue-devtools : vue的调试工具及log显示工具 vconsole

    使用 devtools 有很多好处,比如它可以让你能够实时编辑数据属性并立即看到其反映出来的变化.另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验. 注意:请留意如果页面使用了一个生产环境 ...

  2. vue开发常用插件

    dependencies axios // 用于请求数据 better-scroll // 用于处理页面列表的滚动,下拉刷新等 fastclick // 用于处理移动设备点击会有300毫秒延迟的问题 ...

  3. 🍓 移动端调试工具之vconsole的使用~ 🍓

    这里以在vue项目中的使用为例⬇️ 嗯模块化的. 不消多说,先cnpm install vconsole -S 然后在mian.js中配置之- ok啦-- 开发混合app的筒子,使用mac的话也有别的 ...

  4. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  5. vue.config.js

    const path = require('path'); const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟 ...

  6. webpack 引用vconsole

    1.npm install -vconsole --save-dev 2.npm install -vconsele-webpack-plugin --save-dev 3.webpack.base. ...

  7. vconsole h5应用ajax请求抓包

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta co ...

  8. vue自定义指令v-scroll(directive)

    vue开发中,很多地方如果说都用到了某一方法,我们就可以进行指令化封装,通过自定义指令来实现这里通过两个例子说明vue-Directive的使用 1.v-focus 主要用来实现页面加载进来的时候文本 ...

  9. vue 项目 切换手机端和pc端。同一个项目,配置不同的路由

    1, 首先判断设备:在main.js里面写 // vue原型挂载 - 是否PC端 if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator. ...

  10. 用vue快速开发app的脚手架工具

    前言 多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来. 使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP. 本 ...

随机推荐

  1. PHP(表单元素)

    表单: 1.收集用户的输入,发送到后台 <form action="后台地址" method="提交方式" enctype="multipart ...

  2. mysql5.7.17安装配置图文教程

    My SQL的特点: MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,M ...

  3. mysql InnoDB锁等待的查看及分析

    说明:前面已经了解了InnoDB关于在出现锁等待的时候,会根据参数innodb_lock_wait_timeout的配置,判断是否需要进行timeout的操作,本文档介绍在出现锁等待时候的查看及分析处 ...

  4. JavaScript基础知识(数据类型)

    数据类型 布尔:true/fasle console.log(typeof true);// "boolean" Number : true -->1 false --> ...

  5. 使用阿里云公网ip建立bind,监听客户端连接失败

    bind: Cannot assign requested address 网上的众多答案不能解决我的问题 通过ping可以ping通,但是 使用bind代码,这个ip就是不能用的, 使用 ifcon ...

  6. Ubuntu 18.04安装JDK并配置环境变量

    1.官网下载jdk 下载链接 http://www.oracle.com/technetwork/java/javase/downloads/index.html 可以根据自己的系统进行下载 2.进行 ...

  7. LeetCode 521 Longest Uncommon Subsequence I 解题报告

    题目要求 Given a group of two strings, you need to find the longest uncommon subsequence of this group o ...

  8. java之Spring集成CXF简单调用

    简介 Apache CXF = Celtix + XFire,开始叫 Apache CeltiXfire,后来更名为 Apache CXF 了,以下简称为 CXF.CXF 继承了 Celtix 和 X ...

  9. vue 自适应 Responsive 设计

    使用阿里的 lib-flexible 及 vue-meta 库: https://github.com/amfe/lib-flexible/ https://github.com/nuxt/vue-m ...

  10. fiddler学习总结--Web端抓包

    步骤一: Fiddler的基本配置:Tools-->option-->Connections: 就可以进行抓包了 步骤二: 可以通过一些设置过滤: 步骤三: 抓取HTTPS的请求:1.安装 ...