Vue DevTools调试工具的使用

因为工作要求，目前主要在用Vue.js技术栈做开发，调试是必不可少的，这里会用的Vue DevTools的调试工具，问题就出在这里，当用Vue DevTools做调试时，很多时候都不能用，提示没有监测到Vue，这让工作效率瞬间拉低了。

安装:

1.到github下载：

git clone https://github.com/vuejs/vue-devtools

2.在vue-devtools目录下安装依赖包

cd vue-devtools

cnpm install

修正Vue DevTools

好了，开始正题，下面来说一下修正的方法。

先从官网把Vue DevTools下载下来（https: //github.com/vuejs/vue-devtools）。

关键步骤一.修改persistent

找到文件vue-devtools/shells/chrome/manifest.json，修改persistent为true。

保存后，编译一下：

关键步骤二.勾选允许访问文件网址

上一步已经把Vue DevTools写好了，接下来是安装这个扩展。

打开Chrome，在地址栏输入chrome://extensions/，直接进入Chrome的扩展。

勾选最上方的开发者模式，再点击“加载已解压的扩展程序…”，路径为：vue-devtools-master/shells/chrome

勾选允许访问文件网址

关键步骤三.加入Vue文件中加入Vue.config.devtools

Vue.config.devtools = true; //这步很重要
new Vue({
 el: '#app',
 data: {
  a: 123,
 }
});

搞定！

效果

下载已修正版的Vue DevTools下载：vueDevTools(可监测修正版).zip

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue.js的devtools安装

    详解vue.js的devtools安装

    安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工程 执行npm install ----->npm run build. 3.修改manifest.json 中的persistent为true 4.打开谷歌浏览器设置--->扩展程序-->勾选开发者模式--->添加工程中的shells-->chrome的内容或者直接拖动shells-->chrome,至此恭

  • vue开发调试神器vue-devtools使用详解

    vue开发调试神器vue-devtools使用详解

    前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插件 GitHub下载地址: https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像按照依赖包 地址:http://npm.taobao.org/ 命令行安装npm淘宝镜像: $ npm install -g cnpm --registry=https://

  • 分享vue.js devtools遇到一系列问题

    分享vue.js devtools遇到一系列问题

    使用vue.js devtools遇到的磕磕绊绊,具体如下 1.首先我们需要在谷歌浏览器扩展程序中点击获取更多 2.在搜索框输入vue.js devtools,点击安装此扩展 3.检查扩展是否开启 我们需要检测我的扩展是否开启,允许文件地址是否访问,如果没有勾选文件地址我们就必须在服务器上访问. 4.修改插件配置文件 复制代码 代码如下: C:\Users\zhanglei\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdo

  • Vue DevTools调试工具的使用

    Vue DevTools调试工具的使用

    因为工作要求,目前主要在用Vue.js技术栈做开发,调试是必不可少的,这里会用的Vue DevTools的调试工具,问题就出在这里,当用Vue DevTools做调试时,很多时候都不能用,提示没有监测到Vue,这让工作效率瞬间拉低了. 安装: 1.到github下载: git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools cnpm install 修正Vue DevTools

  • vue devtools的安装与使用教程

    一.在github上下载压缩包,github下载地址:https://github.com/vuejs/vue-devtools 二.解压到本地的某盘 三.用你的npm中进入该文件夹下 四.依次输: 1:npm install 2:npm run build         (这一步一定不要忘了,没有执行这一步的话,项目文件夹shells>chrome文件夹里会少一个src文件夹,如下图) 五:修改shells>chrome文件夹下的mainifest.json 中的persistant为tr

  • 在Vue中实现添加全局store

    在Vue中实现添加全局store

    目录 Vue添加全局store 在命令行中输入安装 在main.js文件中引用 在src中创建一个page文件 在src下创建一个store文件 store使用方法讲解 vuex 包含有五个基本的对象 vuex,module间的方法调用 vue文件调用store的action方法 Vue添加全局store 在命令行中输入安装 npm install --save vuex 在main.js文件中引用 store和在new Vue中声明store import store from './stor

  • vue-devtools的安装步骤

    vue-devtools 是一款基于chrome游览器的插件,用于调试vue应用,由于国内不能访问谷歌商店(要科学上网),所以安装比较麻烦,写个文章记录一下. 第一步 将vue-devtools clone到本地 git clone https://github.com/vuejs/vue-devtools.git 第二步 在vue-devtools目录下安装依赖包 cd vue-devtools npm install 第三步 编译代码 npm run build 第四步 修改 vue-dev

  • 使用vuex较为优雅的实现一个购物车功能的示例代码

    前言 最近使用Vue全家桶手撸了一个pc版小米商城的前端项目,对于组件通信和状态管理有了一个更加深刻的认识.因为组件划分的比较细,开始我使用的是基本的props和emit传值,后来发现一旦嵌套过深就变得很繁琐,同时考虑到有多个组件存在需要共同管理的状态,基本的传值已经没有办法满足需求了,所以使用到了vuex来划分模块管理状态.这里需要提一点就是,如果不存在多组件共同管理的状态,最好是不用vuex管理,vuex是用来管理多组件共同状态的,单单只需要实现跨组件.隔代组件通信的话,使用eventbus

  • vue调试工具vue-devtools安装及使用方法

    vue调试工具vue-devtools安装及使用方法

    本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载: git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools cnpm install 3.修改manifest.json文件 把"persistent":false改成true

  • Vue调试工具vue-devtools的安装与使用

    Vue调试工具vue-devtools的安装与使用

    目录 前言 一.vue-devtools是什么? 二.vue-devtools安装 1.下载vue-devtools工具 2.安装vue-devtools工具 三.vue-devtools的使用 总结 前言 主要介绍vue-devtools的安装与使用. 一.vue-devtools是什么? vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率. 二.vue-devtools安装 1.下载vue-devtools工具 进入GitHub官网

  • 全面介绍vue 全家桶和项目实例

    全面介绍vue 全家桶和项目实例

    简介 "简单却不失优雅,小巧而不乏大匠". 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,"vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点".授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位中国人–尤雨溪(Evan You). Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.

  • Vue使用Vuex一步步封装并使用store全过程

    目录 一.安装Vuex依赖 二.一步步封装store 1. main.js中全局引入store仓库(下一步创建) 2. this.$store 3. this.$store.state 4. this.$store.getters(this. $store.state的升级) 5. this.$store.commit(‘mutations’) 6. this.$store.dispatch(‘actions’)(this. $store.commit(‘mutations’)的升级) 7. s

  • Vue.js学习笔记之修饰符详解

    Vue.js学习笔记之修饰符详解

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点"."连接修饰符名称. 一.v-model的修饰符 v-model 是用于在表单表单元素上创建双向数据绑定的指令.在 <input> 和 <textarea> 上,默认通过监听元素的 input 事件来更新绑定的属性值. 为了能明显的看到绑定属性值的变化,需要在Chrome浏览器中安

随机推荐