Vue 安装 vue-devtools-dev

最新推荐文章于 2024-05-14 12:26:25 发布
最新推荐文章于 2024-05-14 12:26:25 发布
阅读量665 收藏
点赞数
分类专栏： Vue Admin 文章标签： vue vue-devtools
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/E86huang/article/details/107974041
版权

下载地址：https://github.com/vuejs/vue-devtools

  1. Clone this repo
  2. cd vue-devtools the newly created folder
  3. run yarn install
  4. then run yarn run build
  5. Open the Chrome extension page (currently under Menu > More Tools >
    Extensions)
  6. Check “developer mode” on the top-right corner
  7. Click the “load unpacked” button on the left, and choose the folder:
    vue-devtools/packages/shell-chrome/

根据官网提示：控制台 cd 进入文件夹，运行 yarn intall ，yarn run build ，等运行完成后。
在谷歌的扩展程序添加已经解压的路径，“\vue-devtools-dev\packages\shell-chrome”
出现下图为vue 开发调试工具安装成功。
在这里插入图片描述

神奇的网友
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
安装vue-devtools过程中种种问题
m0_67403272的博客
03-06 3898
周五按照网上教程进行按照，报错再百度搜索找方案。之前一直在vue-devtools文件夹中使用git bash进行cnpm install安装不成功，报各种依赖包不支持。报错类似如下： npm WARN … requires a peer of react@^16.4.0 but none is installed 报错内容过多，需要安装依赖包太多。然后将npm版本号降到6.0.1，报错更多。类似 npm WARN npm npm does not support Node.js v14.16.0 npm
vue-devtools离线版安装
06-16
vue.js的附属工具vue-devtools的本地版本的插件，直接拖动安装即可使用，版本为5.3.3，同时附带有其他版本工具
Vue开发调试神器-vue-devtools
dreamingbaobei的博客
09-12 287
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。 一、安装 1、vue-devtools可以从chrome商店直接下载安装，但由于chrome浏览器的应用商店不能直接访问，可以到github上下载 git clone https://github.com/vuejs/vue-devtools 2、执行以下命令 cd vue-devt...
【Vue】全家桶之vue-devtools
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
08-08 6913
Vue Devtools 是 Vue 官方发布的调试浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。
2024年最全Vue调试工具vue-devtools的安装与使用_vue调试工具安装，2024年最新阿里巴巴p6面试
最新发布
2401_84436058的博客
05-14 908
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】主要介绍vue-devtools的安装与使用。
Vue DevTools 使用指南 - 如何安装和使用 Vue DevTools 调试 Vue 组件
热门推荐
蒋川@卡拉云
04-02 2万+
Vue Devtools 是 Vue 官方发布的调试浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。
如何build并在Chrome浏览器上安装vue-devtools调试工具
fx_yzjy101的专栏
03-05 5254
目录 概述 准备工作 安装过程 install安装 build编译 遇到报错1 遇到报错2 yarn run build chome安装本地扩展 chrome-vue-devtools扩展文件分享 概述 本文记录vue-devtools调试工具install以及build打包过程中遇到的：npm install报错，npm run build 报错，以及如何安装build后的chrome扩展包。 准备工作 最近开始使用Vue开发前端，需要安装Vue-devtools调试工具。
vue-devtools-dev
02-13
7. **离线安装**：考虑到某些用户可能无法访问到Google Chrome网上应用店，提供vue-devtools-dev这样的压缩包下载方式，使得用户可以在离线环境下安装Vue Devtools，这极大地拓展了其使用范围。 安装Vue Devtools ...
vue-devtools的安装
chenhaiy的博客
03-25 9638
vue-devtools的安装 vue-devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。前端开发工程师应该比较熟悉这款工具，可以边侧边栏窗格中的页面，边检查代码。由于vue是数据驱动的，所以就会存在在开发调试中查看DOM结构并不能看到我们想看到的内容，那么借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试。 本文重点介绍vue-devtools安装方法，提供chrome插件直接安装方法。接下来
vue devtools安装
qq_26337713的博客
06-20 698
1.下载安装包 vue-devtools.crx安装包 2.修改文件后缀名为zip，然后解压到文件夹中 3.打开谷歌浏览器右上角… 的更多工具-》扩展程序 打开开发者模式后选择加载已解压的扩展程序 选择刚才解压的文件即可成功...
vue-devtools安装包
06-04
vue-devtools安装包，可以解压直接使用，支持vue3
vue devtools 最新版 4.0.1 chrome扩展离线下载
01-24
文件 MD5: D6B8418F1092627FF0F83D32B498D38A SHA1: A151601B66A890D9107DF2E77C3E5FDB8740A57C Vue Devtools 4.0 有哪些新内容 https://juejin.im/post/5a676c33f265da3e5b32f43c?utm_source=gold_browser_extension 如何离线安装Chrome插件? https://jingyan.baidu.com/article/e5c39bf5cc39cc39d76033cd.html
Vue dev-tools下载
11-17
vue devtools 开发vue 必备工具
Web 前端 之 Vue 浏览器调试工具 Vue.js devtools 安装(三种方法)的简单整理
仙魁XAN
10-28 4776
一、简单介绍 Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。 本节介绍，Vue 浏览器调试工具 Vue.js devtools 安装，这里做简单整理，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。 vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。 接下来将介绍三种安装方法。 二、相关环境 1、Windows 10 2、Goog...
vue devtools V6.2.0 下载与安装
weixin_47675705的博客
07-07 597
vue-devtools V6.2.0
Vue.js not detected
m0_47147246的博客
10-06 140
问题： Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools 解决方法： “设置”——“扩展程序”——点击Vue.js devtools插件的“详情”——点亮“允许访问文件网址” ...
vuedevtools 离线安装
qq_38358436的博客
01-13 1313
vue-devtools github: https://github.com/vuejs/vue-devtools 下载文件 git clone https://github.com/vuejs/vue-devtools.git 安装依赖 npm install 打包 npm run build 安装到 chrome instal...
mac下安装Vue DevTools
有问题可关注公众号：前端研究院 后台输入问题回复
11-23 505
一、下载   去Vue DevTools 项目的官方主页GitHub上下载。因为直接在Chrome应用商店下载需要翻墙。   官方地址：https://github.com/vuejs/vue-devtools.git 二、安装项目所需的依赖包— npm 包   进入下载好的vue-devtools-dev文件夹的目录，通过命令输入以下代码 npm install 三、编辑项目文件 npm run build 四、修改persistent   进入vue-devtools-de
vue-devtools 6.0.12安装
07-18
### 回答1： 要安装vue-devtools 6.0.12，您可以按照以下步骤进行操作： 1. 首先，确保您已经安装了Vue.js开发环境。如果您还没有安装Vue.js，可以去Vue.js的官方网站（https://vuejs.org/）获得相关的安装指南。 2. 在安装Vue.js的前提下，您可以通过全局安装vue-cli命令行工具来创建一个Vue.js项目。打开一个命令行终端窗口，运行以下命令来安装vue-cli： ``` npm install -g @vue/cli ``` 3. 创建一个新的Vue.js项目。在命令行终端窗口中运行以下命令： ``` vue create my-project ``` 其中，"my-project"是您想要创建的项目名称。您也可以根据自己的需求进行修改。 4. 进入到新创建的项目目录。在命令行终端窗口中运行以下命令： ``` cd my-project ``` 5. 安装vue-devtools插件。运行以下命令： ``` vue add @vue/devtools ``` 6. 等待安装完成后，您可以通过运行以下命令来启动开发服务器： ``` npm run serve ``` 7. 在浏览器中打开http://localhost:8080（或者您的指定的地址）来访问您的Vue.js应用程序。 通过按照以上步骤进行操作，您就可以成功安装vue-devtools 6.0.12，并且在浏览器开发者工具中使用它来调试和检查您的Vue.js应用程序了。 ### 回答2： 安装 vue-devtools 6.0.12 的步骤如下： 1. 首先，确保你已经安装了 Node.js，可以在终端中运行 `node -v` 查看 Node.js 是否已正确安装。 2. 打开终端，并进入你的项目目录。 3. 在终端中运行以下命令，安装 Vue CLI（如果你已经安装了 Vue CLI，请跳过此步骤）： ``` npm install -g @vue/cli ``` 4. 安装完 Vue CLI 后，使用以下命令在你的项目中安装 vue-devtools： ``` vue add @vue/devtools@6.0.12 ``` 5. 等待安装过程完成，安装成功后，终端会显示安装成功的提示信息。 6. 在你的项目中使用 vue-devtools： - 如果你正在使用 Vue CLI 创建的项目，在开发环境下启动项目时，vue-devtools 将自动启动并与你的项目连接。 - 如果你正在使用其他构建工具或手动配置的项目，你需要在你的代码中手动引入 vue-devtools。在你的应用程序入口文件（通常是 `main.js`）中添加以下代码： ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 引入 Vue Devtools import { createDevtools } from '@vue/devtools'; const app = createApp(App); // 创建 Vue Devtools 实例并与应用程序连接 if (process.env.NODE_ENV === 'development') { createDevtools(app).mount(); } app.mount('#app'); ``` 现在，你已经成功安装并配置了 vue-devtools 6.0.12，可以使用开发者工具检查和调试你的 Vue.js 应用程序了。 ### 回答3： 要安装vue-devtools 6.0.12，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Vue.js框架，并且正在使用Vue.js版本2.5或以上。 2. 在你的Vue.js项目中，打开终端或命令提示符窗口。 3. 使用npm命令来安装vue-devtools，输入以下命令并按下回车键： ``` npm install -g @vue/devtools@6.0.12 ``` 4. 等待npm完成安装过程，这可能需要一些时间，取决于你的网络连接速度和系统性能。 5. 安装完成后，在终端或命令提示符窗口中输入以下命令来验证安装： ``` vue-devtools ``` 6. 如果一切正常，你将看到vue-devtools图标出现在你的浏览器扩展栏中。 7. 打开你的Vue.js应用程序，刷新页面，然后单击浏览器扩展栏中的vue-devtools图标。 8. 现在，你已成功安装和启动了vue-devtools，你可以使用它来调试和检查你的Vue.js应用程序。 请注意，以上步骤是针对全局安装vue-devtools的情况。如果你希望只在特定的Vue.js项目中使用vue-devtools，则可以在项目目录中使用类似的命令安装，而无需全局安装，例如： ``` npm install --save-dev @vue/devtools@6.0.12 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

神奇的网友

day day up

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

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

打赏作者

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

抵扣说明：

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

余额充值