devtools安装 vue前端调试工具vue-devtools的安装方法

最新推荐文章于 2024-07-02 09:42:30 发布
最新推荐文章于 2024-07-02 09:42:30 发布
阅读量730 收藏
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lys20000913/article/details/122895626
版权
本文档提供了在无法直接访问官网的情况下手动安装Vue Devtools的详细步骤。首先，从GitHub下载vue-devtools插件，然后通过npm或yarn安装依赖。接着执行打包命令并修改manifest.json文件，将persistent设为true。最后，在谷歌浏览器扩展程序中开启开发者模式，加载已解压的扩展程序，并选择vue-devtools/shells/chrome目录进行添加。
摘要由CSDN通过智能技术生成

devtools安装步骤

devtools官方文档

devtools官方文档

假设如果你可以翻墙

直接点击进入管网安装；如果这个地址你访问不到那就往下按照安装步骤执行

安装步骤：

1、下载devtools

在github上下载vue-devtools插件 点击前往GitHub下载

2、标题安装依赖

进入目录文件执行npm i
npm执行较慢 可通过yarn/cnpm执行安装
在这里插入图片描述

3、打包

执行 npm run build
成功后如图所示：

4、修改文件

根据对应路径找到文件 shells/chrome/manifest.json
将该文件中 persistent设置为true
在这里插入图片描述

5、加载扩展程序

点开谷歌的扩展程序，开发者模式打开，加载已解压的扩展程序
在这里插入图片描述
在这里插入图片描述

6、添加扩展程序

将 vue-devtools/shells/chrome 选中 添加即可 在这里插入图片描述

在这里插入图片描述

Web_Lys
关注
专栏目录
vuedevtools安装
03-02
vuedevtools安装中chrome扩展，里面包含了安装的方法
devtools安装
weixin_46048542的博客
11-30 7355
加载已解压的扩展程序，接着选择找到刚才解压的文件夹 ，目录层级为：E:\devtools\devtools-main\packages。vue官网上找到vue-devtools的GitHub项目。我选择放在E盘中新建的devtools文件中，解压。进入解压好的devtools-main文件夹中。搜极简插件，在里面搜devtools。然后在命令窗口中输入以下命令。这里默认已经下载了node。完成之后，进入谷歌浏览器。选择更多工具–>扩展程序。
学习 Vue 必备——Vue.js devtools 插件安装免费教程（可不必翻墙，极简插件）
最新发布
qq_52530691的博客
07-02 1244
Vue.js DevTools 是一个用于增强 Vue 开发人员体验的工具，它提供了一些功能来帮助开发者更好地了解 Vue 应用程序。Vue.js DevTools 是一款基于chrome(谷歌) 游览器的插件，所以本文主要介绍基于 chrome(谷歌）浏览器的安装教程。 学习 Vue 必备——Vue.js devtools 插件安装免费教程（可不必翻墙，极简插件，保姆级教程）
安装vue 调试工具 devtools
qq_40410916的博客
08-17 160
首先进入官网 然后选择tag一个稳定版本下载包zip 在解压后命令执行 执行 yarn install 打包 yarn run build 在浏览器选择添加扩展
Vue调试神器vue-devtools安装
盏茶作酒的博客
04-20 260
前言 vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。 chrome商店直接安装 vue-devtools可以从chrome商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要翻墙才能下载。 手动安装 第一步：找到vue-devtools的gi...
vue调试工具vue-devtools安装及使用方法
12-12
下面我们将详细介绍 Vue Devtools 的安装和使用方法。 ### 安装 Vue Devtools 1. **克隆仓库**：首先，你需要从 GitHub 上下载 Vue Devtools 的源码。你可以通过以下命令克隆仓库： ``` git clone ...
vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具
08-19
该资源包括vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具，具体安装方法参考我的博客https://blog.csdn.net/dxnn520/article/details/121088688，如还不会，可私信我。
vue最新devtools，vue3的调试工具
10-27
Vue Devtools 为此提供了专门的检查和调试工具，可以查看组件的setup函数以及使用到的ref和reactive对象。通过这些工具，开发者可以清晰地看到数据的依赖关系，以及组件内部的状态变化。 此外，Vue 3中的Teleport...
Vue安装Vue Devtools调试工具提示 Error: Cannot find module ‘@vue-devtools/build-tools’ 解决办法
01-08
我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装：安装链接详情  但是在最终执行编译命令的时候 ：npm run build ，提示如下错误： 尝试了很多方法，都不能解决改问题。 为了...
Vue的devtools安装教程
wytccc的博客
11-24 1145
打包成功之后，进入packages/shell-chrome，记事本打开manifest.json文件，将persistent改成true，保存。打开一个引入了Vue.js的html页面，F12就能看到增加了一个Vue的选项，以后在编写Vue代码的时候，可以在这里快速的调试代码。① 如果使用npm run build打包的话，会报错如下，要求使用yarn run build来打包。安装yarn（用npm在打包的时候会失败，使用yarn可以打包成功）安装依赖（时间挺长，耐心等待）去github上拉取工具包。
vue-devtools安装
giiiig的博客
05-31 170
我按照网上的教程安装就可以，但我安装完后用的时候插件报错。解决办法。选择正确的版本安装。
Vue.js调试工具devtools的安装
youngko的博客
10-22 679
因为在原始的Chrome浏览器中始终无法打开应用商店安装插件，也使用了解压devtools文件夹的传统方式安装，过程中仍然遇到一些问题暂时无法解决，后发现使用谷歌的极速浏览器可快速安装devtools调试工具用于开发，分享出来供参考。
vue devtools调试工具安装（详细）
weixin_46911985的博客
02-06 2476
下载完成后，进入该文件下的node_modules 文件，找到 vue-devtools 文件，进入此文件夹，将其中vender 文件夹下的 manifest.json文件 进行编辑，修改persistent 为 true，保存文件。最后将vender 文件拖至浏览器的扩展程序中，重启浏览器就可以使用了。打开浏览器找到扩展程序（以谷歌为例），并勾选开发者模式，点击出现的“创建一个空的文件夹，命名最好可以见名知意，复制目录后打开命令行。
vue devtools安装
weixin_39520640的博客
03-24 168
1、到github下载：https://github.com/vuejs/vue-devtools 2、在vue-devtools目录下安装依赖包： npm i 3、修改shells->chrome->manifest.json文件 把"persistent":false改成true 4、打包 npm run build 5、打开谷歌浏览器，设置—>扩展程序，勾选开发者模式...
vue3调试工具是vue-devtools如何安装
05-11
要安装Vue.js 3的调试工具vue-devtools，您需要执行以下步骤： 1. 首先，您需要在浏览器中安装Vue.js 3的开发版本。您可以在Vue.js的官方GitHub存储库中找到开发版本的源代码。 2. 接下来，您需要将Vue.js 3的开发版本添加到您的项目中。您可以使用npm或yarn来安装Vue.js 3的开发版本，例如： ``` npm install vue@next ``` 3. 安装完成后，您需要在浏览器中安装Vue.js 3的调试工具vue-devtools。您可以在Chrome Web Store中找到该工具，或者您可以从Vue.js的官方GitHub存储库中下载源代码并手动安装。 4. 安装完成后，您可以在Chrome浏览器中打开vue-devtools，并在Vue.js 3应用程序中进行调试。 请注意，Vue.js 3的调试工具vue-devtools目前仍处于beta版本，可能存在一些问题。但是，该工具已经可以用于Vue.js 3的调试和开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Web_Lys

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值