平时在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. 微信JS-SDK说明文档【申明:来源于网络】

    微信JS-SDK说明文档[申明:来源于网络] 地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

  2. android不知不觉偷拍他人功能实现(手机关闭依然拍照)【申明:来源于网络】

    android不知不觉偷拍他人功能实现(手机关闭依然拍照)[申明:来源于网络] 地址:http://blog.csdn.net/huangxiaoguo1/article/details/536660 ...

  3. 【Linux内存源码分析】vmalloc不连续内存管理(转)

    https://www.jeanleo.com/2018/09/09/%E3%80%90linux%E5%86%85%E5%AD%98%E6%BA%90%E7%A0%81%E5%88%86%E6%9E ...

  4. django-CRM-项目部署

    流程 rbac组件的应用 1:拷贝rbac组件到新的项目中,执行注册 2:数据库迁移 先删除rbac下migrations下除了init之外的所有文件 修改用户表 class User(models. ...

  5. 终于解决 xUnit.net 测试中无法输出到控制台的问题

    2018-8-2 更新:今天发现在 git bash 中用 dotnet test 运行 xunit 测试可以正常输出到控制台,只是在 PowerShell 与 Windows 命令行中有这个问题. ...

  6. BeeHive小思考

    事件分发和事件处理 将所有行为注册为不同的时间类型,配置Module,让他们在事件发生时,响应这些事件(除了系统的事件,还可以注册自定义事件,触发自定义事件) Module注册之后应当会生成单例对象, ...

  7. hash 位运算 练习

    hash  位运算 [以下代码仅做位运算的练习,算法本身不合理  php转译python] 从头到尾彻底解析Hash表算法_知识库_博客园 https://kb.cnblogs.com/page/18 ...

  8. linux之cp和scp的使用

    cp 基本介绍 cp主要用于同一台服务器上,目录和文件的复制 表达式 cp [OPTIONS] SOURCE DEST --- 从源路径copy文件到目的路径 常用参数 -a same as -dpR ...

  9. node os模块

    const os = require('os'); console.log(os.homedir()); console.log(os.hostname()); console.log(os.plat ...

  10. 设置mac笔记本为固定ip

    第一步.点击Mac桌面“系统偏好设置”图标 第二步.在打开的系统偏好设置界面,点击互联网和无线选项中的“网络” 第三步.在网络界面,点击“高级”,进入高级设置.  第四步.在以太网设置界面,在TCP/ ...