移动端调试神器vConsole
介绍
平时在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与eruda
博客内容来自: https://www.jianshu.com/p/a05b90ab03e4 我们在写webapp或者移动端网页需要嵌入到app时候,尤其是在APP内置的webView上加载我们的页面 ...
- 移动端调试神器——vconsole
详情请点击链接: https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md
- 移动H5调试神器 vConsole
做移动H5时,经常需要真机调试,但是手机端没有像Chrome控制台那样的开发者工具,对于network.console日志没办法查看,所以便有了今天的开发神器--vConsole. vConsole是 ...
- web移动端调试神器Eruda
在Web开发过程中,对html页面进行开发和调试的时候都会用到浏览器提供的调试工具,小编我最常用的就是Chrome浏览器自带的开发者工具了,可以很方便的对JS代码进行断点调试,log也很方便.但是在移 ...
- html5页面调试工具,web移动端调试神器Eruda
在Web开发过程中,对html页面进行开发和调试的时候都会用到浏览器提供的调试工具,小编我最常用的就是Chrome浏览器自带的开发者工具了,可以很方便的对JS代码进行断点调试,log也很方便.但是在移 ...
- Eruda 一个小而美的移动端调试神器
引言 日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于fiddler.Charles.chrome devtools.Firebug ...
- ----移动端移动端调试神器vConsole----
我们在写webapp或者移动端网页需要嵌入到app时候,尤其是在APP内置的webView上加载我们的页面,想要查看手机浏览器信息是非常困难的事,当出现问题的时候,你又不能查看日志,一般会连接本地测试 ...
- eruda.js 移动端调试神器使用教程(eruda)
在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,只有在chrome调试完成,没有问题了才会上到真机测试,移动端开发的一大问题就在于此, 各种品牌各种型号手机,手机中各种 ...
- 移动端调试神器(eruda)
在移动端开发的过程中,经常是在chrome dev tools或者微信开发工具中调试好了但放入各种型号的手机或者app里就会出现问题.而在移动端想要看到数据就只能抓包,eruda能在页面生成一个控制台 ...
最新文章
- CQRS及.NET中的参考资料
- 牛客OI周赛10-提高组:B-Taeyeon的困惑(值域线段树)
- 开源组件ExcelReport 3.x.x 使用手册(为.netcore而来
- servlet中的数据存储
- 特斯拉柏林超级工厂最终环保审批结果有望周五揭晓
- 每日英语:Chinese Show Global Real-Estate Appetite
- 恭祝月圆·家圆·团圆
- Trick 一题多解——交换两个数(swap)
- 《Java程序员职场全攻略:从小工到专家》连载九:散兵游勇还是团队作战
- Spark电商离线数仓·用户模块指标统计
- 二项分布的极大似然估计
- 国外博士论文下载网址
- Java实现对文件的读写操作
- Centos挂载iscsi存储(浪潮存储)
- 使用yaf+yar实现基于http的rpc服务
- 选择题快速求解AOE网的关键路径
- GEE-Scholars MODIS地表温度LST时间变化趋势
- PCL读取ply文件
- Java工程师的工资待遇如何?
- pytorch1.13启用caffe2
热门文章
- 知乎高赞的字节跳动总结的设计模式 PDF 火了,完整版限时开放下载!
- 专属所想 精诚所“制”——网帮客精选企业定制
- Symbian游戏编程入门
- 打开autoCAD2004出现fail to get commcntrcontroller错误信息
- 实现自定义的actuator端点
- 博弈论——懦夫博弈和性别战
- 一文彻底搞懂观察者模式(Observer)
- 星际争霸php,php设计模式之建造器模式分析【星际争霸游戏案例】
- 4月1-5号在武汉举行第五届全国Revit开发中高级实战训练营
- 第七届全国Revit开发实战训练课程2018年元旦在武汉举行,叶雄进领衔主讲