web前端知识点归纳笔记：Vue.js调试神器vue-devto

在使用 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—————
[公众号回复“电子书”，送你经典前端电子书籍]
喜欢本文的朋友们，欢迎关注微信公众号 张培跃，收看更多精彩内容