Chrom Vue调试工具的安装及使用

最新推荐文章于 2023-02-06 23:16:20 发布
最新推荐文章于 2023-02-06 23:16:20 发布
阅读量133 收藏
点赞数
分类专栏： 工具教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45040905/article/details/118188566
版权
本文详细介绍了如何构建Vue.js扩展包并将其安装到Chrome浏览器。首先，从官网获取克隆仓库的地址，然后安装依赖包通过执行'npm install'。接着，运行'npm run build'进行构建，生成的扩展包位于'shells/chrom'目录。最后，在Chrome的扩展程序设置中启用开发者模式，加载已解压的扩展程序，选择'shells/chrom'路径完成安装。
摘要由CSDN通过智能技术生成

安装步骤

安装地址在官网：https://cn.vuejs.org/v2/guide/
在这里插入图片描述
① 克隆仓库(亲测5.1.1版本的是好用的)
在这里插入图片描述
② 安装依赖包
进到package.json文件目录，执行npm install

③构建
使用npm run build
构建后的扩展包就在 shells/chrom
在这里插入图片描述
④ 到chrom安装构建好的扩展包
设置中找到扩展应用程序，打开开发者选项
在这里插入图片描述
加载已解压的扩展程序，找到shells/chrom
在这里插入图片描述

好俗好麻烦
关注
专栏目录
Chrome浏览器安装vue.js devtools插件方法【简单易懂】
YuaNxY_top的博客
12-27 2304
首先介绍一下vue.js devtools： vue-devtools是一款基于chrome浏览器的插件，主要是用来调试vue的应用，可以提高我们的调试效率。 接下来我们说说如何安装这个插件吧： 第一步：在GitHub下载devtools源码（任意选择一处位置，右键点击Git Bash Here，输入命令git clone + 地址） gitclonehttps://github.com/vuejs/vue-devtools.git ...
vue调试工具vue-devtools的安装
seimeii的博客
04-29 1528
1.vue-detools是什么 1.vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试 2.这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。 1.第一步： 我们可以先从github上找到vue-devtools的项目，下载到本地。下载vue-devtools链接。 克隆方法：git clone https://github.com/vuejs/vue-devtools.git 2.第二步： 解压下载好的文件，进入到vue-devto
Vue调试工具DevTools工具的安装
XiaoBo_S的博客
02-23 2507
1.DevTools是vue官方推荐的调试工具，下面介绍基于Google游览器的两种安装方式 第一种：你的电脑可以访问外网的前提下，直接到vue的官网 点击Devtools会跳转到github往下滑动找到如下图所示，安装Google插件选项点击 你就会跳转到google的应用市场，如下 点击右侧蓝色按钮安装即可，因为我的电脑安装过所以会显示从Chrom中删除 第二...
Vue 调试工具 安装教程（无脑安装）
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
01-19 748
在谷歌商店里搜索Vue.js devtools 将其添加至Chrome 添加后即可在扩展程序中查看 并将其开启 将其在页面中显示出来 如果需要在自己写的文件中使用则可以设置允许访问文件网址 最后我们就以在访问自己的文件网址的情况下使用Vue的调试工具了 自我激励 古之立大事者，不惟有超世之才，亦必有坚韧不拔之志。 ...
Chrom谷歌浏览器配置vue插件
jake_DaDa的博客
07-22 1002
1.去我的网址下载安装包 https://download.csdn.net/download/jake_DaDa/20414651?spm=1001.2014.3001.5501 2.点开谷歌浏览器右上角 3.点击 三个点----------更多工具----------------扩展程序 4.找到你刚刚下载的文件的位置一直点到chrom（点击选择文件） 5.详细信息（允许访问文件网址一定要是打开的） 6.找个带有vue项目的（一定是vue写的，不然不会显...
vue-devtools的安装与使用
热门推荐
weixin_43843572的博客
05-26 8万+
vue-devtools的安装与使用
Chrom浏览器Vue调试插件最新版本VueDevTools-5.3.3
05-27
VueDevTools-5.3.3，Chrom浏览器Vue调试插件目前最新版本，可再开发这工具中进行vue的前端代码调试工作 Chrome and Firefox DevTools extension for debugging Vue.js applications.
Vue 调试插件，Chrom 浏览器插件
07-04
关于Chrom插件，Chrome浏览器的扩展程序生态极其丰富，不仅有Vue DevTools，还有许多其他有助于前端开发的工具。例如，Postman用于API测试，Prettier for Chrome用于代码格式化，以及Lighthouse进行性能审计等。安装...
JavaScript检测是否开启了控制台（F12调试工具）
01-22
js检测用户是否打开调试工具（chrome） (function(){ var re=/x/; var i=0; console.log(re); re.toString=function(){ window.close(); return '第'+(++i)+'次打开控制台'; } })(); JavaScript检测是否开启了...
Chrome浏览器的vue开发插件
09-27
这个插件专为Vue应用提供深入的调试功能，使得开发者可以更轻松地理解、检查和调试Vue组件及其状态。 Vue DevTools 是由Vue.js官方团队开发的一款浏览器扩展，它可以在Chrome浏览器中直接安装。通过这个插件，...
vue---调试工具vue-devtools安装和配置
厚积薄发.
08-12 3774
vue 的调试工具 vue-devtools 安装和配置。vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。Chrome 浏览器在线安装 vue-devtools注意：vue2 和 vue3 的浏览器调试工具不能交叉使用！点击游览器右上角三个小点、更多工具、扩展程序。点击左上角的 ”三杠“，然后点击 ”打开 Chrome 应用商店“3.进入以后......
vue devtools调试工具安装（详细）
weixin_46911985的博客
02-06 2470
下载完成后，进入该文件下的node_modules 文件，找到 vue-devtools 文件，进入此文件夹，将其中vender 文件夹下的 manifest.json文件 进行编辑，修改persistent 为 true，保存文件。最后将vender 文件拖至浏览器的扩展程序中，重启浏览器就可以使用了。打开浏览器找到扩展程序（以谷歌为例），并勾选开发者模式，点击出现的“创建一个空的文件夹，命名最好可以见名知意，复制目录后打开命令行。
chrome安装vue调试工具
l_537的博客
09-06 2179
1. 首先下载Vue Devtools调试工具 [https://github.com/vuejs/vue-devtools/tree/v5.1.1] 2. 复制网址，在浏览器打开按照图示操作 3. 下载成功后解压即可，如下图所示 4. 解压后打开cmd命令切换到G:\Vue Devtools工具\vue-devtools-5.1.1路径下（你们安装的路径自己切换） 5. 切换命令成功后使用命令npm install下载，下载成功如下图所示 6. 然后在npm run build 如下图所示 7
vue.js开发神器devtools的安装方法
积少成多
02-08 3万+
欢迎访问我的个人博客 http://xiaolongwu.cn/ 1、安装 去gitHub上clone项目，地址 https://github.com/vuejs/vue-devtools 【传送门】 下载好后进入vue-devtools-master工程 执行npm install —–>npm run build. 修改manifest.json 中的persistent为...
vue调试工具vue-devtools安装及使用
jiang7701037的博客
08-18 6676
一、为什么要使用vue-devtools 由于用vue脚手架写的源代码，运行时，先经过webpack打包，打包后的结果和我们的源代码不一样，所以，没法调试程序，没法看的数据的变化，在google中调试非常费劲。Vue-devtools工具是专门为vue项目使用过程中设计的调试工具。有了这个工具，就可以在google浏览器的控制台里看到当前组件的模板结构和data。如下图所示(左边是当前组件...
Vue的开发者调试工具（devtools5.3.4）安装
weixin_45204443的博客
04-15 4911
1.下载Vue的开发者工具 链接：https://pan.baidu.com/s/17u8tWbdHkwdp-53umieNlw 提取码：zlss （如果过期了，请评论区说一下） 2.安装开发者工具（Chrome和Egde浏览器） （1）在Chrome浏览器安装的方式： ①点击浏览器右上角三个点 ②点击更多工具--->点击扩展程序 ...
Chrome 浏览器安装Vue Devtools调试工具 (详细教程)
li22356的博客
01-24 5万+
本人认为利用外网安装调试工具插件是最好的，还不会出错，但是缺点也是很简单，你要调试你就要开启外网，所以直接下载调试工具安装虽然很麻烦，但是解决了开启外网才能使用的缺点。 1. 首先下载Vue Devtools调试工具 https://github.com/vuejs/vue-devtools/tree/v5.1.1 之所以安装5.1.1版本的原因就是我安装的过程中出错了，不能安装新版本，为了解决这个错误只能安装5.1.1版本的 安装最新报错信息如下： Error: Cannot find module.
kali 安装chrom
最新发布
11-25
2. 下载完成后，使用以下命令安装Chrome： ```shell sudo dpkg -i google-chrome-stable_current_amd64.deb ``` 3. 如果在安装过程中出现依赖项错误，请使用以下命令修复： ```shell sudo apt-get install -f ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值