Vue CLI + VUE +vConsole/eruda 在移动端进行调试

最新推荐文章于 2024-09-13 21:59:50 发布
最新推荐文章于 2024-09-13 21:59:50 发布
阅读量1.2k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： JavaScript vue.js 学习笔记 文章标签： vue debug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36570464/article/details/109271012
本文介绍如何使用eruda和vConsole进行Vue项目的移动端调试。通过npm安装eruda并将其引入main.js文件即可使用eruda；而vConsole则需先用npm安装，然后可以通过将其挂载到Vue实例或直接添加到window对象上来启用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue CLI + VUE +vConsole/eruda 在移动端进行调试

Vue CLI + VUE +vConsole/eruda 在移动端进行调试

eruda

  1. 安装
    npm install eruda --save
  2. 使用
    在main.js 文件中引用
    import eruda from ‘eruda’
    eruda.init()

vConsole

1、npm install vconsole
2.使用(不是唯一的方法，还有很多)
在这里插入图片描述
3. 除了可以添加到window中，也可以挂载到vue中，
在这里插入图片描述

在这里插入图片描述

Eruda 一个小而美的移动端调试神器
画漫画的程序员∙苏南
12-24 3190
Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等，虽说日常的移动端开发时，一般都是在用Chrome DevTools浏览器的移动端模式模拟各种手机型号来进行开发和调试，确保功能/页面展示等都没有问题了，才会提交测试；那就也就有调试，说到调试工具，大家可能对于fiddler、Charles、chrome devtools、Firebug、还有Safari远程调试等
Mdebug：基于React开发的移动web调试工具
腾讯技术工程
09-01 1302
作者：thinkchen，腾讯 PCG 高级前端开发工程师mdebug是腾讯新闻 TNTWEB 团队推出的基于React开发的新的web调试工具, 沉淀自腾讯新闻微信手 q 双插件多年的移...
vue 使用 eruda（移动端H5调试工具）
qq_46302247的博客
01-05 726
【代码】vue 使用 eruda（移动端H5调试工具）
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）
仙魁XAN
04-09 7951
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole） 目录 Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole） 一、简单介绍 二、Eruda 1、安装 2、使用 3、实用 三、vConsole 1、安装 2、使用 3、实用 四、关键代码 五、CDN 方式使用 Eruda 、vConsole 六、其他 一、简单介绍 Vue 开发的一些知识整理，方便后期遇到类似...
浙政钉埋点（Vue2代码）
mmmmmmmmzw的博客
03-19 900
使用vue2的mixin，快速处理浙政钉埋点
【vue2】vue全家桶介绍，学习vue必备
嗨，朋友你好！我是前端领域的工作者
03-16 6017
vue全家桶介绍包括vue介绍、vue-cli、vue-router、vuex、axios、UI框架
eruda操作
豪哥的博客
10-24 2643
eruda操作
vue移动端调试工具
08-26
Vue移动端调试工具主要有Eruda和vConsole。Eruda是一个轻量级的前端调试工具，可以用于移动端的调试。它提供了一个浮动调试面板，可以查看和修改页面的HTML、CSS和JavaScript代码。如和所示，你可以通过引入Eruda的...
vue3 使用 eruda
08-06
然后，在Vue的入口文件中进行初始化。你可以在`main.js`文件中添加以下代码： ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './...
Vue-cli3.x项目搭建与自动化配置指南
10. eruda：这是一个移动端的调试面板，类似于vConsole，可以在移动端设备上调试和查看日志。 在Vue-cli3.x-configure项目中，使用了多种自动化脚本来提高开发效率。如： - npm install：用于安装项目依赖。 - npm...
移动端调试工具 vconsole、eruda 使用方法
MISS_zhang_0110的博客
07-28 2072
【代码】移动端调试工具 vconsole、eruda 使用方法。
Eruda 移动浏览器控制台安装与配置指南
最新发布
gitblog_07643的博客
09-13 656
Eruda 移动浏览器控制台安装与配置指南 1. 项目基础介绍和主要编程语言 项目介绍 Eruda 是一个专为移动浏览器设计的控制台工具，旨在帮助开发者更方便地调试移动端网页。它提供了类似于桌面浏览器开发者工具的功能，如控制台日志显示、DOM 检查、网络请求监控、本地存储和 Cookie 信息查看等。 主要编程语言 Eruda 主要使用 JavaScript 编写，同时也使用了 HTML 和 CS...
vue3 移动端调试工具vconsole和eruda 及其两种使用方式
arrow.light的博客
02-25 5204
vue3 移动端调试工具vconsole和eruda 及其两种使用方式。tip：eruda和Chrome浏览器的从console台很像，推荐使用。
非常强大的移动端调试神器-Eruda
Superxpang的博客
04-28 1034
之前有出过一篇在react项目中安装eruda的教程，此篇针对Vue项目，欢迎大家批评指正！
Vue中 Vconsole 工具
weixin_46370288的博客
01-06 2788
​ 一个轻量、可拓展、针对手机网页的前端开发者调试面板。​ 2）在main.js中引入。一、Vconsole 简介。二、在Vue2中的使用。
eruda.js 移动端调试神器使用教程（eruda）
宋坚强大大~~
09-03 7287
在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，没有问题了才会上到真机测试，移动端开发的一大问题就在于此， 各种品牌各种型号手机，手机中各种类型的浏览器APP........还好移动端的相对一致点，但是往往都会有一些各种各样的坑，这时候就蛋疼了，明明chrome调试工具中是正常的， 一到某个浏览器中就炸了，怎么办，又无法像在chro...
手机端调试
weixin_30649859的博客
07-06 437
每次遇到手机端问题像丈二的和尚摸不着头脑，前两天发现了一款强大的工具，手机端调试方便的很，特此记录下！！！ 先上原文地址：https://github.com/liriliri/eruda Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie ...
移动端调试神器——vconsole
THINK_OF_的博客
02-05 5211
详情请点击链接: https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md
移动端调试工具vConsole与Eruda
ass_ace
10-02 3236
移动端调试工具vconsole与Eruda1.vconsole2. Eruda 随着web H5应用的广泛，很多原生软件采用原生+H5混合开发到的模式，对于安卓和IOS原生的app他们有自己的调试方式，比较友好，出现问题也比较好重现，而web app的js代码一旦部署上生产，代码和接口层面的报错很难捕捉，一般都要通过取日志去查看报错，为了方便定位问题，我的项目引入过以下两个调试工具，以下是对vconsole和eruda两个工具的使用和对比。 1.vconsole vconsole基本能满足移动端的调试，调试
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值