chrome安装vue-devtools调试工具(绝逼有效)

步骤

一、到github下载/克隆安装包：

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

（无论是下载还是克隆安装包，最重要的一点就是：根据以上地址默认进入后，看到的是dev分支下的代码(如下图)，在该环境的代码中执行npm run build会报错；所以一定要记得切换到master分支的代码；如果是克隆，则在克隆后，通过执行git checkout master命令来切换到master分支；如果是下载，则选择了master后，在点击后侧的download zip按钮）

二、进入vue-devtools目录下安装依赖包

cd vue-devtools
npm install

三、依赖包下载完后执行npm run build命令

npm run build

四、build成功后会在shells下生成chrome文件夹。此文件夹就是用来放入chrome的扩展程序。

五、扩展Chrome插件

打开Chrome浏览器  > 更多工具 >  扩展程序  > 打开开发者模式

点击 加载已解压的扩展程序, 找到刚才生成的chrome文件夹，选择 vue-devtools > shells > chrome 放入, 安装成功如下图：

六、使用vue-devtools

打开vue项目，按F12，就能看到下图：