一vue-devTools
![](https://img-blog.csdnimg.cn/img_convert/1787279727d380f837a6afea3823e9ee.png)
为了更方便的在开发过程中对 Vue 程序进行调试,除了传统的浏览器自带的 debug 工具以外,我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试
vue-devTools插件:https://chrome.zzzmh.cn/#/index
插件安装教程:https://chrome.zzzmh.cn/help?token=setup
插件安装步骤
首先进入浏览器设置,点击 扩展程序
![](https://img-blog.csdnimg.cn/img_convert/32a5d8809aadc4e3c8f9562cc75bffab.png)
2.开启 开发者模式,点击 加载已解压的扩展程序 或者 直接拖拽已解压的扩展程序
注:已解压的扩展程序就是上面下载的,点击下载
![](https://img-blog.csdnimg.cn/img_convert/9971716958b1a3d2743d92c44568a256.png)
安装成功以后就可以看到:
![](https://img-blog.csdnimg.cn/img_convert/2296a0c81ded218a6c0c85a871203914.png)
点击红框处开启
通过 npm run serve 启动应用以后,即可看到浏览器右上角的 Vue 插件图片,图 红框一 处,表示 Vue.js devtools 已启动,点击图 红框二 的 vue 一项
![](https://img-blog.csdnimg.cn/img_convert/d606d0530892bcccb628c1ef08bf0dc3.png)
二解决Vue.js not detected的问题
![](https://img-blog.csdnimg.cn/img_convert/f25f91bed5c06906885d4a128eed80e6.png)
但是在自己写的页面里面这个图标是灰色的,控制台里面也没有Vue选项,然后点开扩展程序
![](https://img-blog.csdnimg.cn/img_convert/8ef57a386eff99d78c5cecf8a9bd0a15.png)
看到以下页面
![](https://img-blog.csdnimg.cn/img_convert/c6d9e8ef3e92dbbb7eca26365fe78bed.png)
点击详细信息
![](https://img-blog.csdnimg.cn/img_convert/8148a8bf57dc29a54921ae8ffc165509.png)
把这个允许访问文件网址的开关打开,锵锵,神奇的事情发生了,自己写的页面也能用vue.js devtools了