下载 Devtools

一，直接去 github 官网，下载 devtools 源码，地址：https://github.com/vuejs/vue-devtools
二、使用 git clone 命令，将源码克隆到本地
```
  git clone https://github.com/vuejs/vue-devtools
```
下载后，源码如下：

安装 Devtools

下载完成后，进入 vue-devtools-master 目录执行 yarn install`, 下载依赖
```
  cd vue-devtools-masternpm install # cnpm install# yarn install
```
依赖安装完成，效果如图：
然后执行 npm run build，编译源程序
```
  npm run build# yarn build
```
编译完成，效果如图：

编译完成，目录结构如下：

修改 mainifest.json

修改 packages/shell-chrome 目录下的 mainifest.json 中的 persistant 为 true：
把 “persistent”: false 改成 “presistnet”: true

Chrome 扩展插件

打开谷歌浏览器，点击右上角的扩展符号，点击 更多工具，选择 扩展程序
选择 开发者模式，并点击 加载已解压程序扩展程序 按钮
选择 vue-devtools-master --> packages --> shell-chrome 放入，安装成功并启用，效果如图：

注意

vue必须引入开发版，使用min压缩版是不能使用devtools进行调试的；
安装后，需要重启浏览器，才可以使用。

Vue Devtools 使用

启动 vue 项目, 打开 F12 开发者模式, 选择 Vue 就可以使用了。

vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试。

Vue 调试工具 vue-devtools 安装及使用相关推荐

Vue调试工具 vue-devtools的安装
扩展程序查看地址:chrome://extensions/ 1.访问https://chrome.google.com/webstore/category/extensions?hl=zh-CN(谷歌 ...
Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
Chrome浏览器-vue调试工具dev-tools安装
vue调试工具dev-tools安装 git bash 管理端执行相关命令 # 下载源码 git clone https://github.com/vuejs/vue-devtools.git # 进 ...
vue调试工具vue-devtools安装及使用
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用. 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧. 1.到github下载:git ...
Vue Devtools安装（谷歌浏览器插件：）
vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...
Vue调试工具的安装方法（动动鼠标就完成，不会意外报错，超爽~）
Vue调试工具的安装方法 1. 打开谷歌浏览器的网上应用商店并搜索谷歌浏览器的网上应用商店 https://chrome.google.com/webstore/category/extension ...
通过chrome应用商店安装vue调试工具
自己在vue官网上面用git安装vue安装包之后,遇到了各种安装问题,比如npm run build 直接报错,解决问题也没有找到后,自己在搜索了b站上面的一个安装vue调试工具的教程之后,发现可以通 ...
怎么看vue中某个插件是否安装成功_如何在谷歌中查看VUEX（谷歌浏览器中安装 vue调试工具 vue-devtools）...
本次介绍了两种方法,第一种方法略微复杂,想追求效率的请查看第二种. 20200214141007961.png 如果你在使用vue开发项目浏览器中没有安装vue调试工具显然不能算是一个合格的vue ...
Vue调试工具的安装
Vue调试工具的安装第一种方法: 1.chrome浏览器输入地址"chrome://extensions/"进入扩展程序页面 2.点击右上角按钮,勾选开发者模式 3.点击&quo ...

Vue 调试工具 vue-devtools 安装及使用

在 Chrome 浏览器上安装 Vue Devtools 工具

下载 Devtools

安装 Devtools

修改 mainifest.json

Chrome 扩展插件

Vue Devtools 使用

Vue 调试工具 vue-devtools 安装及使用相关推荐

最新文章

热门文章