发现自己每次安装什么都东西都能把网上教程遇到的所有问题遇到一遍QAQ，明白查一个问题搜索引擎前三页都飘红的痛吗！！！
一、vue-devtools安装 (chrome)（正确亲测有效）
1.下载vue-devtools
（1）cmd下node指令：G:\Node>cnpm install -g vue-devtools
（或者npm指令，下载到node_modules文件夹里或者你自己定义的全局目录里）
（2）网盘资源链接：https://pan.baidu.com/s/14B-CFqMcQxF72aRofWKeVQ
参考教程链接：https://coding.m.imooc.com/questiondetail.html?qid=61693
目录结构：
2.浏览器中设置扩展
chrome设置->扩展程序->加载已解压的扩展程序->选中下载路径的vender包（node_modules\vue-devtools\vender），打开chrome右上角会有个发绿的“V”的vue标志（发灰的话是vue.js not detected，没有检测到vue，找个有vue的页面打开即可）。
3.给予vue项目相应权限
（比如运行bilibili等的站点点击vue扩展显示Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.就是说vue项目没有赋予扩展权限）
my-vue\src\main.js文件中添加：
import Vue from 'vue'
Vue.config.devtools=true
这样自己的vue项目就可以在浏览器开发工具的扩展程序里调试了。
二、所遇问题（那些年我走过的弯路）
1.添加扩展程序时报错：xxxx目录xxxx，无法为内容脚本加载 JavaScript“build/hook.js”
https://github.com/vuejs/vue-devtools 或者其他地方下载出来的目录结构呈现如下的，我还是没能运行成功（当然这可能是我太渣的问题。。。）
根据报错build/hook.js，打开manifest.json文件看是不是文件索引的问题，
打开目录发现这些hook.js文件等应该是在安装里的src文件夹里的（比照上文正确有效安装的目录也可以看到），然后我把json文件里的标红的"build"全改成了"src"或者把src文件夹重命名为了build，现在应用程序可以添加进去了。
然鹅，，，
2.vue-devtools扩展程序的“V”标签发灰，没亮，显示vue.js not detected。
有的教程说在manifest.json文件里把persistent的false改为true，，后来改了一下没有作用，然而好多教程都说这么改，我就找了半天原理（具体在哪儿看的忘了），说是persistent为true的话表示打开浏览器就默认一直加载这个扩展应用程序了，false的话只有遇到vue时才有，就看vue使用频率去设定，大概是这个意思吧，，我感觉跟not detected没啥关系。
然后，我发现扩展程序那儿详情信息旁边有错误选项，我看它报了啥错。。。
3.vue-devtools扩展程序错误：hook.js匿名函数：import { installHook } from 'src/backend/hook'标黄。
我以为可能是他import语法的问题或者是后面路径的问题，去找了找发现它引的是vue-devtools->src->backend->hook.js的installHook function，然后我就想会不会是src是上级目录的问题，改../../../改了半天，没效果后又复制了一个索引的hook.js放在了同级目录中，，最终还是始终import不对，，，然后我就放弃了（如果以后研究了import的问题解决了再回来改，，），，上文成功案例中的hook.js就没有import别的，应该就是把函数直接写在了同一个hook.js里了。。然后实在是不想再去扒它的目录、索引、方法了，就找到了上文看起来简单点的vue-devtools安装，顺利成功。。
至于为什么叨叨这么多失败的经历，，也是为了遇到这样的报错问题的时候别再走那么多弯路了:(
以上。