vue调试工具vue-Devtool的安装

最新推荐文章于 2024-07-04 23:34:24 发布

xjjjj1

最新推荐文章于 2024-07-04 23:34:24 发布

阅读量651

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/xjjjj1/article/details/118183578

版权

本文详细介绍了Vue Devtool的安装步骤，包括从GitHub下载、安装依赖、修改manifest.json、编译代码以及如何在Chrome中加载扩展。特别提到解决在安装高版本时可能出现的错误，建议使用v5.1.1或更低版本。完成安装后，Vue Devtool能方便地在Vue项目中进行数据调试。

摘要由CSDN通过智能技术生成

在平常的前端开发中，调试工具的使用是十分必要的，而在进行vue的开发中使用普通的devtool或许并不能满足开发人员的需求，在这时vue Devtool便体现出了其重要性。本文主要对vueDevtool的安装与本人安装中遇到的问题进行讲解。

1.到github下载vueDevtool

git clone https://github.com/vuejs/vue-devtools

我在使用此命令安装后在后须的编译代码过程中会报错，解决方法是安装较低版本的vue devtool（v5.1.1以前的版本）v5.1.1的下载代码如下：

git clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git

2.在vue-devtools目录下安装依赖包

cd vue-devtools
npm install

3.修改manifest.json文件

把"persistent":false改成true

4.编译代码

npm run build

5.扩展Chrome插件

Chrome浏览器 > 更多程序 > 拓展程序

点击加载已解压程序按钮, 选择 vue-devtools > shells &

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xjjjj1

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue-perf-devtool.zip

09-19

vue性能检查工具, ubuntu系统下的手动编译版本,适用于离线安装. 安装方法: 1. 解压本文件 2. 打开chrome, 进入extension 页面, 选择 unpack 安装方式, 选择解压的文件夹中的shells目录下的chrome文件夹

Vue（二）：调试神器vue-devtools安装和使用

dichengyan0013的博客

12-12

972

前言 vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。安装 1.chrome商店直接安装 vue-devtools可以从chrome商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要翻墙才能下载。 2.手动安装第一步：找到vue-de...

参与评论您还未登录，请先登录后发表或查看评论

Vue调试工具vue-devtools的安装与使用_vue调试工具安装

最新发布

2401_84435192的博客

07-04

480

主要介绍vue-devtools的安装与使用。秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！高级前端工程师必备资料包。

探索 Vue 性能优化的新工具：Vue-Perf-Devtool

gitblog_00042的博客

04-16

414

探索 Vue 性能优化的新工具：Vue-Perf-Devtool 项目地址:https://gitcode.com/vue-perf-devtool/vue-perf-devtool 在前端开发中，性能优化是提升用户体验的关键环节。对于 Vue.js 用户，Vue-Perf-Devtool 是一款强大且易于使用的浏览器开发者工具插件，它可以帮助开发者深度剖析应用性能，从而进行有针对性的优化。项目...

VUE2)vue-devtools的安装与使用

weixin_34242331的博客

02-03

157

第一步:在github上下载压缩包，github下载地址： https://github.com/vuejs/vue-devtools 第二步:解压文件到具体文件夹,并进入 root@witts:/# cd witts/fore_end/vue-devtools-master/ 第三步:利用npm安装 npm install root@witts:...

搭建vue2.0开发环境及手动安装vue-devtools工具

小小白兔兔

02-25

619

1.安装node.js，如果安装成功输入 node -v ,查看node版本号，输入npm -v查看npm版本 https://nodejs.org/en/ 2.注册淘宝镜像，定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装vue的脚手架v...

disable-devtool:通过f12按钮，右键单击和浏览器菜单禁用Web开发人员工具

04-27

:rocket: 仅一行禁用Web开发人员工具 | 在线试用/文件| 版本日志| 吉蒂 1.快速使用 1.1 npm参考 npm i disable-devtool import disableDevtool from 'disable-devtool' ; disableDevtool ( ) ; 1.2脚本属性配置 &...

vue-devtool6.2.1，vue开发调试工具第六版

08-14

Vue Devtools 6.2.1是Vue.js开发者的重要工具，它不仅简化了调试过程，还通过与Vue CLI 3的整合，提升了整体开发效率。对于前端开发者来说，熟练掌握Vue Devtools的使用，能够更好地优化Vue应用，解决开发过程中遇到...

Vue性能Devtool「Vue Performance Devtool」-crx插件

03-09

用于检查Vue组件性能的devtool扩展。 Chrome devtool扩展程序，用于检查Vue组件的性能。支持语言:English

vue-devTool编译和安装教程附源代码和编译后的安装包

04-03

通过以上步骤，你不仅能学会如何安装和使用Vue DevTools，还能了解编译扩展的过程，这对于深入理解前端开发工具的工作原理非常有益。记住，实践是最好的老师，动手操作并结合理论学习，将使你对Vue DevTools的运用...

vue-devtools-5.1.1.zip

04-23

在github链接上面直接下载的vue-devtools 不可用，我这里在分支里面下载的，5.1.1版本可用的。使用方法切换到根目录 cnpm install，然后 npm run build，再修改shells\chrome 目录下的manifest.json 里面的 "persistent": true 。然后在扩展程序添加就Ok了

VuePerformanceDevtool是一个用于检查Vue组件性能的浏览器扩展

08-10

Vue Performance Devtool是一个用于检查Vue组件性能的浏览器扩展

Vue（二）vue-devtools插件

weixin_30701575的博客

11-27

安装vue-devtools插件，便于在chrome中调试vue https://github.com/vuejs/vue-devtools 因为chrome要FQ，打不开，所以不能直接进去安装拓展程序，只能选择手动安装这里面是上述操作过后的文件 https://pan.baidu.com/s/1kUUagBl 密码：4xfg 直接下载我这个文件后解压打开谷歌更多工具 ...

Vue2【vue 简介、vue 的基本使用、vue 的调试工具】

m0_52896752的博客

11-15

1434

Vue2【vue 简介、vue 的基本使用、vue 的调试工具】

vue 调试工具 devtool 安装包

weixin_30500663的博客

09-18

239

https://blog.csdn.net/weixin_38654336/article/details/80790698 转载于:https://www.cnblogs.com/liaolongfei/p/11540084.html

vue-devtools（vue2和vue3）安装总结（google浏览器上安装的）

xiaomanonyo的博客

12-10

4092

方法一：直接从谷歌应用商店安装（vue官网有给链接，我这边不能翻墙，我没用） https://v3.cn.vuejs.org/guide/installation.html#vue-devtools 方法二：从github上下载安装 1、从github上下载安装包（链接：https://hub.fastgit.org/vuejs/devtools/tree/main）不知道为啥我直接下载下来的，运行npn run build 会报错，找了半天没找到解决办法然后我从这里点进去下...

Vue2.0开发之——Vue基础用法-调试工具(15)

我的博客

11-07

1598

安装vue-devtools调试工具配置Chrome浏览器中的vue-devtools使用vue-devtools调试vue页面more。

Vue2---

Koite的博客

03-23

1448

Vue2 简介一套用于构建用户界面的渐进式js框架特点 1、采用组件化模式，提高代码复用率、且让代码更好维护 2、声明式编码，让编码人员无需直接操作DOM，提高开发效率 3、使用虚拟DOM+优秀算法Diff算法，尽量复用DOM节点安装官网：Vue.js 学习——教程——安装——用<script>引入——选择开发版或生产版使用前准备 <script src="../../Vue/vue.js"> 将文件引入后打开浏览器测试，f12中会出现两个提示

google插件vue-devtool 5.00

11-22

总之，vue-devtool是一个非常有用的工具，它使开发人员能够更加方便地调试和优化Vue.js应用程序。无论是开发一个简单的Vue项目还是一个复杂的应用，使用vue-devtool都能提高开发效率并改善用户体验。