【vue】Vue调试神器vue-devtools安装
转载:https://segmentfault.com/a/1190000009682735
前言
vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。
chrome商店直接安装
vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了。不过要注意的一点就是,需要翻墙才能下载。
手动安装
第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
第二步:安装项目所需要的npm包
npm install //如果太慢的话,可以安装一个cnpm, 然后命令换成 cnpm install
第三步:编译项目文件
npm run build
第四步:添加至chrome游览器
游览器输入地址“chrome://extensions/”进入扩展程序页面,点击“加载已解压的扩展程序...”按钮,选择vue-devtools>shells下的chrome文件夹。
/**
*如果看不见“加载已解压的扩展程序...”按钮,则需要勾选“开发者模式”。
*/
到此添加完成,效果图如下:
结语:vue-devtools如何使用
当我们添加完vue-devtools扩展程序之后,我们在调试vue应用的时候,chrome开发者工具中会看一个vue的一栏,点击之后就可以看见当前页面vue对象的一些信息。vue-devtools使用起来还是比较简单的,上手非常的容易,这里就细讲其使用说明了。
附录
鉴于评论中很多小伙伴们有很多同学编译不成功,我这里把编译过的文件上传了百度云,后续步骤依旧,并且还附上了一个.crx文件,在chrome拓展程序页面上把文件拖进去即可安装。若百度云失效可文章下留言,我看到后会重新生成链接。
链接:https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg 密码:1hsv
【vue】Vue调试神器vue-devtools安装的更多相关文章
- Vue开发调试神器 vue-devtools
Vue开发调试神器: vue-devtools 1. 下载Chrome扩展插件GitHub下载地址: https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像 ...
- vue 代码调试神器
一.序 工欲善其事,必先利其器.作为一名资深程序员,相信必有一款调试神器相伴左右,帮助你快速发现问题,解决问题.作为前端开发,我还很年轻,也喜欢去捣鼓一些东西,借着文章的标题,先提一个问题:大家目前是 ...
- 简简单单的Vue4(vue-cie@3.x,vue’Debug[调试],vue‘sHttp)
既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 vue-cli@3.x 创建项目 Vue的Debug(调试) Vue的Http请求 提 ...
- vue学习记录(一)—— vue开发调试神器vue-devtools安装
网上有些贴子少了至关重要的一步导致我一直没装上, 切记!!install后还需build,且install和build都在vue-devtools文件夹内执行 github下载地址 点击跳转 具体步骤 ...
- vue-devtools vue开发调试神器
前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插 ...
- google vue开发调试插件,简便安装,亲测可用
前言:开发vue项目,使用谷歌浏览器,不得不使用调试插件便于调试 插件地址如下: 链接:https://pan.baidu.com/s/159HqJMeFSF-w5z-tMi7drw 密码:ueez ...
- chrome浏览器的VUE调试插件Vue.js devtools
chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...
- Vue中devtools安装使用
vue.js的devtools安装 安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工 ...
- Vue安装以及Vue项目创建以及Vue Devtools安装
这几天一直在学习Vue.js框架. 因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措. 在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建 ...
- Vue DevTools 安装应用
1.https: //github.com/vuejs/vue-devtools 从这上面下载Vue DevTools: 2.npm install(cnpm install) && ...
随机推荐
- PHP消息队列之Beanstalk
Beanstalk,一个高性能.轻量级的分布式内存队列
- 一分钟搞定:spring boot 热部署 (基于Idea)
什么是热部署? 对于spring boot项目,修改后台的java类,不要重启整个项目,就可以测试/使用刚修改的功能! 怎么为项目添加/设置热部署 maven项目在pom.xml添加下方代码,联网引入 ...
- python模块——hashlib模块(简单文件摘要算法实现)
#!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = "loki" # Usage: hashlib模块 import ...
- Python基础--文件操作和集合
这篇博客来说一下python对文件的操作. 对文件的操作分三步: 1.打开文件获取文件的句柄,句柄就理解为这个文件 2.通过文件句柄操作文件 3.关闭文件. 现有以下文件file.txt: 我们哭了 ...
- spring-mvc----数据库数据到页面错误--tomcat启动不了
spring-mvc----数据库数据到页面错误 错误为: 解决: 开启管理员cmd.到tomcat的目录下,-->shutdown.bat 不用重启,不用关机.
- Sublime text3配置xdebug调试记录
第一次配置遇到的问题记录: 问题:配置php.ini的时候xdebug.remote_port = 9001刚开始我一直配置9000端口冲突,然后一切弄好了访问浏览器就一直在转圈无法访问: 现在开始配 ...
- transition多个属性同时渐变(width,height,background)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> < ...
- RabbitMQ特性
使用默认的exchange channel.basicPublish("", QUEUE_NAME, null, message.getBytes()); 如果用空字符串去申明一个 ...
- list<map>排序
@Test public void test_when_test1() throws Exception { String[] strs = {"e", "ee" ...
- JavaScript权威指南(第6版)(中文版)笔记
JavaScript权威指南(第6版)(中文版)笔记