移动端调试神器vConsole使用详解

目录
  • 介绍
  • 功能特性
  • 使用
    • 方法一：使用 npm（推荐）
    • 方法二：使用 CDN 直接插入到 HTML
  • 开发环境显示生成环境删除
  • vue案例

介绍

平时在web应用开发过程中，我们可以console.log去输出一些信息或者看接口返回的信息及接口性能等情况，但是在移动端，也就是在手机上，我们是看不到的。

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

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

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。都有配套插件

https://gitee.com/Tencent/vConsole/tree/master/ 官方文档

功能特性

日志(Logs)： console.log|info|error|…
网络(Network)： XMLHttpRequest, Fetch, sendBeacon
节点(Element)： HTML 节点树
存储(Storage)： Cookies, LocalStorage, SessionStorage
手动执行 JS 命令行
自定义插件

使用

方法一：使用 npm（推荐）

npm install vconsole

Import 并初始化后，即可使用 console.log 功能，如 Chrome devtools 上一样。

import VConsole from 'vconsole';
const vConsole = new VConsole();
// 接下来即可照常使用 `console` 等方法
console.log('Hello world');
// 结束调试后，可移除掉
vConsole.destroy();

方法二：使用 CDN 直接插入到 HTML

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
  // 接下来即可照常使用 `console` 等方法
	console.log('Hello world');

	// 结束调试后，可移除掉
	vConsole.destroy();
</script>

开发环境显示生成环境删除

首先，咱们在做react、vue的单页应用开发的时候，相信大家对配置文件里的process.env并不眼生。 我们只需要生产环境不加载vConsole 开发和测试加载vConsole 并且限制只在手机端显示,因为pc有游览器的调试工具了,如果条件允许我们还可以添加生产环境开关按钮的方式触发调试面板

vue案例

如果不懂process.env的话自行百度搜索下很简单的,就好比全局变量一样

在main.ts里面添加如下代码

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import store from './store'
import VConsole from 'vconsole';
import router from './router'
createApp(App).use(store).use(router).mount('#app')

// 判断是否是pc设备
const isPc = () => {
    const userAgentInfo = navigator.userAgent;
    const Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    let flag = true;
    for (let v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

//如果不是生产环境并且不是pc设备那么就显示调试
if (process.env.NODE_ENV != "prod" && !isPc()) {
    console.log(process.env.NODE_ENV);
    const vConsole = new VConsole();
}

到此这篇关于移动端调试神器vConsole的文章就介绍到这了,更多相关移动端调试vConsole内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 移动端（微信等使用vConsole调试console的方法

    前言 因为最近一直在弄移动端项目,由于在移动端无法打开控制台,所以想办法打印调试console的数据一直苦恼.之前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试 使用 废话不多说,说说怎么使用的吧. 首先去下载相关的代码,由于只需要在页面引入一个js文件,直接去下载就可以,地址: 请戳我 或者使用 npm 安装: npm install vconsole 使用webpack,然后js代码中 import VCo

  • 利用Vconsole和Fillder进行移动端抓包调试方法

    在开发中,有时候我们需要在手机上进行测试,可是如果遇到bug,我们怎么进行抓包调试呢?这里介绍两种方式: Vconsole Fillder 利用Vconsole进行调试 一个轻量.可拓展.针对手机网页的前端开发者调试面板 Vconsole特性: 查看 console 日志 查看网络请求 手动执行 JS 命令行 自定义插件 入门 ①首先需要下载Vconsole,地址https://www.npmjs.com/package/vconsole ② npm install vconsole ③ Imp

  • 移动端调试神器vConsole使用详解

    目录 介绍 功能特性 使用 方法一:使用 npm(推荐) 方法二:使用 CDN 直接插入到 HTML 开发环境显示生成环境删除 vue案例 介绍 平时在web应用开发过程中,我们可以console.log去输出一些信息或者看接口返回的信息及接口性能等情况,但是在移动端,也就是在手机上,我们是看不到的. 这种情况下,可以选择使用alert弹出一些信息,但是这种方法不怎么方便,也会阻断JS线程,导致后面的线程都不执行.也影响调试体验. 那么,如果将console.log应用到移动端呢?需要借助第三方

  • vue开发调试神器vue-devtools使用详解

    vue开发调试神器vue-devtools使用详解

    前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插件 GitHub下载地址: https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像按照依赖包 地址:http://npm.taobao.org/ 命令行安装npm淘宝镜像: $ npm install -g cnpm --registry=https://

  • Android调试神器stetho使用详解和改造

    Android调试神器stetho使用详解和改造

    概述 stetho是Facebook开源的一个Android调试工具,项目地址:facebook/stetho 通过Stetho,开发者可以使用chrome的inspect功能,对Android应用进行调试和查看. 功能概述 stetho提供的功能主要有: Network Inspection:网络抓包,如果你使用的是当前流行的OkHttp或者Android自带的 HttpURLConnection,你可以轻松地在chrome inspect窗口的network一栏抓到所有的网络请求和回包,还用

  • 基于rem的移动端响应式适配方案(详解)

    基于rem的移动端响应式适配方案(详解)

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识,本质上离不开以下代码 <meta name="viewport" content="width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

  • django自带调试服务器的使用详解

    开启服务器 在终端(虚拟环境)下输入: python manage.py runserver 就可以开启服务器 输入后,注意随后弹出的服务器地址. 点击后就会跳转至调试服务器. 设置服务器 我们只进入了调试服务器却什么都做不了,那我要它何用? 我们返回我们的终端,点击绿色的小加号. 这样我们就可以一边保持服务器的运行一边对我们的服务器进行操作了. 我们先来设置一下我们服务器的超级管理员以方便我们的后续操作. 在终端输入以下指令. python manage.py createsuperuser;

  • asp.net 仿微信端菜单设置实例代码详解

    第一步:添加引用文件 <link rel="stylesheet" href="~/assets/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="~/assets/css/font-awesome.min.css" rel="external nofollow"

  • Linux应用调试之strace命令详解

    1.strace简介 strace常用来跟踪进程执行时的系统调用和所接收的信号. 通过strace可以知道应用程序打开了哪些文件,以及读写了什么内容,包括消耗的时间以及返回值等.在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核态模式,通 过系统调用访问硬件设备.strace可以跟踪到一个进程产生的系统调用,包括参数,返回值,执行消耗的时间. 2.安装strace命令 首先需要以下两个文件: strace-4.5

  • VSCode 搭建 Arm 远程调试环境的步骤详解

    简介 前提条件: 确保本机已经安装 VS Code. 确保本机已安装 SSH client, 并且确保远程主机已安装 SSH server. VSCode 已经安装了插件 C/C++. 本次搭建的环境: 主机:windows 10 服务器:ubuntu 16.04 VSCode 版本:February 2020 (version 1.43) Arm:海思 3559A (已配置好编译工具链和 gdb server) 连接远程主机 Remote Development 首先安装 Remote Dev

  • oracle调试存储过程的过程详解

    oracle如果存储过程比较复杂,我们要定位到错误就比较困难,那么可以存储过程的调试功能 先按简单的存储过程做个例子,就是上次做的存储过程(proc_test) 1.先在数据库的procedures文件找到我们之前创建存储过程 2.选中存储过程,右键弹出菜单,选择 测试 3.出现测试脚本页面,输入动态参数值,点击左上角的标志,进入调式模式 4.出现调试操作按钮界面(依次:运行 单步进入 单步跳过 单步退出 运行到下一个异常) 5.点击运行,直接获取存储过程的返回结果,点击单步进入,点击左边,进行

  • Java开发神器Lombok使用详解

    最近正在写SpringBoot系列文章和录制视频教程,每次都要重复写一些Getter/Setter.构造器方法.字符串输出的ToString方法和Equals/HashCode方法等.甚是浪费时间,也影响代码的可读性.因此,今天就给大家推荐一款Java开发神器--Lombok,让代码更简单易读. 什么是Lombok Lombok是一款Java开发插件,可以通过它定义的注解来精简冗长和繁琐的代码,主要针对简单的Java模型对象(POJO). 好处就显而易见了,可以节省大量重复工作,特别是当POJO

随机推荐