Google - vue-devtools(3步完成安装与使用方法)

认识vue-devtools

Github:https://github.com/vuejs/vue-devtools
vue-devtools是一款基于chrome游览器的插件,用于调试vue应用。
由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么。
但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。
在这里插入图片描述

下载vue-devtools

传送门:http://chromecj.com/web-development/2018-01/886/download.html
在这里插入图片描述
扫描左侧二维码获取下载验证码,顺利下载后会得到这样一个文件:
在这里插入图片描述
注意:把文件放到一个经常不动的文件夹中(Google会通过本地路径找该插件)

安装

  1. 打开 Chrome 浏览器,地址栏输入 chrome://extensions/
  2. 勾选导航栏右侧 【开发者模式】
    在这里插入图片描述
  3. 直接将下载 vue-devtools 直接从文件夹中拖曳到浏览器中即可
    在这里插入图片描述
    成功安装后会显示:
    在这里插入图片描述
    打开F12,通过 >> 找到 Vue ,它就自动跑到工具栏上了,后续使用不再赘述。
    在这里插入图片描述

程序包无效:“CRX_HEADER_INVALID”(顶部显示)

在这里插入图片描述
如果你也遇到了这样的问题,解决办法很简单。
请访问程序包无效:“CRX_HEADER_INVALID” 解决办法

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页