Vue开发调试神器: vue-devtools

1. 下载Chrome扩展插件
GitHub下载地址：

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

建议使用npm淘宝镜像按照依赖包

地址：http://npm.taobao.org/

　

命令行安装npm淘宝镜像：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

　　

之后我们就可以使用cnpm代替npm按照依赖包了，npm安装依赖包确实太慢了.....

2. 安装编译

cnpm install

　　

cnpm run build

　　

打开shells>chrome>src>manifest.json并把json文件里的"persistent":false改成true

3. 将插件加入Chrome扩展插件

打开chrome浏览器，打开设置>更多工具>扩展程序>点击开发者模式；

点击“加载已解压的扩展程序”，然后选择vue-devtools-dev>shell>chrome文件夹；

最后打开一个vue项目，f12打开调试工具就可以进行vue项目的调试了。

Vue开发调试神器 vue-devtools的更多相关文章

  1. vue-devtools vue开发调试神器

    前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插 ...

  2. vue学习记录（一）—— vue开发调试神器vue-devtools安装

    网上有些贴子少了至关重要的一步导致我一直没装上, 切记!!install后还需build,且install和build都在vue-devtools文件夹内执行 github下载地址 点击跳转 具体步骤 ...

  3. vue 代码调试神器

    一.序 工欲善其事,必先利其器.作为一名资深程序员,相信必有一款调试神器相伴左右,帮助你快速发现问题,解决问题.作为前端开发,我还很年轻,也喜欢去捣鼓一些东西,借着文章的标题,先提一个问题:大家目前是 ...

  4. 简简单单的Vue4（vue-cie@3.x,vue’Debug[调试]，vue‘sHttp）

    既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 vue-cli@3.x 创建项目 Vue的Debug(调试) Vue的Http请求 提 ...

  5. vue开发环境及vue相关

    一.安装node.js Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js. 二.安装cnpm cnpm是淘宝对npm的镜 ...

  6. google vue开发调试插件，简便安装，亲测可用

    前言:开发vue项目,使用谷歌浏览器,不得不使用调试插件便于调试 插件地址如下: 链接:https://pan.baidu.com/s/159HqJMeFSF-w5z-tMi7drw 密码:ueez ...

  7. vue安装调试器Vue.js devtools

    一. 打开https://github.com/vuejs/vue-devtools,进入gitlab.往下翻找到: 找到installation,选择以chrome的拓展方式安装. 二. 这边选择添 ...

  8. 【前端vue开发架构】vue开发单页项目架构总结

    为营销活动设计的前端架构 主要的技术栈为 Vuejs,Webpack,请自行阅读如下技术或者框架的文档: 一.基础说明: node (https://nodejs.org/en/) npm (http ...

  9. vue 开发系列(十) VUE 作用域插槽

    使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...

随机推荐

  1. mysql优化--explain关键字

    MySQL性能优化---EXPLAIN 参见:https://blog.csdn.net/jiadajing267/article/details/81269067 参见:https://www.cn ...

  2. Core Graphics 定制UIVIew 处理图片

    许多UIView的子类,如UIButton或UILabel,它们的形状都是系统固定的.但是,对于一些特殊的情况,我们需要绘制产品狗想要的图形.那么等待我们的只有两个选择:第一,可以使用UIImageV ...

  3. Redis集群部署一直卡在Waiting for the cluster to join ......（Redis集群总线配置）

    redis集群总线端口为redis客户端端口加上10000,比如说你的redis 6379端口为客户端通讯端口,那么16379端口为集群总线端口 我搭建的redis集群中端口号是从 7001 ~ 70 ...

  4. shared_ptr的原理与应用

    new与赋值的坑 赋值(assignment)和new运算符在C++与Java(或C#)中的行为有本质的区别.在Java中,new是对象的构造,而赋值运算是引用的传递:而在C++中,赋值运算符意味着& ...

  5. jenkins打包maven工程发现有些包下载不下来

    将这些依赖的jar包放到mvn的本地仓库中,通常是用户主目录下的.m2/repository https://blog.csdn.net/taiyangdao/article/details/5228 ...

  6. calculate_gain

    torch.nn.init.calculate_gain(nonlinearity,param=None) 对于给定的非线性函数,返回推荐的增益值.这些值如下所示: relu_gain=nn.init ...

  7. Lock的await/singal 和 Object的wait/notify 的区别(转载)

    在使用Lock之前,我们都使用Object 的wait和notify实现同步的.举例来说,一个producer和consumer,consumer发现没有东西了,等待,producer生成东西了,唤醒 ...

  8. 动态添加+动态绑定（vue数据驱动思路）

    先上案例 首先来分析一下,勾选科目的时候,下面同时增加科目的满分值设置. 以前写jquery的思路:当勾选的时候创建dom节点,然后把dom节点append到父节点上,项目采用前后分离的方式进行交互, ...

  9. 按照行数分割excel

    本来是想通过NOPI自己编写个小工具分割excel的,但是不想去研究API,就百度了一下,找了很久,有几个软件说是为了这个功能而生,实际上要么不能使用,要么出错,所以暂时没有公开可用的软件. 然后我就 ...

  10. 全方面了解和学习PHP框架 PHP培训教程

    PHP成为最流行的脚本语言有许多原因:灵活性,易用性等等.对于项目开发来说,我们通常需要一个PHP框架来代替程序员完成那些重复的部分.本文,兄弟连将对PHP框架进行全面解析. PHP框架是什么? PH ...