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. springboot在集成mybatis的时候老是报错 The server time zone value '�й���׼ʱ��' is unrecognized

    我已经解决了,感谢万能网友. 解决办法参见:https://blog.csdn.net/yunfeng482/article/details/86698133

  2. 完整的JavaScript包括三部分、script标签、JavaScript的基本语法以及变量和字面量的关系

    完整的JavaScript包括三大部分: -ECMAScript   JavaScript的开发规范:提供核心语言功能 -DOM   document object model   文档对象模型:提供 ...

  3. Python基础——函数的装饰器

    等待更新…………………… 后面再写

  4. linux 走三层内网添加静态路由

    /etc/sysconfig/network-scripts/ifcfg-eth1 #机器1ip route add 10.24.4.0/24 via 10.90.203.1 dev ens33/et ...

  5. [DllImport("kernel32.dll")]使用

    C#中读取ini配置文件 [DllImport("kernel32.dll")] using System;using System.Collections.Generic;usi ...

  6. 关于WPA/WPA2 4次握手

    简单描述一下WPA/WPA2的4次握手中的一些关键词: WPA/WPA2使用4次握手的方式来产生所需要的密钥.四次握手通过一系列的交互,从PMK(Pairwise Master Key)生成PTK(P ...

  7. C#任务Task

    完整调用 TaskCreationOptions tcOptions = TaskCreationOptions.PreferFairness | TaskCreationOptions.LongRu ...

  8. JS 循环遍历 总结

    一.循环遍历语句 for...in... (ES5) 语法:javascript for(keys in obj){} 适用:遍历对象 说明: 1.keys表示obj对象的每一个键值对的键(键名),所 ...

  9. Prism MVVM使用WPF的DataGrid控件

    此项目源码下载地址:https://github.com/lizhiqiang0204/PrismDataGird01 运行效果如下 前端代码如下 <Window x:Class="V ...

  10. 【NOIP2016提高A组模拟9.9】总结

    第一题,题面很不错,正解是分治,不过用ljj水法也可以轻松的所过去. 第二题,本来以为是个有向无环图, 结果搞了半天才发现,事实并不是这样的,于是暂时弃疗, 接着在最后的40分中,某人大喊:哦原来是t ...