Vue调试工具vue-devtools的安装与使用
前言
主要介绍vue-devtools的安装与使用。
一、vue-devtools是什么？
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。
二、vue-devtools安装
1.下载vue-devtools工具
进入GitHub官网进行下载，网址：https://github.com/vuejs/vue-devtools
下载安装包并将安装包进行解压
2.安装vue-devtools工具
在解压后的文件夹中打开cmd命令行，在命令行中输入命令 npm install（若不能使用npm命令，请先安装node.js）
下载完成后执行：npm run build 命令
完成安装。
然后进入 shells\chrome子目录，编辑 manifest.json 文件，修改persistent 为 true。
修改完成之后，将chrome文件拖至谷歌浏览器的扩展程序中即可。重启浏览器扩展程序即可使用。
若是在npm run build时出错
我们换一种安装方式：
首先，创建一个空文件夹，进入这个文件的终端。
输入npm install vue-devtools
如上图，即可完成安装。
安装完成后，进入该文件下的node_modules 文件，找到 vue-devtools 文件，将vender 文件下的 manifest.json ，修改persistent 为 true。
最后，将vender 文件拖至谷歌浏览器的扩展程序中即可。重启浏览器扩展程序即可使用。
三、vue-devtools的使用
components： 显示当前点击组件的可用数据,并可以修改和添加，修改可实时反应在界面中，非常方便调试一些业务流程比较繁琐，可以任意展示其中的一步操作的界面。
vuex： 使用vuex时，这里可以方便查看state,mutaitons, action等信息。
events： 记录事件，比如点击事件，当你点击之后，这里会显示出来点击事件来源于哪一个组件，以及事件名等信息。
Routing 记录路由的变化，以及路由相关信息。下拉routes 可以列出当前应用所有的路由。
总结
vue devtools 在用vue做的网站上会变亮但不能查看其结构。只有在本地运行的项目才能查看。
到此这篇关于Vue调试工具vue-devtools的安装与使用的文章就介绍到这了,更多相关vue-devtools安装使用内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
原文出处：https://blog.csdn.net/weixin_43843572/article/details/124980
相关文章
- 编译安装非常的简单了我们现在的php版本已经到了php7了，下文小编来为各位介绍一篇关于PHP7快速编译安装的步骤，希望文章能够帮助到各位。 一、安装必要一些依赖 yum...2016-11-25
- 这篇文章主要介绍了Rstudio中安装package出现的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
- 在开发过程中，使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误，同样Visual Studio也支持对SQL Server里面的存储过程进行调试，下面就让我们看看具体的调试方法。...2021-09-22
- PHP-FPM我们相信各位用高版本的php经常使用到了，下面整理了一些关于PHP-FPM的笔记，有兴趣的可进来看看。 今天赶上了123System OPenVZ VPS全场半价的机会，购入了一...2016-11-25
安装和使用percona-toolkit来辅助操作MySQL的基本教程
一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合，用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务，这些任务包括： 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24Linux安装Pytorch1.8GPU(CUDA11.1)的实现
这篇文章主要介绍了Linux安装Pytorch1.8GPU(CUDA11.1)的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-25- 这篇文章主要介绍了vscode安装git及项目开发过程,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-05-19
- 这篇文章主要为大家详细介绍了Visual Studio 2015下载和安装图文教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22
- 现在我们介绍一种在Node下检查简单错误的JS代码验证工具JSHint。 JSHint的具体介绍参考http://www.jshint.com/about/，说直白点儿，JSHint就是一个检查JS代码规范与否的工具，它可以用来检查任何（包括server端和client端...2014-05-31
Centos中彻底删除Mysql（rpm、yum安装的情况）
我用的centos6，mysql让我整出了各种问题，我想重装一个全新的mysql，yum remove mysql-server mysql之后再install并不能得到一个干净的mysql，原来的/etc/my.cnf依然没变，datadir里面的数据已没有任何变化，手动删除/etc/my.cn...2015-03-15- 这篇文章主要介绍了在PyCharm中安装PaddlePaddle的方法,本文给大家介绍的非常想详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-05
Ubuntu20.04安装cuda10.1的步骤(图文教程)
这篇文章主要介绍了Ubuntu20.04安装cuda10.1的步骤(图文教程)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-30- 这篇文章主要介绍了linux服务器快速卸载安装node环境(简单上手)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-22
Postman安装与使用详细教程 附postman离线安装包
这篇文章主要介绍了Postman安装与使用详细教程 附postman离线安装包,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-03-05- 这篇文章主要介绍了uni-app从安装到卸载的入门教程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-15
- 这篇文章主要介绍了vs2019安装和使用详细图文教程，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 首先，在各个浏览器中，断点调试支持的最好的当然是Firefox，Firefox不仅可以使用Firebug调试页面js脚本，还可以用高级调试工具例如JavaScript Debugger (Venkman) 来调试Firefox扩展里的js。除此之外，Firefox还支持一些更为...2015-10-23
- 这篇文章主要给大家介绍了关于C#客户端程序Visual Studio远程调试的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了idea 无法debug调试的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-09
- 一、准备编译环境，安装所需依赖包yum groupinstall 'Development' -y yum install openssl openssl-devel zlib zlib-devel -y yum install readline-devel pcre-devel ncurses-devel bison-devel cmake -y二、编译安...2015-10-21