vue调试神器vue-devtools安装
vue-devtools安装
vue-devtools是一款用来调试Vue应用的Chrome插件,可极大提高开发者调试项目效率,接着我们说一下如何下载安装这个插件;
一、 从chrome商店直接下载安装
- 国内无法访问,你懂得,有条件的可以自己处理 : https://chrome.google.com/webstore/category/extensions
- 国内的也可以在此处下载 : http://www.cnplugins.com/
二、自己编译安装
第一步 : 克隆项目到本地
① 找到github上vue-devtools项目

② 使用git讲代码克隆到本地 :
git clone https://github.com/vuejs/vue-devtools.git
第二步 :
下载相关依赖 :
yarn 或 npm install
第三步 :
项目打包 :
yarn build 或 npm run build
第四步:
① 打开chrome 更多工具 -> 扩展程序 -> 加载已解压的扩展程序

② 选择打包好的文件

③ 添加完成

第五步:
F12打开控制台点击最右侧vue选项卡

vue调试神器vue-devtools安装的更多相关文章
- chrome浏览器的VUE调试插件Vue.js devtools
chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...
- 【vue】Vue调试神器vue-devtools安装
转载:https://segmentfault.com/a/1190000009682735 前言 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们 ...
- Vue调试神器之Vue.js devTools
Vue项目中使用Vue.js devTools这款调试神器,可以极大程度的提高我们的开发效率. 安装 1.打开Chrome网上应用商店安装插件(自墙),直接搜索devTools安装即可.贵宾传送阵,请 ...
- Vue中devtools安装使用
vue.js的devtools安装 安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工 ...
- Vue开发调试神器 vue-devtools
Vue开发调试神器: vue-devtools 1. 下载Chrome扩展插件GitHub下载地址: https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像 ...
- vue 代码调试神器
一.序 工欲善其事,必先利其器.作为一名资深程序员,相信必有一款调试神器相伴左右,帮助你快速发现问题,解决问题.作为前端开发,我还很年轻,也喜欢去捣鼓一些东西,借着文章的标题,先提一个问题:大家目前是 ...
- Vue安装以及Vue项目创建以及Vue Devtools安装
这几天一直在学习Vue.js框架. 因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措. 在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建 ...
- chrome浏览器安装vue调试器vue-devtools
chrome浏览器安装vue调试器vue-devtools https://blog.csdn.net/zhangjnwei/article/details/76693053
- 简简单单的Vue4(vue-cie@3.x,vue’Debug[调试],vue‘sHttp)
既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 vue-cli@3.x 创建项目 Vue的Debug(调试) Vue的Http请求 提 ...
随机推荐
- kmalloc、vmalloc、__get_free_pages()的区别
一.分布位置上的区别: kmalloc()和__get_free_pages()函数申请的内存位于物理内存的映射区域,而且在物理上也是连续的,它们与真实的物理地址只有一个固定的偏移,因此存在简单的线性 ...
- StackExchange.Redis学习笔记(五) 发布和订阅
Redis命令中的Pub/Sub Redis在 2.0之后的版本中 实现了 事件推送的 发布订阅命令 以下是Redis关于发布和订阅提供的相关命令 SUBSCRIBE channel [channe ...
- linux下,文件的权限和数字对应关系详解
命令 chmod ABC file 其中A.B.C各为一个数字,分别表示User.Group.及Other的权限. A.B.C这三个数字如果各自转换成由"0"."1&qu ...
- BZOJ:4530: [Bjoi2014]大融合
4530: [Bjoi2014]大融合 拿这题作为lct子树查询的练手.本来以为这会是一个大知识点,结果好像只是一个小技巧? 多维护一个虚边连接着的子树大小即可. #include<cstdio ...
- strncmp函数——比较特定长度的字符串
strncmp函数用于比较特定长度的字符串. 头文件:string.h. 语法 int strncmp(const char *string1, const char *string2, size_ ...
- [51nod1329]路径游戏
Snuke与Sothe两个人在玩一个游戏.游戏在一个2*N的网格中进行(2行N列),这个网格中的2N个格子不是黑色就是白色.定义,一条有效路径是指一个完全由白色格子构成的序列,这个序列的第一个网格元素 ...
- Angular 选项卡
<div ng-init="now=0;" class="nav"> <h4>选项卡</h4> <div > & ...
- 010 有顺序的Map的实现类:TreeMap和LinkedHashMap
作者:nnngu GitHub:https://github.com/nnngu 博客园:http://www.cnblogs.com/nnngu 简书:https://www.jianshu.com ...
- 把织梦安装到子目录,不读取CSS 没有样式?
我在A5上找的一个模板,照着说明安装到根目录就正常,我想安装到子目录下面,结果很乱 应该是不读取CSS. {dede:global.cfg_templets_skin/}/style/about.cs ...
- wamp apache无法启动的解决方法
作者 grunmin 2014.03.12 14:44* 字数 535 阅读 22167评论 9喜欢 5 如题,近日在安装wamp的时候出现了apache无法启动的情况.wamp图标一直显示橙色.网上 ...