vconsole调试工具下载,安卓vconsole怎么调出来

　　VConsole是独立于框架的，可以在Vue、React或任何其他框架中使用。今天本文介绍移动端调试神器vConsole的使用。感兴趣的朋友来看看吧。

介绍

　　通常在web应用开发的过程中，我们可以使用console.log输出一些信息或者查看接口返回的信息和接口性能，但是在移动端，也就是手机上是看不到的。

　　在这种情况下，可以选择使用alert来弹出一些信息，但是这种方法不是很方便，而且还会阻塞JS线程，导致后续线程无法执行。而且影响调试体验。

　　那么，console.log应用到移动端会怎么样呢？

　　借助第三方插件：vConsole

　　一个轻量级、可扩展的前端开发人员调试面板，用于移动网页。

　　VConsole是独立于框架的，可以在Vue、React或任何其他框架中使用。有支持插件

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

功能特性

　　logs):console . log info error … error …

　　网络：xmlhttprequest，fetch，sendbeacon

　　元素):HTML节点树

　　存储：cookies、本地存储、会话存储

　　手动执行JS命令行

　　自定义插件

使用

方法一：使用 npm（推荐）

　　npm安装vconsole

　　并且在导入初始化之后，就可以使用console.log函数了，就像在Chrome devtools上一样。

　　从“VConsole”导入VConsole；

　　const v console=new v console()；

　　//然后就可以照常使用console等方法了。

　　console . log( Hello world )；

　　//经过调试，可以移除。

　　vconsole . destroy()；

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

　　script src= https://UNP kg . com/vconsole @ latest/dist/vconsole . min . js /script

　　脚本

　　//VConsole安装在窗口上。默认情况下为VConsole。

　　var vConsole=新窗口。VConsole()；

　　//然后就可以照常使用console等方法了。

　　console . log( Hello world )；

　　//经过调试，可以移除。

　　vconsole . destroy()；

　　/脚本

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

　　首先，我们在做react和vue的单页应用开发时，相信你对配置文件中的process.env并不陌生。我们只需要在生产环境中加载vConsole进行开发和测试，只在手机上加载vConsole，因为pc上有针对浏览器的调试工具。如果条件允许，我们还可以添加生产环境的切换按钮来触发调试面板。

vue案例

　　如果你不知道process.env，百度搜索很容易，就像一个全局变量。

　　在main.ts中添加以下代码

　　从“vue”导入{ createApp }

　　从导入应用程序。/App.vue

　　“导入”。/registerServiceWorker

　　从导入存储。/商店

　　从“VConsole”导入VConsole；

　　从导入路由器。/路由器

　　createApp(应用程序)。使用(存储)。使用(路由器)。挂载(#app)

　　//确定是否是pc设备。

　　const isPc=()={

　　const userAgentInfo=navigator . user agent；

　　const Agents=[Android ， iPhone ，

　　SymbianOS ， Windows Phone ，

　　iPad ， iPod ]；

　　设flag=true

　　for(设v=0；长度；五){

　　if(useragentinfo . index of(Agents[v])0){

　　flag=false

　　打破；

　　}

　　返回标志；

　　}

　　//如果不是生产环境，也不是pc设备，那么显示调试。

　　if (process.env.NODE_ENV！=prod ！isPc()) {

　　console . log(process . ENV . node _ ENV)；