我们在使用vue开发项目的时候,如果想要更好的审查和调试 vue 应用,可以使用官方推荐的Vue Devtools。

但是官方的方法比较麻烦,要使用npm编译,搞不好还会报好多莫名其妙的错误。

下面给大家提供一个简便的方法,不会再浪费大家宝贵的时间啦!

1.获取Vue Devtools插件

我已经将编译好的插件上传到博客里啦,可以找一下然后下载。

解压后得到一个 vender 文件夹,打开后目录结构如下

Chrome浏览器安装Vue Devtools插件(附带编译好的工具包)

打开 manifest.json文件,找到 "persistent”,将它的值改成true

Chrome浏览器安装Vue Devtools插件(附带编译好的工具包)

2.配置浏览器并安装

打开Chrome浏览器,找到 扩展程序

Chrome浏览器安装Vue Devtools插件(附带编译好的工具包)

选择打开开发者模式

Chrome浏览器安装Vue Devtools插件(附带编译好的工具包)

然后把 整个 vender 文件夹拖进浏览器窗口即可!一定是整个文件夹,少了一个文件都不行!丢进去之后看到如下界面,此时可以看到右上角多了一个扩展插件的图标

Chrome浏览器安装Vue Devtools插件(附带编译好的工具包)

点击详细信息,下面这些都是默认勾选上的

Chrome浏览器安装Vue Devtools插件(附带编译好的工具包)

3.测试

安装完后可以发现右上角的vue图标是灰色的,我们可以选择把它固定到浏览器上面

Chrome浏览器安装Vue Devtools插件(附带编译好的工具包)

用浏览器打开一个 vue 项目, vue图标点亮,控制台多了一个vue调试窗口,则说明安装成功!

Chrome浏览器安装Vue Devtools插件(附带编译好的工具包)

注意,普通项目下vue图标也是灰色的,这个扩展插件只有在vue项目下才可用!

博客资源审核太慢啦,已经传到github上了 vue-devtools ,github上克隆下来的文件名是vue-devtools,如果是通过git克隆得到的扩展插件,只需把上文提到的vender看作是vue-devtools,只是文件名不一样啦。

相关文章:

  • 2021-08-10
  • 2022-12-23
  • 2022-12-23
  • 2021-05-22
  • 2021-12-02
  • 2021-04-26
  • 2021-04-29
猜你喜欢
  • 2022-12-23
  • 2021-05-15
  • 2021-06-11
  • 2021-11-28
  • 2021-12-11
  • 2022-12-23
  • 2021-11-24
相关资源
相似解决方案