vue.js开发devtools的安装方法

最新推荐文章于 2024-07-02 09:42:30 发布
最新推荐文章于 2024-07-02 09:42:30 发布
阅读量236 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42092177/article/details/82259954
版权

1、安装

  1. 去gitHub上clone项目，地址 https://github.com/vuejs/vue-devtools 

  2. 下载好后进入vue-devtools-master工程 执行npm install —–>npm run build.

  3. 修改manifest.json 中的persistent为true。shells>chrome>manifest.json     background:true

  4. 打开谷歌浏览器设置—>扩展程序–>勾选开发者模式—>添加工程中的shells–>chrome的文件夹或者直接拖动shells–>chrome文件夹。到此就安装好了。如下图

打开开发者工作，最后没有vue的显示，那是因为没有打开vue相关的工程，打开就会自动显示

saturday-yh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js devtools
04-21
Chrome and Firefox DevTools extension for debugging Vue.js applications.
vue.js的devtools安装
weixin_33709609的博客
01-10 141
安装 1.github下载地址：https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工程 执行npm install ----->npm run build. 3.修改manifest.json 中的persistent为true 4.打开谷歌浏览器设置--->扩展程序--》勾选开发者模式...
学习 Vue 必备——Vue.js devtools 插件安装免费教程（可不必翻墙，极简插件）
最新发布
qq_52530691的博客
07-02 1021
Vue.js DevTools 是一个用于增强 Vue 开发人员体验的工具，它提供了一些功能来帮助开发者更好地了解 Vue 应用程序。Vue.js DevTools 是一款基于chrome(谷歌) 游览器的插件，所以本文主要介绍基于 chrome(谷歌）浏览器的安装教程。 学习 Vue 必备——Vue.js devtools 插件安装免费教程（可不必翻墙，极简插件，保姆级教程）
如何安装Vue.js devtools
芳草萋萋鹦鹉洲哦
05-07 376
官方文档： 大致就是： 1. 克隆仓库，我们就直接下载vue-devtoos压缩包：https://github.com/vuejs/vue-devtools【地址所在的分支为dev】 2. cd 刚下好的文件夹下，我的是vue-devtools-dev【shift+右键选择在此处打开Powershell窗口 】 3.npm install / yarn install 4. npm run build / yarn run build 5. Chrome——设置——扩展程序——加载已解压的扩展程序——选
简单粗暴安装vuejs.devtools
weixin_43802883的博客
08-16 108
火狐浏览器为例 点击附加组件 在搜索框内搜索vuejs.devtools附件 3.点进去安装即可
Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决
热门推荐
goog_man的博客
01-13 6万+
这绝对是最详细的Vue开发工具vuejs-devtools安装教程，相信你只需要5分钟即可解决所有问题 所需的所有文件，链接：https://pan.baidu.com/s/19GWDS_7GodIdFBUO0eTDAg 提取码：2yvc 一、vue.js插件下载 下载地址：vue.js插件下载； 点击进入Vue官网即可下载，共有两种版本的插件（开发版本：vue.js，生产版本：vue.main.js），建议使用开发版本。开发版本有更多的错误信息提示和调试，文件较大，生产办文件小但是很多提示不全，解决开发
vue.js devtools安装
weixin_30415801的博客
06-13 50
第一步：找到vue-devtools的github项目 https://github.com/vuejs/vue-devtools.git 我的放在这里 第二步：安装项目所需要的npm包 npm install //如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpm install 第三步：编译项目文件 npm run b...
前端 Vue 浏览器调试工具 Vue.js devtools 安装
qq_46490956的博客
08-29 3425
前端 Vue 浏览器调试工具 Vue.js devtools 安装
Vue 安装开发工具Vue.js devtools
m0_46129241的博客
03-30 197
火狐游览器安装 谷歌游览器安装 火狐游览器安装 打开菜单，找到首选项，点击扩展和主题，在输入框中输入Vue.js devtools，回车。 找到Vue.js devtools，点击下载即可安装完成。（下图是已经安装过了） 谷歌游览器安装 输入网站：https://github.com/vuejs/vue-devtools/，选择要安装的版本。（这边建议不要安装最新的版本，执行npm run build的时候，有的会报错） 下载好后解压 进入到vue-devtools-5.1.1目录
安装vue.js devtools工具
illlllllllllll的博客
02-08 219
第三：这一步初学者特别容易搞错，开启vuejs devtools程序之后，点击图标还是无法点亮图标。主要的原因是vuejs devtool必须要监视到页面是一个vue项目才能进行调试。3.进入vue-devtools\node_modules\vue-devtools\vender，修改manifest.json中的"persistent"值为true。创建一个vue程序，运行，按f12进入调试模式，这时候会发现有一个vue的选项。如果你看到这，恭喜你，看到全网解决这个问题的方法！5.重启浏览器即可生效。
Vue.js调试工具devtools的安装
youngko的博客
10-22 542
因为在原始的Chrome浏览器中始终无法打开应用商店安装插件，也使用了解压devtools文件夹的传统方式安装，过程中仍然遇到一些问题暂时无法解决，后发现使用谷歌的极速浏览器可快速安装devtools调试工具用于开发，分享出来供参考。
vue-如何快速安装vue.js devtools工具
yt1318519610的博客
06-30 280
如何快速安装vue devtools
vue.js devtools安装方法
qq_27470647的博客
04-01 447
新版chrome安装vue-devtools等扩展程序时，可能会出现红色错误标记或者不允许安装，所以特地总结了一下，新版Chrome安装vue devtools总共有三种办法： 一、最简单的办法(强烈推荐)就是找一个Chrome 网上应用店去下载对应的扩展程序，比如扩展迷（网址https://www.extfans.com/）或者Chrome插件网（网址https://chromecj.com/）...
Web 前端 之 Vue 浏览器调试工具 Vue.js devtools 安装(三种方法)的简单整理
仙魁XAN
10-28 5104
一、简单介绍 Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。 本节介绍，Vue 浏览器调试工具 Vue.js devtools 安装，这里做简单整理，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。 vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。 接下来将介绍三种安装方法。 二、相关环境 1、Windows 10 2、Goog...
vue-devtools安装教程
xuan的博客
02-15 4082
一、前置环境（已安装好node，npm） 二、获取工具项目 文件 · dev · mirrors / vuejs / vue-devtools · GitCode⚙️ Browser devtools extension for debugging Vue.js applications. ???? Github 镜像仓库 ???? 源项目地址 https://gitcode.net/mirrors/vuejs/vue-devtools/-/tree/devhttps://github.com/vuej
Vue调试工具vue-devtools的安装与使用_vue调试工具安装
2401_84447112的博客
04-29 1254
主要介绍vue-devtools的安装与使用。
Vue.js devtools最简便安装流程
qq_45331969的博客
04-11 161
进入网址： https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521 下载安装文件 下载插件，并在浏览器提示中选择【保留】 打开浏览器扩展安装页面 点击浏览器右上角 ⋮ > 更多工具 > 点击 扩展程序 安装插件 在扩展中心打开右上角的 【开发者模式】按钮，然后【刷新】页面，把下载好的 .crx 文件拖入扩展中心 最后关闭浏览器重新打开，在打开一个Vue项目测试即可 ...
vue.js.devtools安装教程
03-16
Vue.js Devtools是一个浏览器扩展程序，用于帮助开发人员调试Vue.js应用程序。以下是安装Vue.js Devtools的步骤： 1. 首先，确保您已经安装了Chrome浏览器。 2. 打开Chrome浏览器并转到Chrome Web Store。 3. 在搜索栏中输入“Vue.js Devtools”。 4. 点击“添加到Chrome”按钮。 5. 等待扩展程序下载和安装完成。 6. 安装完成后，您可以在Chrome浏览器的扩展程序栏中找到Vue.js Devtools图标。 7. 点击Vue.js Devtools图标，打开Vue.js Devtools面板。 8. 现在，您可以使用Vue.js Devtools来调试您的Vue.js应用程序了。 希望这个安装教程能够帮助您安装和使用Vue.js Devtools。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值