Vue-devtools 安装

---

title: Vue-devtools
date: 2018-02-25 09:59:34
tags: main

---

Vue-devtools 是一款基于 Chrome 浏览器的插件，用来调试 Vue 应用，可以极大的提高调试效率，第一次使用，记录下来。

安装方式一

Vue-devtools 可以从 Chrome 商店直接下载安装，前提需要翻墙。

安装方式二

• 第一步：找到 Vue-devtools 的 github 地址，并将其 clone 到本地。

git clone https://github.com/vuejs/vue-devtools.git

• 第二步：安装项目所依赖的 npm 包

npm install

遇到的问题：

• 第三步：编译项目文件

nom run build

• 第四步：添加至 Chrome 浏览器的拓展

浏览器地址栏输入：chrome://extensions/
点击“加载已解压的拓展程序”
选择本地 clone 下来的文件夹中的 shells -> chrome 文件夹（vue-devtools-master/shells/chrome ）

• 第五步：重启浏览器

• 第六步：在浏览器中的调试 Vue 代码