Vue devtools工具安装 Chrome安装Vue devtools 教程步骤

yiliang 发布于2021-10-11 10:57 / 1860人阅读

摘要：已安装好的插件。三以后版本安装比如版本版本获取到，安装后的内容，后续按照步骤一操作即可。

Vue devtools工具安装 Chrome安装Vue devtools 教程步骤

一、安装步骤

1、下载地址：GitHub - vuejs/devtools at v5.1.1

2、注意：必须使用 v5.1.1 版本，经测试这个版本正常使用

3、安装步骤：

npm install / cnpm installnpm run build

4、上述步骤，安装没报错后，可以看到会生成 devtools/shell 目录

5、打开 chrome 浏览器，开启开发者模式--- 加载已解压的扩展程序 --- 选择 devtools-5.1.1/shells/chrome

方式一：在谷歌浏览器地址栏中输入：chrome://extensions/ 方法二： 右上角 --- 更多工具 --- 扩展程序

6、点击插件 "详情" --- 有权访问的网站 --- 在所有网站上

二、可能遇到的问题

1、安装报错，请选择 v5.1.1 版本

2、安装完成后devtool图标还是灰色的或者控制台根本就没有vue：

打开： vue-devtools/shells/chrome中的manifest.json 文件将"persistent": false 改为 true 。

已安装好的 vue-devtools 插件。

三、 5.1.1 以后版本安装

1、比如 v5.3.4版本：

yarn install yarn run build

2、获取到，安装后的内容： devtools-5.3.4/packages/shell-chrome ，后续按照步骤【一-5】操作即可。

PS：为什么会写这篇文章，作为一个后端开发，初次接触Vue，下载最新的版本（v6.0.x），

再按照其他博客的教程（npm install），一直安装失败 ...

最根本的原因是： 我没有看官方的安装文档！！！

比如问题： yarn 是干啥的？ yarn 和 npm 有啥区别呢？不知道！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/122101.html

前端进阶（8） - 前端开发需要了解的工具集合：webpack, eslint, prettier,

摘要：前端开发需要了解的工具集合前端开发需要了解的一些工具，这些工具能够帮助你在项目开发中事半功倍。总之，是前端打包的不二选择。所以，很多情况下都是与配合使用。它的一个理念就是提供一套完整集成的零配置测试体验。前端开发需要了解的工具集合：webpack, eslint, prettier, ... 前端开发需要了解的一些工具，这些工具能够帮助你在项目开发中事半功倍。 1. nrm: npm...

SillyMonkey 2019-08-29 16:44 评论0 收藏0
前端进阶（8） - 前端开发需要了解的工具集合：webpack, eslint, prettier,

摘要：前端开发需要了解的工具集合前端开发需要了解的一些工具，这些工具能够帮助你在项目开发中事半功倍。总之，是前端打包的不二选择。所以，很多情况下都是与配合使用。它的一个理念就是提供一套完整集成的零配置测试体验。前端开发需要了解的工具集合：webpack, eslint, prettier, ... 前端开发需要了解的一些工具，这些工具能够帮助你在项目开发中事半功倍。 1. nrm: npm...

zhaochunqi 2019-08-23 11:59 评论0 收藏0
如何安装 vue-devtools 浏览器插件

摘要：前言由于是数据驱动的，所以这就存在在开发调试中查看结构并不能解析出什么。但是借助插件，我们就可以很容易的对数据结构进行解析和调试。六如果需要更详细的图文介绍请看文章前言：由于vue是数据驱动的，所以这就存在在开发调试中查看DOM结构并不能解析出什么。但是借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试。一、下载chrome扩展插件 GitHub下载地...

LeviDing 2019-08-22 15:37 评论0 收藏0