VConsole——Vue 项目中使用手机网页的前端 console 调试面板 1.cdn 使用 使用 cdn 引入,在 public 目录下的 index.html 中引入如下代码即可 //...初始化 var vConsole = new VConsole(); const hasAttr = (e,a) => a.some...2.main.js 引入,并判断非生产环境使⽤ //import Vconsole from 'vconsole' //let vConsole = new Vconsole() //Vue.use(...vConsole) import VConsole from 'vconsole' if (process.env.NODE_ENV === 'development') { var vConsole...= new VConsole() app.use(vConsole) }
vConsole 调试脚本: A lightweight, extendable front-end developer tool for mobile web page..../3.2.0/vconsole.min.js'>new VConsole();" 没有 title 标签,则找 body 标签替换 ^@rsp.bodyText.../3.2.0/vconsole.min.js'> new VConsole();" 其中new VConsole() 是关键不调用不会生成界面...还有载人方式可以使用chalrs或者fiddler替换js再头部注入 考虑加载速度的原因,没有直接使用 github 上的 vConsole 原地址,而是 dump 了一份到 coding.net 仓库里...,所以上面用的是 codeing.net 的脚本地址 » vConsole 注入设置如图 同理,再新建一个断点,完成 Eruda 工具的注入(其实可以不用两个调试脚本都注入,这里只是演示效果) 第二步
这两天才发现这个腾讯良品vConsole,以前开发小程序见过,但没想到他竟然还能被应用到我们的h5页面中, ? 废话不多说,先给大佬磕一个。...具体描述介绍啥的见github:https://github.com/Tencent/vConsole 我这里先记录下具体开发中是怎么引用的 1、按照官网的步骤,先安装vConsole工具包: npm...install vconsole 注:我当时在项目中使用,安装命令是 npm i --S vconsole 然后项目的入口js中引入并实例化,如下: let VConsole = require(.../node_modules/vconsole/dist/vconsole.min');//路径根据项目自己找 let vConsole = new VConsole(); 。。。
loader('https://unpkg.com/vconsole@latest/dist/vconsole.min.js',() => { var vConsole = new window.VConsole...http://wechatfe.github.io/vconsole/demo.html 花式用法! 接入vConsole确实极大方便了我们调试和发现问题,但是这样就足够了吗?...vConsole本身支持我们自定义插件,来实现定制化的使用需求,我们来看下基于vConsole,我们还能开发出什么样的玩法。...首先,我们为vConsole添加一个“反馈”tab。...window.vConsole = new VConsole(); window.vConsole.addPlugin(feedbackPlugin); window.vConsole.addPlugin
前几天遇见了js不兼容问题,然后使用了一下vconsole,发现连这个也不兼容,于是放弃了修复。今天刚好有人问到移动端的问题,于是就想分享一下vconsole这个移动端的调试工具。...可能很多人知道vconsole这个东西,毕竟在调试移动端的时候确实是不错。开发移动端的都知道,很多时候在chrom手机模式下没有任何问题,到了真机的时候很容易出现一些奇奇怪怪的问题。...去bootcdn下载vconsolejs,然后引入: 初始化: new VConsole(); 就能看见页面出现了一个按钮: ?...也可以通过npm安装依赖: npm install vconsole 然后使用: import VConsole from 'vconsole' new VConsole(); ?
通过vConsole.js 重写console方法,实现了类似于微信小程序的移动端调试效果。...具体使用方法也很简单 ...// 初始化 var vConsole = new VConsole(); console.log('Hello world');
平时在web应用开发过程中,我们可以console.log去输出一些信息,但是在移动端,也就是在手机上,console.log的信息我们是看不到的,这时候就需要移动端调试工具vConsole 通过vConsole.js.../vconsole.min.js?...v=3.2.0"> // init vConsole var vConsole = new VConsole();...Vue from 'vue' import Vconsole from 'vconsole' if (process.env.NODE_ENV !...== 'production') { // 测试和开发打开,生产不能打开 let vConsole = new Vconsole() Vue.use(vConsole) }
copy到index.html // 初始化 var vConsole = new VConsole(); console.log('Hello world'); </script
安装之后会在 H5 页面上一直显示vconsole的开关,关闭需要注掉代码后重新打包,过程比较繁琐。...引入 vconsole: npm install vconsole App.vue 文件中增加引用: import vconsole from 'vconsole'; 在程序启动回调函数 onLaunch...$vconsole) { this....$vconsole = new vconsole() } } console.log('App Launch') }, 访问方式(本地测试端口为 8080): 地址示例: http://[localhost...参考资料 TBS 调试指南 uni-app 使用 vconsole
vConsole 一个轻量、可拓展、针对手机网页的前端开发者调试面板。。 vConsole 是框架无关的,可以在Vue、React或任何其他框架中使用。...vConsole是现在微信微程序的官方调试工具。 功能特性 日志(Logs): console.log|info|error|......import VConsole from 'vconsole'; const vConsole = new VConsole(); // or init with options const vConsole...vconsole@latest/dist/vconsole.min.js"> // VConsole will be exported to `window.VConsole...var vConsole = new window.VConsole();
最近老搞移动端开发,赶脚调试起来很不方便,然后就发现了腾讯开源的vConsole vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。...import VConsole from 'vconsole'; const vConsole = new VConsole(); // 或者使用 options 选项初始化 const vConsole.../dist/vconsole.min.js"> // VConsole 默认会挂载到 `window.VConsole` 上 var vConsole = new...插件:Event 事件列表 第三方插件列表 vConsole-sources vconsole-webpack-plugin vconsole-stats-plugin vconsole-vue-devtools-plugin...vconsole-outputlog-plugin vite-plugin-vconsole
console.log/info 等方法来输出日志信息,电脑浏览器中可以方便的在控制台中查看 现在移动端的web开发越来越多,而在移动设备中进行开发调试时,console.log 这类的日志信息就不太容易查看了 vConsole...就是用来解决这个问题,可以让我们在移动设备中非常方便的查看console日志信息 vConsole 是由微信的前端研发团队提供,小巧好用 DEMO http://wechatfe.github.io.../vconsole/demo.html(建议复制到微信打开) ?...控制台中显示日志 使用 (1)下载 vconsole 项目地址 https://github.com/WechatFE/vConsole (1)页面中引用 vconsole.min.js (...{ alert('info'); console.info('test info'); } vConsole
vConsole vConsole 是一个轻量、可扩展的前端开发者调试面板。专为手机 web 页面量身设计,帮助开发者更为便捷地进行开发调试工作。目前在使用于微信公众平台、微信小程序等。...特性如下: 查看 console 日志 查看网络请求 手动执行 JS 命令行 自定义插件 前端开发者调试面板 vConsole 正式开源 Github地址: https://github.com/Tencent.../vConsole 请给 vConsole 一个 Star!
广东某男子发现微信小程序开发环境自带vConsole.同学,你看到这个新闻不震惊不兴奋打鸡血吗?你开发小程序都少装一个vConsole包呢!!!...基于DCloud公司开发的HbuilderX编辑器进行uni-app开发时,你会发现安装npm包没有用npm项目初始化的来的简单,这里简单提及一下,因为今天主要是介绍如何在微信小程序开发环境打开vConsole...其实很简单就一条命令然后配置下,cnpm install vconsole -D图片常规解法之外的解法为了排除偶然性,这边笔者通过多机型对比,得出结论,在开发环境下,打开微信小程序可以调出打日志的vConsole...如图所示,我们先看左上角,这个绿色底色白色文字的按钮就是Vconsole的开关啦,我们点击右上角那三个点,然后弹出一个窗口,我们选择”开发除错“,因为笔者用的是繁体字,所以可能展示会有所不一样,盲猜下简体的话应该是打开终端...图片安卓环境下也是一样的,如图所示:图片总结微信生态好啊,捡漏啦可以不用装vConsole了,但是如果你开发的是H5页面或者是编译出App,那么可能你需要额外装一下这个vConsole包,嗯,以上就是今天全部内容
概述 前面有文章monaco-editor做自己的代码测试工具 ,本文书接前文,在代码中加入vconsole工具,可以进行代码调试、查看网络、查看元素等。...效果 vconsole简介 vconsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。跟框架无关的,可以在 Vue、React 或其他任何框架中使用。...@latest/dist/vconsole.min.js"> <div class=.../ 创建调试器 const target = document.getElementById('console') const vConsole...target }); setTimeout(() => { vConsole.hideSwitch
vConsole相信各位并不陌生,它是一个轻量、可拓展、针对手机网页的前端开发者调试面板。...有时候为了想在手机上对网页进行 Debug,可手机上没有F12,电脑却又不在身边,请不要着急, 这时就需要vConsole了, vConsole是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板...SessionStorage 手动执行 JS 命令行 自定义插件 ---- 点我在线体验 使用方法 从Github上下载最新版本,然后按下列方式在你的网页中引入: var vConsole = new VConsole(); console.log('Hello world');
微信小程序开发环境自带vConsole. 同学,你看到这个新闻不震惊不兴奋打鸡血吗?你开发小程序都少装一个vConsole包呢!!!...基于DCloud公司开发的HbuilderX编辑器进行uni-app开发时,你会发现安装npm包没有用npm项目初始化的来的简单,这里简单提及一下,因为今天主要是介绍如何在微信小程序开发环境打开vConsole...其实很简单就一条命令然后配置下,cnpm install vconsole -D 常规解法之外的解法 为了排除偶然性,这边笔者通过多机型对比,得出结论,在开发环境下,打开微信小程序可以调出打日志的vConsole...如图所示,我们先看左上角,这个绿色底色白色文字的按钮就是Vconsole的开关啦,我们点击右上角那三个点,然后弹出一个窗口,我们选择”开发除错“,因为笔者用的是繁体字,所以可能展示会有所不一样,盲猜下简体的话应该是打开终端...安卓环境下也是一样的,如图所示: 总结 微信生态好啊,捡漏啦可以不用装vConsole了,但是如果你开发的是H5页面或者是编译出App,那么可能你需要额外装一下这个vConsole包,嗯,以上就是今天全部内容
以下介绍在不用修改代码并发布项目的情况下,为我们日常使用的移动web应用(如手机web淘宝)添加vConsole调试工具的方法 vConsole介绍 vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板...使用vConsole的项目可以让手机上的Web浏览器,拥有类似PC调试工具的能力。 正常情况下使用vConsole需要修改项目代码并重新发布。...vConsole官方介绍(https://github.com/Tencent/vConsole) FreeHttp介绍 FreeHttp是一个Fiddler插件,借助FreeHttp您可按照您自己的设定任意修改...head>标签即可 var vConsole = new VConsole(); console.log...vc-min-height {\n min-height: 3.07692308em;\n}\n#__vconsole dd,\n#__vconsole dl,\n#__vconsole pre {\
1、下载vconsole.min.js插件 以下复制了插件vconsole.min.js的内容 /*!...* vconsole v2.5.1 (https://github.com/WechatFE/vConsole) * Copyright 2016, WechatFE Team * MIT license...exports.vConsole=t():e.vConsole=t()}(this,function(){return function(e){function t(n){if(o[n])return...,homepage:"https://github.com/WechatFE/vConsole",main:"dist/vconsole.min.js",scripts:{test:"mocha",dist....vc-item{display:none}#__vconsole .vc-logbox .vc-log.vc-log-partly-error .vc-item-error,#__vconsole
import VConsole from 'vconsole'; const vConsole = new VConsole(); // 或者使用配置参数来初始化,详情见文档 const vConsole...,可移除掉 vConsole.destroy(); 方法二:使用 CDN 直接插入到 HTML // VConsole 默认会挂载到 `window.VConsole` 上 var vConsole = new window.VConsole();.../vconsole@latest/dist/vconsole.min.js 使用示例和建议 引入 vConsole 模块后,页面前端将会在右下角出现 vConsole 的悬停按钮,可展开/收起面板。...vConsole地址 https://gitee.com/Tencent/vConsole
领取专属 10元无门槛券
手把手带您无忧上云