Chrome浏览器中的vue插件vue-devtools的下载安装

vue-devtools是什么

使用Vue开发项目时,常会用到一款谷歌浏览器插件,vue-devtools

安装成功后,运行本地Vue项目,打开浏览器控制台就如下:
其中可以便捷的查看vueX的数据以及组件结构等,非常方便

如何安装

1.通过github官网安装

GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.

2.国内gitee下载

https://gitee.com/zhang_banglong/vue-devtools

!!以上两种方式具体如何操作参考下面这篇文章

Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_chrome vue-CSDN博客

!!我按照上面的方法将shells文件中的chrome文件拖到谷歌浏览器的扩展程序后

提示如下错误且将 manifest_version 的版本号改成 3也毫无作用,插件也没出现在工具栏上,安装失败

Manifest version 2 is deprecated, and support will be removed in 2023. See https://developer.chrome.com/blog/mv2-transition/ for more details.

3.浏览器应用商店下载

在谷歌应用商店下载,但应用商店打不开(求大佬告诉我怎么打开)

谷歌应用商店下载流程看这里:

Chrome浏览器中的vue插件devtools的下载方式(使用Chrome应用商店/科学上网情况下)_vue devtools插件下载-CSDN博客

于是找了一个国内下载Chrome浏览器插件的网站:

扩展迷:https://www.extfans.com/

几乎所有的Chrome应用商店中的插件都包括了,且免费下载,下载

下载Vue.js-devtools安装包

按照按照流程完成安装

结果

成功安装该插件并可以正常使用

  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要安装浏览器插件vue-devtools,首先需要使用Chrome浏览器。您可以按照以下步骤进行安装: 1. 打开Chrome浏览器,在地址栏输入"chrome://extensions"并按下回车键。 2. 在打开的页面,找到并点击"开发者模式"开关,使其变为开启状态。 3. 下载已编译过的vue-devtools插件文件,可以在找到适用于Chrome浏览器的版本。 4. 将下载插件文件拖放到Chrome浏览器的扩展程序页面。 5. 确保安装成功后,您将在插件列表看到vue-devtools,并且浏览器右上角会出现一个灰色的vue标志。 6. 当您打开适用于vue开发的页面时,该vue标志会变为绿色。 7. 按下F12键,在开发者工具可以找到vue选项,其包含了vue-devtools的功能。 如果您安装后没有看到vue-devtools插件,请尝试重新启动浏览器。希望这些步骤对您有帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue调试神器vue-devtools.zip](https://download.csdn.net/download/kevinfan2011/71479554)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue-devtools4.1.3-直接解压把chrome拖到浏览器.zip](https://download.csdn.net/download/weixin_44309374/12415422)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue整合SSM项目实战](https://download.csdn.net/download/m0_55755339/88241603)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值