vconsole 暗门

移动端调试神器-vConsole

什么是vConsole? 官方说明是一个web前端开发者面板,可用于展示console日志,方便日常开发,调试. 简单来说相当于移动版的Chrome调试控制台,就是我们在PC端常用的F12 vConsole的使用场景? 比如测试妹纸拿着手机过来跟你说某个页面打不开.你心想,怎么可能,我在电脑上用Chrome调试得好好的,也没有报错啊. 然后你接过测试妹纸的手机发现确实有个页面打不开.问题来了,移动端又不能像PC端打开控制台调试,我要怎么排错呢? vConsole就运应而生了 vConsole

移动端开发利器vConsole.js,app内嵌H5开发时调试用

vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsole.js最新下载地址. 直接将vConsole.js引入项目中,需要注意的是:最好吧js引入到页面的最上边.这样刚页面会首先加载vConsole.js. <script src="path/to/vconsole.min.js"></script> <scri

🍓 移动端调试工具之vconsole的使用～ 🍓

这里以在vue项目中的使用为例⬇️ 嗯模块化的. 不消多说,先cnpm install vconsole -S 然后在mian.js中配置之- ok啦-- 开发混合app的筒子,使用mac的话也有别的方法进行移动端在线调试-但还是这个更方便哈哈哈,ios.window都阔以!!

工具 - vConsole调试工具在项目中的应用

最近做移动端项目比较多,电脑上开发完了上真机必现问题,但是真机上又看不了代码很捉急啊有没有. 这两天才发现这个腾讯良品vConsole,以前开发小程序见过,但没想到他竟然还能被应用到我们的h5页面中, 废话不多说,先给大佬磕一个. 具体描述介绍啥的见github:https://github.com/Tencent/vConsole 我这里先记录下具体开发中是怎么引用的 1.按照官网的步骤,先安装vConsole工具包: npm install vconsole 注:我当时在项目中使用,安装命令

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

使用 devtools 有很多好处,比如它可以让你能够实时编辑数据属性并立即看到其反映出来的变化.另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验. 注意:请留意如果页面使用了一个生产环境/压缩后的 Vue.js 构建版本 (例如来自一个 CDN 的标准的链接),devtools 的审查功能是默认被禁用的,所以 Vue 面板不会出现.如果你切换到一个非压缩版本,你可能需要强制刷新该页面来看到它. vue-devtools安装: chrome商店直接安装: vue-devtools可

webpack 引用vconsole

1.npm install -vconsole --save-dev 2.npm install -vconsele-webpack-plugin --save-dev 3.webpack.base.conf.js 'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const webpack = require('webpac

移动的调试工具vConsole

在PC端写代码调试的时候,直接console.log()即可,但是在手机端怎么调试??最近发现一个很有用的插件vConsole 首先引入插件: 然后再文件中使用即可: 这样再手机中就会出现下面的标识,打开即可

移动端调试工具---vConsole

vConsole:https://github.com/Tencent/vConsole/blob/dev/README_CN.md 使用方法: 使用npm进行安装: npm install --save vConsole 在main.js写下面代码: /* eslint-disable no-unused-vars */ import vConsole from 'vconsole' 这样就可以使用vConsole了

移动端调试利器之vconsole

说明由于移动端项目在手机中调试时不能使用chrome的控制台,而vconsole是对pc端console的改写使用方法使用 npm 安装: npm install vconsole 使用webpack,然后js代码中: import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole let vConsole = new VConsole() // 初始化或者找到这个模块下面的 dist/vconsole.min

手机前端开发调试利器 – vConsole

我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己又重现不出来,看不到用户侧的出错信息. 如果说(1)还可以通过电脑连接手机以查看log来解决,那(2)在没有完善的前端上报体系时就非常被动了. 作为开发者,我们的诉求很简单:有没有快捷的方法在手机前端页面看到log日志? 答案是肯定的. vConsole:一个轻量.可拓展.针对手机网页的前端开发者调

vconsole h5应用ajax请求抓包

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-sty

移动端 vconsole 的使用

在微信和app里我们没有办法使用谷歌提供的开发者工具,可以借助 vconsole 使用步骤如下 1.安装 npm install vconsole 2.app.js里引入 import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole let vConsole = new VConsole() // 初始化

vconsole使用

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="jquery.min.js"></script> <script src="https://www.w3cways.com/demo/vconsole/vconsole.min.js?

移动端打印输出内容以及网络请求-vconsole.js

今天,无意间从别人那里得知一个很好的js插件--vconsole.min.js,可以实现在移动端打印输出内容以及查看网络请求.下面记录使用方式. 1.下载vconsole.min.js插件以下复制了插件vconsole.min.js的内容 /*! * vconsole v2.5.1 (https://github.com/WechatFE/vConsole) * Copyright 2016, WechatFE Team * MIT license */ !function(e,t){"obj

手机端页面调试工具-vconsole使用

用的是VUE-CLI3第一步.安装vconsole npm install vconsole 第二步.创建js文件并写入内容 import Vconsole from 'vconsole' let vConsole = new Vconsole() export default vConsole 第三步.main.js引入 // 页面调试js require('./assets/js/vconsole.js');

周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重点是随机撒花,下面会附上随机撒花的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"

配置vConsole调试console

1.使用 npm 安装: npm install vconsole 再使用webpack,然后js代码中 import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole let vConsole = new VConsole() // 初始化 2.找到这个模块下面的 dist/vconsole.min.js ,然后复制到自己的项目中 <head> <script src="dist/vconsole.

vConsole ~ 移动开发调试工具

在开发移动端项目时,有时候在PC端好好的,但是到了手机上出bug,很难调试,这时候可以用vConsole调试工具使用方式 1.直接引入 <script src="vconsole.min.js"></script> <script> // init vConsole var vConsole = new VConsole(); console.log('Hello world'); </script> 2.在模块化工程中引入 cnpm

前端读者 | 前端开发者调试面板vConsole

来着微信团队开源的一个调试工具,[GitHub地址]https://github.com/Tencent/vConsole 一个轻量.可拓展.针对手机网页的前端开发者调试面板. 特性查看 console 日志查看网络请求查看页面 element 结构查看 Cookies 和 localStorage 手动执行 JS 命令行自定义插件上手下载 vConsole 的最新版本.(不要直接下载 dev 分支下的 dist/vconsole.min.js) 或者使用 npm 安装: npm

vConsole

说明由于移动端项目在手机中调试时不能使用chrome的控制台,而vconsole是对pc端console的改写使用方法使用 npm 安装: npm install vconsole 使用webpack,然后js代码中: import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole let vConsole = new VConsole() // 初始化或者找到这个模块下面的 dist/vconsole.min

vconsole 暗门

热门专题