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
通过vConsole.js 重写console方法，实现了类似于微信小程序的移动端调试效果。...具体使用方法也很简单 ...// 初始化 var vConsole = new VConsole(); console.log('Hello world');
前几天遇见了js不兼容问题，然后使用了一下vconsole，发现连这个也不兼容，于是放弃了修复。今天刚好有人问到移动端的问题，于是就想分享一下vconsole这个移动端的调试工具。...可能很多人知道vconsole这个东西，毕竟在调试移动端的时候确实是不错。开发移动端的都知道，很多时候在chrom手机模式下没有任何问题，到了真机的时候很容易出现一些奇奇怪怪的问题。...去bootcdn下载vconsolejs，然后引入： 初始化： new VConsole(); 就能看见页面出现了一个按钮： ?...也可以通过npm安装依赖： npm install vconsole 然后使用： import VConsole from 'vconsole' new VConsole(); ?
平时在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包，嗯，以上就是今天全部内容
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
https请求进行抓包及修改，手机需要配置下whistle代理，一切准备就绪后，可以配置如下规则： m.baidu.com log:// # 如果你想同时注入js脚本，可以用下面一种方式 # 在mac或linux...利用whistle注入vConsole vConsole是微信团队开发的轻量、可拓展、针对手机网页的前端开发者调试面板，主要原理是通过在页面注入js实现模拟PC浏览器的Console功能，这边利用whistle...的js协议往指定网页(https://m.baidu.com/)注入vConsole.js，配置whistle规则： m.baidu.com js://{vConsole.js} 效果如下图： ?...注意： vConsole和weinre不能同时使用 whistle还有很多应用场景，后续再逐步输出给大家，了解更多内容请访问whistle的Github：https://github.com/avwo/
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
