首页 > 其他分享 >前端必须知道的手机调试工具vConsole

前端必须知道的手机调试工具vConsole

时间:2023-07-06 11:35:45浏览次数:37  
标签:vconsole 前端 vConsole new 方法 VConsole 调试

在日常业务中我相信大家多多少少都有移动端的项目,移动端的项目需要真机调试的很多东西看不到调试起来也比较麻烦,今天给大家分享一个我认为比较好用的调试第三方库VConsole ,有了这个库咱们就在手机上看控制台了,VConsole有两种引用方式,使用方法也很简单
方法一:在public目录下index.html文件中引入vconsole.min.js

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>

再到需要查看控制台的页面的created中使用new vConsole 实例

  created() {
    var vConsole = new window.VConsole();
    console.log(vConsole);
 },
beforeDestroy() {
    vConsole.destroy();// 不需要用到时销毁
},

接下来咱们就能在页面上看到

方法二:cmd用npm安装VConsole

npm install vconsole

安装完成直接进入项目引入使用即可

import VConsole from 'vconsole';
creatrd(){
const vConsole = new VConsole();
// 两种方法取其一
const vConsole = new VConsole({ theme: 'dark' });


// 打印测试
console.log('Hello world');
},
beforeDestroy() {
    vConsole.destroy();// 不需要用到时销毁
},

两种方法效果相同,我倾向于第一种方法比较方便

PS:还有注意了,调试完成一定一定一定记得删除

更多vConsole使用教程方法可以去
github:https://github.com/Tencent/vConsole

gitee:https://gitee.com/Tencent/vConsole

标签:vconsole,前端,vConsole,new,方法,VConsole,调试
From: https://www.cnblogs.com/dengsir39/p/17531663.html

相关文章

  • 【13.0】前端基础JavaScript之JS事件案例
    【13.0】前端基础JavaScript之JS事件案例【一】开关灯示例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.c1{height:......
  • 前端播放m3u8格式视频
    <!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>前端播放m3u8格式视频</title><linkhref="https://vjs.zencdn.net/7.4.1/video-js.css"rel="stylesheet......
  • 【14.0】前端基础jQuery之引入
    【14.0】前端基础jQuery之引入【一】什么是jQueryjQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Writeless,domore.“jQuery......
  • 前端Vue自定义顶部导航栏navBar 导航栏搜索框searchBar 导航栏右侧菜单按钮button
    前端Vue自定义顶部导航栏navBar导航栏搜索框searchBar导航栏右侧菜单按钮button,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13342效果图如下:cc-headerSearch使用方法<!--icon:右侧菜单图标@searchClick:搜索点击 @rigIconClick:右......
  • 前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空 搜索历史存储记录
    前端Vue自定义带历史记录的搜索框组件searchBar支持搜索输入框清空搜索历史存储记录清除,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13343效果图如下:cc-hisSearchBar使用方法//不同的业务功能历史记录设置不同存储keyconstkStora......
  • 分页查询-前端
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.el-table.warning-row{background:oldlace;}.el-......
  • rv1126平台spi屏调试
    我们使用的rv1126平台,屏icST7789,硬件使用6bit,由于不是8bit的,所以显示的颜色没有那么丰富1.硬件原理图2.dts配置 &rgb{    status="okay";     pinctrl-names="default";    pinctrl-0=<&lcdc_ctl>;       ports{ ......
  • 关于调试gmsh源码过程中产生的gmsh.dll和gmsh.pdb文件无法匹配,进而导致无法载入pdb文
    省流版由于ALL_BUILD会将对应于gmsh.exe的调试文件gmsh.pdb附在对应于gmsh.dll的调试文件gmsh.pdb文件,进而导致gmsh.pdb无法和gmsh.dll文件进行版本匹配,进而导致无法载入,进而导致无法调试gmsh源码;解决办法:将对应于gmsh.exe的gmsh.pdb改为其他任意命名即可;或者仅仅生成gms......
  • RV1126调试-修改默认调试串口
    背景RK系列的SDK给的默认的调试串口都是uart2/1500000波特率,本次调试设备已经把console调试口改为了uart0,所以需要修改下uboot和内核,然后把波特率设为常用的115200。注:本次调试的SDK版本为原厂的V2.2版本1.uboot修改1)修改rv1126-evb.dts和rv1126-u-boot.dtsi把uart2改成uart......
  • 【12.0】前端基础JavaScript之DOM
    【12.0】前端基础JavaScript之DOM【一】什么是DOM/BOM截至目前为止,我们虽然已经学会了js语法,但是还是没办法跟浏览器进行交互BOM(BrowserObjectModel)浏览器对象模型js代码操作浏览器DOM(DocunmentObjectModel)文档对象模型js代码操作标签【二】Window......