在使用 vue 时, 官方推荐我们在浏览器上安装 Vue Devtools. 它允许我们在一个更友好的界面中审查和调试 Vue 应用.
1, 在 GitHub 上打开 Vue Devtools 项目
https://github.com/vuejs/vue-devtools#vue-devtools
2, 下载压缩包
3, 文件解压缩
4, 进入压缩后的文件夹安装依赖包
NPM install
如图:
5, 编译项目文件
NPM run build
如图:
编译后的目录:
6, 修改安装目录 vue-devtools\shells\Chrome 中 的 manifest.JSON 文件. 将 persistent 属性改为 true
目录:
修改:
- "background": {
- "scripts": [
- "build/background.js"
- ],
- "persistent": true // 可常驻浏览器后台的脚本, 可以连接其他页面
- },
7, 打开扩展程序
Chrome 浏览器 > 更多程序 > 拓展程序
打开界面如下:
8, 开启开发者模式
image.PNG
9, 点击
加载已解压的扩展程序
然后选择
vue-devtools/shells/Chrome
结果如下:
-----END-----
[公众号回复 "电子书", 送你经典前端电子书籍]
来源: http://www.jianshu.com/p/6156242c8ab4