vue中使用vconsole.js ------- 移动端调试神器

最新推荐文章于 2024-04-03 15:15:14 发布
最新推荐文章于 2024-04-03 15:15:14 发布
阅读量270 收藏
点赞数
分类专栏： 移动端H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47267851/article/details/115007847
版权

使用方法

  1. 使用cdn引入，在public目录下的index.html中引入如下代码即可
<body>
 ........
 <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
  <script>
    // 初始化
    var vConsole = new VConsole();
  </script>
</body>
  1. 使用npm安装

(1) npm下载

npm install vconsole

(2) main.js引入

import Vconsole from 'vconsole'
let vConsole = new Vconsole()
Vue.use(vConsole)

在这里插入图片描述
在这里插入图片描述

键盘敲烂 月薪过万
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vconsole.js
06-06
移动端调试神器，调试工具，vconsole.js，下载既用，简单方便， 平时在web应用开发过程中，我们可以console.log去输出一些信息，但是在移动端，也就是在手机上，console.log的信息我们是看不到的。 这种情况下，可以选择使用alert弹出一些信息，但是这种方法不怎么方便，也会阻断JS线程，导致后面的线程都不执行。也影响调试体验。 有了vconsole.js就方便多了，可以在手机上看到电脑浏览器控制台一样的界面，可以看到控制台打印的消息，调试更加容易。 使用方法：引入js，页面加载时候调用以下方法 window.vConsole = new window.VConsole({ defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板 maxLogNumber: 1000, // disableLogScrolling: true, onReady: function() { console.log('vConsole is ready.'); }, onClearLog: function() { console.log('on clearLog'); } });
Vue调试神器vue-devtools.zip
12-26
vue-devtools是一款专门用于vue应用调试的浏览器插件，可以大大地提高vue应用的调试效率。
H5移动端调试神器 - vconsole.js
weixin_34102807的博客
07-10 2095
vconsole.js git地址：github.com/Tencent/vCo… 引入方式 vconsoleUtil.js import VConsole from 'vconsole' var vConsole = new VConsole(); export default vConsole 复制代码调用方式 以vue项目为例 // 在main.js中引入 import './util...
在vue3中使用vconsole
weixin_44130964的博客
08-23 4751
vue中使用vconsole
前端页面，手机端调试工具 vConsole.js
最新发布
欢迎来到 动感地带
04-03 295
1.引入 <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
vue中使用vconsole
站在墙头上的博客
06-09 1万+
Vue中使用vconsole npm install vconsole 新建 vconsole.js 文件 ,在文件中写入 import Vconsole from 'vconsole' const vConsole = new Vconsole() export default vConsole 在main.js文件中引入 import vConsole from '@/assets/js/vconsole.js' 就可以看到了 ———————————————— 版权声明：本文为CSDN
实用！移动端vConsole使用方法
热门推荐
小小喵的博客
01-04 3万+
平时在web应用开发过程中，我们可以console.log去输出一些信息，但是在移动端，也就是在手机上，console.log的信息我们是看不到的，这时候就需要移动端调试工具vConsole 那么，如果将console.log应用到移动端呢？ 需要借助第三方插件：vConsole 第一种用法：引入js文件 资源链接 &amp;amp;amp;amp;lt;script src=&amp;amp;amp;quot;path/to/vconsole.min.j...
利用Console来调试JS程序、Console用法总结
Jaybo
06-27 1万+
利用Console来调试JS程序、Console用法总结（1）一 、什么是 ConsoleConsole 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象，使用该对象 可以输出信息到 Console 窗口中。二 、什么浏览器支持 Console很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console。而其他浏览器都支
【Vue】Vue中 Vconsole 的使用
努力搬砖
07-03 1万+
​ Vconsole，一个轻量、可拓展、针对手机网页的前端开发者调试面板​​。查看日志、网络请求、HTML结构、本地存储等，在移动端网页调试非常方便。
Vue3+TS+Vite中 vConsole 插件的使用
前端菜菜DayDayUp的博客
08-29 1655
Vue3+TS+Vite中 vConsole 插件的使用
vue-cli3.0配置vconsole在不同的环境是否显示
weixin_40667880的博客
07-09 3935
vue-cli3.0中开发环境显示vconsole（在npm run serve显示），生产环境不显示vconsole（在npm run build不显示）。vconsole在页面显示如下： 第一步，npm install vconsole-webpack-plugin --save-dev。 第二步，在vue.config.js中写入如下代码： const vConsolePlugin =...
vue移动端项目调试优雅的引入vconsole
weixin_48226213的博客
12-22 1203
移动端项目经常要在线调试，引入vconsole插件，当生产环境出现故障需要查看接口或数据时，直接引入会影响用户使用，可以通过以下方法优雅地调出vconsole，又不影响正常用户使用
vue中使用微信公众号js-sdk踩坑记录
10-17
主要介绍了vue中使用微信公众号js-sdk踩坑记录，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue.mini.js vue-router.js
01-04
vue文件 vue路由文件
vue-toaster:Vue 3的Vue.js Toast通知插件
05-23
Vue 3的Vue.js Toast通知插件 安装 # yarn yarn add @meforma/vue-toaster # npm npm install @meforma/vue-toaster 进口 // In you main.js // ... considering that your app creation is here import Toaster ...
vue-2.4.0.js
02-25
vue-2.4.0.js常用的vue前端框架。vue提供大量组件，简单易用，让程序员放手去写代码，减少DOM操作，十分happy！
JS——使用VConsole
qq812457115的博客
05-20 2980
【npm】 //安装 npm install vconsole //使用 import VConsole from 'vconsole'; const vConsole = new VConsole(); 【cdn】 <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
Vue中 Vconsole 工具
weixin_46370288的博客
01-06 959
​ 一个轻量、可拓展、针对手机网页的前端开发者调试面板。​ 2）在main.js中引入。一、Vconsole 简介。二、在Vue2中的使用。
Vue使用vconsole
weixin_52648390的博客
03-18 293
Vue使用vconsole，在移动端测试也可以看到console的内容 安装插件 npm install vconsole 在main.js中引入 3.运行项目 npm run dev 4.点击图片中的console按钮 借鉴博客： https://blog.csdn.net/vicky_yongqi/article/details/103071720 ...
在vue中使用plotly.js-with-locales
07-08
在Vue中使用Plotly.js-with-locales可以通过以下步骤实现： 1. 首先，使用npm或者yarn安装`plotly.js`和`plotly.js-with-locales`： ```shell npm install plotly.js plotly.js-with-locales --save ``` 2. 在Vue组件中，你可以导入`plotly.js-basic-dist`和`plotly.js-with-locales-dist`： ```javascript import Plotly from 'plotly.js-basic-dist'; import 'plotly.js-with-locales-dist'; ``` 3. 创建一个Vue组件，例如`PlotlyChart`： ```vue <template> <div> <div id="chart"></div> </div> </template> <script> export default { name: 'PlotlyChart', mounted() { this.drawChart(); }, methods: { drawChart() { // 使用Plotly创建图表 Plotly.newPlot('chart', [{ x: [1, 2, 3], y: [2, 4, 6], type: 'scatter' }]); // 设置本地化语言 Plotly.setPlotConfig({ locale: 'zh-CN' }); } } }; </script> ``` 4. 在需要使用图表的组件中引入`PlotlyChart`组件： ```vue <template> <div> <h1>Plotly.js with Locales Example</h1> <PlotlyChart /> </div> </template> <script> import PlotlyChart from './PlotlyChart.vue'; export default { name: 'App', components: { PlotlyChart } }; </script> ``` 这个例子创建了一个简单的散点图，并设置了本地化语言为中文（zh-CN）。你可以根据需要修改数据和图表类型。在实际项目中，你可能需要进一步优化和自定义图表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值