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

安装：

1. 下载dev-tools dev-tools，gitHub地址：github.com/vuejs/devto…

// 由于我使用github上的git下载地址clone失败了
// 下面贴出我成功clone的地址

git clone https://github.com/vuejs/vue-devtools
复制代码

2. 在vue-devtools目录下安装依赖包

// 在项目文件下打开cmd命令行窗口
npm install
// 或者使用yarn
复制代码

3. 修改manifest.json文件

把"persistent":false改成true

4. 重新打包

注意：由于当时执行npm run build 命令时，报错了，最后用的是yarn run build才打包成功

npm run build
// 失败的话建议安装yarn包,执行如下命令
yarn run build
复制代码

扩展chrome插件

在谷歌浏览器里点击右上角的三点按钮 > 更多工具 > 扩展程序。或者在输入框中输入地址：chrome://extensions/

• 打开页面后 打开右上角的开发者模式 > 左上角的加载已解压的扩展程序 > 选择刚刚打包好的packages/shell-chrome文件即可

• 安装完成，重新启动浏览器，建议将vue-tools点击刷新

以上就是vue的devtools的全部内容，下面则是题外的如何安装使用yarn包，不需要的小伙伴可以忽略

5. 安装yarn

更多yarn介绍在这篇文章juejin.cn/post/699248…

1. 下载node.js，使用npm安装
   npm install -g yarn
查看版本：yarn --version
2. Yarn 淘宝源安装，分别复制粘贴以下代码行到黑窗口运行即可

yarn config set registry https://registry.npm.taobao.org -g

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
复制代码