web前端知识点归纳笔记:Vue.js调试神器vue-devto
2019-03-11 本文已影响77人
张培跃
在使用 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、开启开发者模式

9、点击加载已解压的扩展程序
然后选择 vue-devtools/shells/chrome

结果如下:

—————END—————
[公众号回复“电子书”,送你经典前端电子书籍]
喜欢本文的朋友们,欢迎关注微信公众号 张培跃,收看更多精彩内容