Chrome vue-devtools插件安装

原创 已于 2022-11-03 15:54:14 修改 · 554 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2022-10-29 17:22:27 首次发布
博客介绍了Vue DevTools插件的安装与设置步骤。先本地新建文件夹，进入目录调起终端执行操作，完成后将node_modules下vue-devtools的vender文件拖入Google扩展程序，修改manifest.json中persistent值为true，最后刷新扩展程序。若看不到版本和结构需进一步设置。
1、本地新建文件夹（如删除，插件无效）
2、进入该文件夹目录，导航栏输入 cmd后回车，调起终端
3、在终端里面执行
npm install vue-devtools
4、完成后进入该文件下的 node_modules，找到 vue-devtools，点击，将 vender文件拖入Google的扩展程序

在这里插入图片描述

5、记事本打开 verder 下的 manifest.json 文件，修改persistent的值为 true， 保存

在这里插入图片描述

6、刷新浏览器扩展程序

注：如看不到vue的版本也查看不了结构，请进行下面的设置
在这里插入图片描述

Chrome安装Vue插件vue-devtools
AIBB_520的博客
04-10 1702
当你开始使用Vue.js来开发Web应用程序时，Vue Devtools是一个非常有用的工具，它可以帮助你调试和优化你的Vue应用程序。在本文中，我们将介绍如何在Chrome浏览器中安装和使用Vue Devtools插件。
【Vue开发必备】Chrome浏览器中安装与使用Vue Devtools扩展完整指南
最新发布
weixin_42571280的博客
10-13 902
Vue.js作为当前主流的前端渐进式JavaScript框架，以其轻量、灵活和易于上手的特性赢得了广大开发者的青睐。它采用响应式数据绑定机制，通过虚拟DOM实现高效的视图更新，组件化架构使应用结构清晰、可维护性强。为充分发挥其调试能力，必须搭建包含Node.js、npm/yarn、Vite或Vue CLI及Chrome浏览器的完整开发环境，并集成Vue Devtools扩展，以便实时监控组件状态与数据流。本章为后续工具配置奠定基础。
vue-devtools chrome 插件
12-19
chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，ch rome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
Chrome浏览器 安装Vue插件vue-devtools
A_aspectJ的博客
03-30 8202
vue-devtools 是一个为 Vue.js 开发者设计的 Chrome 插件。它可以让你更轻松地审查和调试 Vue 应用程序。与普通的浏览器控制台工具不同，Vue.js devtools 专为 Vue 的响应性数据和组件结构量身定做。
chrome安装vue-devtool插件
feng43878的博客
02-12 3453
安装vue-devtools在chrome浏览器上的插件，版本号6.6.4
vue-devtools-5.4.3-chrome
02-12
在使用vue-devtools时，开发者首先需要在Chrome浏览器中安装该扩展。安装后，vue-devtools会在浏览器的工具栏中显示一个Vue的图标，点击该图标即可打开vue-devtools面板。在面板中，开发者可以查看当前页面中Vue组件...
精选资源
vue-devtools-6.6.4-chrome
02-12
文件名称列表中的"shell-chrome"可能指的是扩展的安装包或与安装过程相关的文件，表明用户可以通过这个文件在Chrome浏览器中安装Vue-devtools插件，从而在开发Vue.js应用时能够更高效地进行问题诊断和性能分析。...
vue-devtools-chrome 5.0.3版本
07-16
开发者只需将其作为一个扩展插件安装到Chrome浏览器中，之后在开发工具的“更多工具”部分就能找到Vue选项卡。通过这个选项卡，开发者能够快速浏览当前Vue应用的组件结构，检查组件实例，追踪组件的渲染和更新过程，...
chrome-vue-devtools
02-08
chrome-vue-devtools扩展程序的安装并不复杂，但需要几个步骤来正确配置。首先，用户需要在浏览器中找到“更多工具”这一选项，接着选择“扩展程序”。在扩展程序页面，用户可以通过点击“加载已解压的扩展程序”的...
精选资源
chrome插件 vue-devtools离线安装包
04-27
Chrome插件Vue DevTools是Vue.js开发过程中不可或缺的工具，它为开发者提供了一套强大的调试功能，如实时查看组件状态、检测性能、修改数据等。 Vue Devtools 5.3.3 版本是该插件的一个稳定版本，可以从GitHub上...
Chrome 安装Vue插件vue-devtools
06-24
开箱即用 加压包，找到shells下的chrome，再打开谷歌浏览器的扩展程序选中chrome
vue-devtools(chrome vue 调试插件)
12-02
chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
Chrome（谷歌浏览器）安装Vue插件vue-devtools（图文详细教程）
热门推荐
小钻风的博客
03-12 5万+
使用Vue开发项目时，常会用到一款谷歌浏览器插件，vue-devtools 安装成功后，运行本地Vue项目，打开浏览器控制台就如下： 其中可以便捷的查看vueX的数据以及组件结构等，非常方便， 安装步骤如下： 1、首先给大家提供一个git地址，虽然官网也有地址(https://github.com/vuejs/vue-devtools.git)，我认为不太好用 给大家提供另一个git地址： https://gitee.com/zhang_banglong/vue-devtools.git 打开里面就如
谷歌浏览器chrome的vuejs devtools 插件的安装
weixin_30677475的博客
12-14 3506
（推荐方法2） 安装方法1: 需正常打开chrome商店，搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展程序下启用； 方法2： github下载插件，npm包安装依赖，拖入浏览器扩展程序 具体操作： 1 . 下载chrome扩展插件。 在github上下载压缩包并解压到本地，github下载地址：https://github.com/v...
vue-devtools的安装：Chrome安装Vue插件vue-devtools
单口相声Jay
03-26 1297
目录1.下载Vue Devtools调试工具2.下载成功后，解压文件3.打开命令行工具4.执行npm instal1或cnpm install命令来安装依赖5.执行npm run build命令来构建vue-devtools6.在Chrome浏览器中安装vue-devtools插件7.点击右上角的“开发者模式”开关8.点击”加载已解压的扩展程序”按钮9.点击“选择文件夹"按钮10.结尾
Chrome安装vue-devtools
T追梦人的博客
10-08 377
安装vue-devtools
在Chrome中安装vue_devtools调试工具
yyzx_yyzx的博客
07-05 1574
下载vue_devtools_chrome 链接：https://pan.baidu.com/s/13zrT7CS9h3jP6c9ddOATmA?pwd=dbj1 提取码：dbj1
Chrome浏览器Vue-devtools 4.1.3插件安装指南
- 安装完成后，Vue-devtools将在插件列表中出现。 - 在浏览器右上角将显示一个灰色的Vue图标。 - 当打开一个开发使用Vue的网页时，该图标会变成绿色，表示Vue-devtools已经激活并可以使用。 - 用户可以通过按F12...
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值